前端 框架之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

布局容器

        """
        第一次使用该框架的时候最好采用本地导入的方式 
        让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框架