今日内容

1. Bootstrap入门

Bootstrap-前端全局样式和效果的框架
    使用此框架之前需要提前导入使用Bootstrap的环境
    1)导入Bootstrap全局CSS样式
        <link href="css/bootstrap.min.css" rel="stylesheet">
    2)导入JQuery核心标签库
        <script src="js/jquery-3.4.1.min.js"></script>
    3)导入Bootstrap的js文件
        <script src="js/bootstrap.min.js"></script>

2. Bootstrap布局和栅格系统

布局和栅格
    boostrap布局都需要使用布局容器和栅格
        boostrap页面布局
            1)有一个容器 container(固定宽度)/container-fluid(100%宽)
            2)在容器里面定义行  class="row"
                栅格系统---一行有12列(格子数量)
                列的定义   
                    class="col-设备编号-所占的格子数量"
                      超小屏幕 手机 (<768px)---设备编号  class="col-xs-"
                      小屏幕 平板 (≥768px) ----设备编号  class="col-sm-"
                      中等屏幕 桌面显示器 (≥992px)---设备编号  class="col-md-"
                      大屏幕 大桌面显示器 (≥1200px) ---设备编号  class="col-lg-"
理解
    就是在一个固定宽度的容器中,将每一行分为12列,根据需要不同,来分配每个内容占用几列

3. Bootstrap表格样式

表格样式
    boostrap表格样式基本样式效果
        -class="table"
            class="table-striped" 
                -斑马条纹状样式
            class="table-bordered" 
                -为表格和单元个增加边框样式
            class="table-hover" 
                -每一行对鼠标悬停状态作出响应
            clss="table-condensed" 
                -类可以让表格更加紧凑，单元格中的内补（padding）均会减半
​
    将任何.table元素包裹在.table-responsive元素内，即可创建响应式表格
        -其会在小屏幕设备上（小于768px）水平滚动
        -当屏幕大于 768px 宽度时，水平滚动条消失
理解
    在table-responsive下创建的表格可以随着页面的变化而变化!
        -扩大就恢复正常
        -缩小就改变布局为适应屏幕

4. Bootstrap表单和按钮

表单--在官网查看API
    class="form-horizontal" 
        -水平排列表单
    class="form-group" 
        -将label元素(表单组件中指定名称)和表单组件(input/sleect/textarea文本域) 
            -放在一个表单组中
按钮
    class="btn btn-default"
        默认按钮样式--没有颜色
    预定义的按钮样式效果
        class="btn btn-primary"  
            -深蓝色
        class="btn btn-success" 
            -成功标识的颜色
        class="btn btn-warning" 
            -警告的颜色标识
        class="btn btn-danger" 
            -危险标识

5. Bootstrap图片

图片
    class="img-rounded" 
        -四个角带有圆角弧度的图片
    class="img-circle" 
        -圆形图片
    class="img-thumbnail" 
        -相框图片
    class="img-responsive"
        -让图片响应式布局 ,宽度100%宽,高度auto
理解
    类似于表格的自适应table-responsive

6. Bootstrap分页组件

分页组件
    nav aria-label="Page navigation" 分页组件
举例

<nav aria-label="Page navigation">
  <ul class="pagination">
​
    <!--上一页-->
    <!--禁用状态-->
    <li class="disabled">
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <!--默认在第一页,激活状态-->
    <li class="active">
      <a href="#">1</a>
    </li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li class="active"><a href="#">5</a></li>
    <li class="disabled">
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

​