BS

Bootstrap框架基础及全局CSS样式

1.使用BS方法

  1）本地引入（必须先下载）
        a.引入bootstrap.css或bootstrap.min.css
         <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
        b.引入JS（如果不使用插件，不需要引入JS）bootstrap.js或bootstrap.min.js。
            注意：bootstrap.js依赖于jquery.js，在引入它之前必须先引入jquery.js。
                <script src="js/jquery.js" type="text/javascript"></script>
                <script src="js/bootstrap.js" type="text/javascript"></script>
        2）CDN引入（不需要下载）（推荐使用这种方法引入）(https://bootcss.cn)
            a.引入CSS
                <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
            b.引入JS
                <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
                <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>

2.Bootstrap框架解析

1、移动设备优先

  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
       

3.栅格布局

布局方式

  <div class="container">  或container-fluid
  	<div class="row">
  		<div class="col-md-*">     .col-xs-*/.col-sm-*/.col-md-*/.col-lg-*
 		 ...
 		 </div>
  	</div>
  </div>

注意：多余的列会自动另起一行。

4.响应式（多端布局）

​ a.图片响应式
​ .img-responsive
​ b.隐藏响应式
​ .hidden-xs
​ .hidden-sm
​ .hidden-md
​ .hidden-lg
​ c.字体响应式
​ 用媒体查询实现。

5.类名（样式）

           .text-justify：两端对齐（分散对齐）
           .text-nowrap：不换行
           .text-lowercase：小写
           .text-uppercase：大写
           .text-capitalize：首字母大写

6.表格

        .table:基本表格
        .table-striped:条纹状表格
        .table-bordered:带边框的表格
        .table-hover:带鼠标悬停的表格
        .table-condensed:紧缩表格
        .table-responsive:响应式表格

        表格状态（颜色配置）：
            .active
            .success
            .info
            .warning
            .danger

6.表单

     .form-group:组件编组
        .form-control:响应式组件
        .form-inline:内联表单
        .form-horizontal:水平排列的表单

        表单中支持的输入类组件：
            text、password、datetime、datetime-local、date、month、time、
            week、number、email、url、search、tel、color
        其它组件：
            textarea
            radio
            checkbox
            select

7.图片

 .img-responsive:响应式图片
        .img-rounded:圆角
        .img-circle:圆
        .img-thumbnail:缩略图

Bootstrap组件

1、字体图标

使用注意事项:

​ 1）在图标和文本之间添加一个空格；

​ 2）图标增置aria-hidden=“true” 属性；
​ aria-hidden=“true”：用于屏幕阅读器，帮助残障人士更好地访问该网站。
​ 3）增加.sr-only类名。
​ .sr-only：（仅供）屏幕阅读器用，主要用于增强可读性，具有隐藏效果

aria-label：该属性用来给当前元素加上标签描述，一般用在任何典型的HTML元素中。

2.导航

1.导航条（重要）

​ 由两部分组成：1）菜单小按钮（适小屏）+logo 2）导航栏内容

    .navbar-fixed-top:导航栏固定在顶部
    .navbar-fixed-bottom:导航栏固定在底部
    .navbar-static-top:静止在顶部

    .navbar-inverse:反色的导航条

2.分页（重点）

​ 用于数据量大的内容呈现。

3.标签

​ 主要起标识作用。
​ .label

4.徽章

​ 未读消息条数提示。
​ .badge

5.警告框

​ 具有警示作用（或提示作用）。
​ .alert

    data-dismiss="alert"  添加关闭按钮，且具有关闭作用。