前端框架之bootstrap

1. bootstrap简介

# bootstrap框架
    2.x，3.x，4.x  # 目前推荐使用 3.x
使用框架调整页面样式一般都是操作标签的class属性即可。

# 前提是需要动态效果的时候
bootstrap需要依赖于jQuery才能正常执行

# 引入方式
1. 本地引入(最完整的)
    1. 引入jQuery
    2. 引入bootstrap的css文件
    3. 引入bootstrap的js 文件

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

2. 布局容器

# 第一次使用bootstrap的时候先本地导入，让pycharm记住样式类，这样会有提示。

<div class="conatiner">左右留白式布局</div>

<div class="conatiner-fluid">左右不留白式布局</div>

3. 栅格系统

class="row"
<div class="col-md-6"></div>
<div class="col-md-3"></div>
row    行    # 一个row就是一行，一行是固定的12份

col-md-数字    表示占一行中的份数，共12

# 响应式布局
col-sm-6  手机端布局
col-xs-6
col-lg-6


# 列偏移
class="col-md-6 col-md-offset-3"

4. 组件

# 图标
通过span标签修改class属性值

fontawesome网站
    专门提供图标库
    下载保存引用即可
# 完美兼容bootstrap框架

# 导航条。。。。