认知Bootstrap(响应式布局,组件,插件)

  • Bootstrap是一个前端开发的框架,来自 Twitter;它为页面内容和栅格系统包裹一个 .container 容器
    • 参考文档网址:https://v3.bootcss.com/css/#overview
  • 基本配置
    • 下载资源文件(官网下载),导入
    • 简单模板(head中添加)
      
          Bootstrap演示
          
          
          
          
          Bootstrap HelloWorld
          
          
          
          
          
          
          
      
      • link分为本地引用与网络引用
  • 响应式布局
    • Bootstrap为页面内容和栅格系统包裹一个 .container 容器
    • 容器分类
      • container:两边留白
      • container-fluid:每一种设备都是100%宽度
      • 定义行。相当于之前的tr   样式:row
        • 定义元素。指定该元素在不同的设备上,所占的格子数目。样式:col-设备代号-格子数目
          • 设备代号:
            • xs 超小屏幕 手机 (<768px):col-xs-12
            • sm 小屏幕 平板 (≥768px)
            • md 中等屏幕 桌面显示器 (≥992px)
            • lg 大屏幕 大桌面显示器 (≥1200px)
    • 一行中如果格子数目超过12,则超出部分自动换行。
    • 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。(大屏幕兼容小屏幕的设置)
    • 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素沾满一整行。
    • code(在基本配置基础上,栅格系统的基本使用)
    • 
              
          
      栅格
      栅格
      栅格
      栅格
      栅格
      栅格
      栅格
      栅格
      栅格
      栅格
      栅格
      栅格

       

  • CSS样式和JS插件(更多查看文档)
    • 全局CSS样式
      • 按钮
      • 图片(方形,圆形,相框)
        
            没找到:方形
            没找到 : 圆形
            没找到 :相框

         

      • 表格
        • class="table" 少量的内补(padding)和水平方向的分隔线。
        • class="table table-bordered" 表格中的每个单元格增加边框。
        • class="table table-hover" 让  中的每一行对鼠标悬停状态作出响应。
      • 表单
        • 给表单项添加:class="form-control"
          • 表单中的