[前端框架 bootstrap 的使用 ]

内容概要

• 前端框架 bootstrap 简介
• 引入方式
• 布局容器
• 栅格系统
• 图标

内容详细

简介

网址：https://v3.bootcss.com/

版本： 2.X 3.X 4.X 推荐使用3.X版本

使用框架调整页面样式一般都是操作标签的class属性即可

作用：

• 是?套现成的 CSS 样式集合
• ?于开发响应式布局、移动设备优先的 WEB 项?

1. html、css、javascript ?具集
2. ?定义 JQuery 插件，完整的类库。丰富的组件
3. 响应式布局设计,让?个?站可以兼容不同分辨率的设备

引用方式

1、本地引入

先到网址下载源码，

在新建的 html 文件中写入引入语句：

1.引入jQuery
2.引入bootstrap的css文件
3.引入bootstrap的js文件

2、CDN 引入

cdn 网址：https://www.bootcdn.cn/

1.引入jQuery CDN
2.引入bootstrap css的 CDN
3.引入bootstrap js的 CDN

布局容器

"""
第一次使用该框架的时候最好采用本地导入的方式 
让pycharm记住bootstrap的关键字
"""
container		左右留白
container-fluid  左右不留白

栅格系统

用来布局， row 把当前标签分为 12 等份

row			行  # 一个row就是一行 一行是固定的12份
col-md-1	占几份
col-sm-1	占几份
col-xs-1	占几份
col-lg-1	占几份

图标

• bootstrap自带的图标：

通过span标签修改class属性值

• fontawesome网站

网址：http://www.fontawesome.com.cn/

Font Awesome 完全兼容 Bootstrap 的所有组件。