前端框架之bootstrap简介

Bootstrap框架

Bootstrap框架
2.X 3.X 4.X # 推荐使用3.X版本

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

bootstrap需要依赖于jQuery才能正常执行(动态效果)

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

"""placeholder 属性提供可描述输入字段预期值的提示信息"""

布局容器

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

栅格系统

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

图标

bootstrap自带的
通过span标签修改class属性值
fontawesome网站
专门提供图标库 # 完美兼容bootstrap框架