前端框架之bootstrap

BOOTSTRAP中文网——BOOTSTRAP3

安装：下载，解压，留min.js，min.css等，然后拉到pycharm

建议使用3版本，不要轻易使用最新版本
响应式布局:根据显示器大小动态合理调整页面布局
CDN:内容分发网络
    为了加快对静态资源(不会经常改变的如图片、css文件、js文件)数据的访问速度
bootstrap涉及到动态效果需要使用jQuery，bootstrap是基于jQuery,也就意味着你在用bootstrap要先导入jQuery文件！！！

第一次使用bootstrap最好先下载源文件本地导入使用
    目的是为了让pycharm能够识别该框架提供的功能并自动提示
    如果直接使用CDN那么pycharm无法自动提示

# 使用bootstrap调节页面样式其实就是在修改标签的class值

选择器

选择器(为了查找我们需要查找的标签并操作)
    id选择器
        #d1 {}
    class选择器
        .c1 {}
    标签选择器
        div {}

基本使用

1.轮播图

 可在image处修改图片地址src，展示不同的图片

2.布局容器

相当于整个网页的风格
          container   左右有留白
        container-fluid   左右无留白

 

 

 

 3.栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。    row来划分一行(一个row是固定的12份)        在row里面通过col-md-n来划定需要几份    # 在划定的时候一定保证最多12

栅格参数

 

 

 

 

 

 

列偏移

嵌套列

 

 

排版

 

 

多种引用样式(引用名人名言)

4.表格标签

 

 五、表单（还可加默认值value="jason"）

 

 

 六、图标相关（在组件里）

"..." alt="..." class="img-rounded">
"..." alt="..." class="img-circle">
"..." alt="..." class="img-thumbnail">

 可修改src,换成不同的图片

 

更多图标库见：http://www.fontawesome.com.cn/examples/     ——图标库     点首页，下载旧版，下载，解压，拖到pycharm,然后pycharm引用

 七、其他样式补充

导航条  直接cv

默认分页

巨幕

 进度条

javascript 插件——动态实例