前端知识之 bootstrap 前端知识之 bootstrap

其他 2019-12-13 10:01:11 阅读次数: 0

前端知识之 bootstrap

01. bootstrap的介绍和下载

01.1 介绍

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。目前，Bootstrap最新版本为4.4。 注意，Bootstrap有三个大版本分别是 v2、v3和v4，我们这里学习最常用的v3。

 

使用Bootstrap的好处：

Bootstrap简单灵活，可用于架构流行的用户界面，具有 友好的学习曲线，卓越的兼容性，响应式设计，12列栅格系统，样式向导文档，自定义JQuery插件，完整的类库，基于Less等特性。

 

01.2 下载

bootstap英文官方: https://getbootstrap.com/

bootstrap中文官网：http://www.bootcss.com/

下载地址: http://v3.bootcss.com/getting-started/#download

注意： Bootstrap提供了三种不同的方式供我们下载，我们不需要使用Bootstrap的源码 和 sass项目，只需要下载生产环境的Bootstrap即可。

 

下载完成以后的目录如下：

bootstrap/dist/
   ├── css/
   │   ├── bootstrap.css               # Bootstrap 核心css文件[未压缩，建议在开发阶段使用]
   │   ├── bootstrap.min.css           # Bootstrap 核心css文件[压缩版，建议在生产阶段使用]
   │   ├── bootstrap-theme.css         # Bootstrap 附带的主题样式，用不上可以删掉
   │   └── bootstrap-theme.min.css     # Bootstrap 附带的主题样式，用不上可以删掉
   ├── js/
   │   ├── bootstrap.js                # Bootstrap 核心js文件[未压缩，建议在开发阶段使用]
   │   └── bootstrap.min.js            # Bootstrap 核心js文件[压缩版，建议在生产阶段使用]
   └── fonts/                          # fonts目录中主要存放的是图标字体，附带主题使用的

扩展

我们也可以使用Bootstrap中文网提供的免费CDN加速服务：

<!-- Bootstrap核心css文件 -->
<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery。务必在引入Bootstrap之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap核心js 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

01.3 bootstrap的引入和使用

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Bootstrap Template</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <script src="js/jquery/1.11.3/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <h1>你好，bootstrap！</h1>
    </body>
</html>

01.3.1 viewport

viewport，中文翻译可以叫做"视口"或"视区"，大家都知道移动设备的屏幕一般都比PC小很多，webkit浏览器会将一个较大的“虚拟”窗口映射到移动设备的屏幕上，默认的虚拟窗口为980像素宽（目前大部分网站的标准宽度），然后按一定的比例（3：1或2：1）进行缩放。也就是说当我们加载一个普通网页的时候，webkit会先以980像素的浏览器标准加载网页，然后再缩小为490像素的宽度。注意这个缩小是一个全局缩小，也就是页面上的所有元素都会缩小。他有以下几个属性

width                  控制 viewport 的大小，一般为了自适应设置为device-width
height                 一般为了自适应设置为device-height
target-densitydpi      设备的默认缩放比例。可以设置如下：
           low-dpi     使用ldpi作为目标 dpi。中等像素密度和高像素密度设备相应放大
           medium-dpi  使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设备相应缩小。 这是默认的target density.
           device-dpi  使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
           high-dpi    使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小
initial-scale          初始缩放，如果设置初始缩放为"1.0"，那么web页面在展现的时候就会以target density分辨率的1:1来展现
maximum-scale          最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。
user-scalable          是否允许调整缩放。即用户是否能对页面进行缩放。如果设置为yes则允许用户对页面进行缩放，反之为no。
常见viewport设置：

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

02. 栅格系统的原理和使用

02.1响应式设计

响应式设计是Ethan Marcotte在2010年5月份提出的一个概念，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动设备浏览网页而诞生的。

优点：

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

缺点：

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间加长

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

02.2 栅格系统[Grid System ]的介绍

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列。栅格系统提供的class样式类会自动在屏幕宽度大于或等于阈值的设备上起作用，并且将针对小屏幕设备所设置的class覆盖掉。

02.3 栅格系统[Grid System ]的使用

.container             类用于固定宽度并支持响应式布局的容器。
.container-fluid       类用于 100% 宽度，会自动占据全部视口（viewport）的容器。

03. bootstrap的全局样式

03.1 排版样式

标题

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。

页面主体

Bootstrap 将全局 font-size 设置为14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p>（段落）元素还被设置了等于 1/2 行高（即10px）的底部外边距（margin）

文本对齐
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
列表
a. 内联列表。通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。
     <ul class="list-inline"></ul>
b. 水平排列的描述，
     <dl class="dl-horizontal"></dl >

情境背景色

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

03.2 表格样式

03.2.1 table

普通表格

<table class="table"></table>
条纹状表格

<table class="table table-striped"></table>
带边框的表格

<table class="table table-bordered"></table>
鼠标悬停

<table class="table table-hover"></table>
响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失

<div class="table-responsive">
  <table class="table"></table>
</div>

03.2.2 tr

<tr class="active">...</tr>              #鼠标悬停在行或单元格上时所设置的颜色
<tr class="success">...</tr>             #标识成功或积极的动作
<tr class="warning">...</tr>             #标识警告或需要用户注意
<tr class="danger">...</tr>              #标识危险或潜在的带来负面影响的动作
<tr class="info">...</tr>                #标识普通的提示信息或动作

03.3 表单样式

所有设置了.form-control 类的<input>、<textarea> 和<select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在.form-group 中可以获得最好的排列。

<input type="text" class="form-control" placeholder="Text input">
<textarea class="form-control" rows="3"></textarea>
<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

03.4 按钮样式

<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-danger">（危险）Danger</button>
<button type="button" class="btn btn-link">（链接）Link</button>

. 使用 .btn-lg、.btn-sm 或.btn-xs 就可以获得不同尺寸的按钮

<button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
<button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
​
<button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
<button type="button" class="btn btn-default">（默认尺寸）Default button</button>
​
<button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
<button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
​
<button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
<button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>

04. 组件

字体图标

Glyphicons 字体图标，包括250多个来自 Glyphicon Halflings 的字体图标。使用时只需要找到对应图标下的class样式即可。

<span class="glyphicon glyphicon-apple" aria-hidden="true"></span>

下拉菜单

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
    <li><a href="#">Regular link</a></li>
    <li class="disabled"><a href="#">Disabled link</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Another link</a></li>
  </ul>
</div>

按钮组

通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

导航

Bootstrap 中的导航组件都依赖同一个 .nav类，状态类也是共用的。改变修饰类就可以改变样式

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">QiYuan</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
         <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home<span class="sr-only">(current)</span></a></li>
              <li><a href="#">Abouts</a></li>
              <li class="dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Catetorys <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Catetory 1</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Catetory 2</a></li>
                    </ul>
               </li>
         </ul>
      </div><!-- /.navbar-collapse -->
   </div><!-- /.container-fluid -->
</nav>

分页

<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<span class="sr-only">(current)</span></a></li>
  <li><a href="#">2 </a></li>
  <li><a href="#">3 </a></li>
  <li><a href="#" aria-label="Previous"><span aria-hidden="true">&raquo;</span></a></li>
</ul>

可关闭的警告框

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

进度条

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">60%</div>

有动画效果的进度条

<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    45%
  </div>
</div>

模态框

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
      </div>
      <div class="modal-body">
        hello, welcome to QiYuan!
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
​
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
​
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
      </div>
      <div class="modal-body">
        hello, welcome to QiYuan!
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

选项卡

<div>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">Home Content</div>
    <div role="tabpanel" class="tab-pane" id="profile">Profile Content</div>
    <div role="tabpanel" class="tab-pane" id="messages">Messages Content</div>
    <div role="tabpanel" class="tab-pane" id="settings">Settings Content</div>
  </div>
</div>

提示框

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on 左侧
</button>
​
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on 顶部
</button>
​
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on 底部
</button>
​
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on 右侧
</button>
<script type="text/javascript">
  $(function () {         // 提示框必须要手动初始化
       $('[data-toggle="popover"]').popover()
  })
</script>

警告框

<div class="alert alert-warning alert-dismissible fade in" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
    <strong>Holy guacamole!</strong> Hello, Welcome QiYuan.
  </div>
  <div class="alert alert-danger alert-dismissible fade in" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
    <h4>Oh snap! You got an error!</h4>
    <p class="h1">404! error!</p>
    <p>
      <button type="button" class="btn btn-danger">Take this action</button>
      <button type="button" class="btn btn-default">Or do this</button>
    </p>
  </div>

手风琴效果

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Collapsible Group Item #1 Content
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Collapsible Group Item #2 Content
      </div>
    </div>
  </div>
</div>

轮播图

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="holder.js/1386x400" width="100%" alt="...">
      <div class="carousel-caption">
        Img #1 Content
      </div>
    </div>
    <div class="item">
      <img src="holder.js/1386x400" width="100%" alt="...">
      <div class="carousel-caption">
        Img #2 Content
      </div>
    </div>
    <div class="item">
      <img src="holder.js/1386x400" width="100%" alt="...">
      <div class="carousel-caption">
        Img #3 Content
      </div>
    </div>
  </div>
</div>

前端知识之 bootstrap

01. bootstrap的介绍和下载

01.1 介绍

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。目前，Bootstrap最新版本为4.4。 注意，Bootstrap有三个大版本分别是 v2、v3和v4，我们这里学习最常用的v3。

 

使用Bootstrap的好处：

Bootstrap简单灵活，可用于架构流行的用户界面，具有 友好的学习曲线，卓越的兼容性，响应式设计，12列栅格系统，样式向导文档，自定义JQuery插件，完整的类库，基于Less等特性。

 

01.2 下载

bootstap英文官方: https://getbootstrap.com/

bootstrap中文官网：http://www.bootcss.com/

下载地址: http://v3.bootcss.com/getting-started/#download

注意： Bootstrap提供了三种不同的方式供我们下载，我们不需要使用Bootstrap的源码 和 sass项目，只需要下载生产环境的Bootstrap即可。

 

下载完成以后的目录如下：

bootstrap/dist/
   ├── css/
   │   ├── bootstrap.css               # Bootstrap 核心css文件[未压缩，建议在开发阶段使用]
   │   ├── bootstrap.min.css           # Bootstrap 核心css文件[压缩版，建议在生产阶段使用]
   │   ├── bootstrap-theme.css         # Bootstrap 附带的主题样式，用不上可以删掉
   │   └── bootstrap-theme.min.css     # Bootstrap 附带的主题样式，用不上可以删掉
   ├── js/
   │   ├── bootstrap.js                # Bootstrap 核心js文件[未压缩，建议在开发阶段使用]
   │   └── bootstrap.min.js            # Bootstrap 核心js文件[压缩版，建议在生产阶段使用]
   └── fonts/                          # fonts目录中主要存放的是图标字体，附带主题使用的

扩展

我们也可以使用Bootstrap中文网提供的免费CDN加速服务：

<!-- Bootstrap核心css文件 -->
<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery。务必在引入Bootstrap之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap核心js 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

01.3 bootstrap的引入和使用

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Bootstrap Template</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <script src="js/jquery/1.11.3/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <h1>你好，bootstrap！</h1>
    </body>
</html>

01.3.1 viewport

viewport，中文翻译可以叫做"视口"或"视区"，大家都知道移动设备的屏幕一般都比PC小很多，webkit浏览器会将一个较大的“虚拟”窗口映射到移动设备的屏幕上，默认的虚拟窗口为980像素宽（目前大部分网站的标准宽度），然后按一定的比例（3：1或2：1）进行缩放。也就是说当我们加载一个普通网页的时候，webkit会先以980像素的浏览器标准加载网页，然后再缩小为490像素的宽度。注意这个缩小是一个全局缩小，也就是页面上的所有元素都会缩小。他有以下几个属性

width                  控制 viewport 的大小，一般为了自适应设置为device-width
height                 一般为了自适应设置为device-height
target-densitydpi      设备的默认缩放比例。可以设置如下：
           low-dpi     使用ldpi作为目标 dpi。中等像素密度和高像素密度设备相应放大
           medium-dpi  使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设备相应缩小。 这是默认的target density.
           device-dpi  使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
           high-dpi    使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小
initial-scale          初始缩放，如果设置初始缩放为"1.0"，那么web页面在展现的时候就会以target density分辨率的1:1来展现
maximum-scale          最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。
user-scalable          是否允许调整缩放。即用户是否能对页面进行缩放。如果设置为yes则允许用户对页面进行缩放，反之为no。
常见viewport设置：

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

02. 栅格系统的原理和使用

02.1响应式设计

响应式设计是Ethan Marcotte在2010年5月份提出的一个概念，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动设备浏览网页而诞生的。

优点：

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

缺点：

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间加长

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

02.2 栅格系统[Grid System ]的介绍

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列。栅格系统提供的class样式类会自动在屏幕宽度大于或等于阈值的设备上起作用，并且将针对小屏幕设备所设置的class覆盖掉。

02.3 栅格系统[Grid System ]的使用

.container             类用于固定宽度并支持响应式布局的容器。
.container-fluid       类用于 100% 宽度，会自动占据全部视口（viewport）的容器。

03. bootstrap的全局样式

03.1 排版样式

标题

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。

页面主体

Bootstrap 将全局 font-size 设置为14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p>（段落）元素还被设置了等于 1/2 行高（即10px）的底部外边距（margin）

文本对齐
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
列表
a. 内联列表。通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。
     <ul class="list-inline"></ul>
b. 水平排列的描述，
     <dl class="dl-horizontal"></dl >

情境背景色

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

03.2 表格样式

03.2.1 table

普通表格

<table class="table"></table>
条纹状表格

<table class="table table-striped"></table>
带边框的表格

<table class="table table-bordered"></table>
鼠标悬停

<table class="table table-hover"></table>
响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失

<div class="table-responsive">
  <table class="table"></table>
</div>

03.2.2 tr

<tr class="active">...</tr>              #鼠标悬停在行或单元格上时所设置的颜色
<tr class="success">...</tr>             #标识成功或积极的动作
<tr class="warning">...</tr>             #标识警告或需要用户注意
<tr class="danger">...</tr>              #标识危险或潜在的带来负面影响的动作
<tr class="info">...</tr>                #标识普通的提示信息或动作

03.3 表单样式

所有设置了.form-control 类的<input>、<textarea> 和<select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在.form-group 中可以获得最好的排列。

<input type="text" class="form-control" placeholder="Text input">
<textarea class="form-control" rows="3"></textarea>
<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

03.4 按钮样式

<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-danger">（危险）Danger</button>
<button type="button" class="btn btn-link">（链接）Link</button>

. 使用 .btn-lg、.btn-sm 或.btn-xs 就可以获得不同尺寸的按钮

<button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
<button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
​
<button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
<button type="button" class="btn btn-default">（默认尺寸）Default button</button>
​
<button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
<button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
​
<button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
<button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>

04. 组件

字体图标

Glyphicons 字体图标，包括250多个来自 Glyphicon Halflings 的字体图标。使用时只需要找到对应图标下的class样式即可。

<span class="glyphicon glyphicon-apple" aria-hidden="true"></span>

下拉菜单

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
    <li><a href="#">Regular link</a></li>
    <li class="disabled"><a href="#">Disabled link</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Another link</a></li>
  </ul>
</div>

按钮组

通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

导航

Bootstrap 中的导航组件都依赖同一个 .nav类，状态类也是共用的。改变修饰类就可以改变样式

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">QiYuan</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
         <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home<span class="sr-only">(current)</span></a></li>
              <li><a href="#">Abouts</a></li>
              <li class="dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Catetorys <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Catetory 1</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Catetory 2</a></li>
                    </ul>
               </li>
         </ul>
      </div><!-- /.navbar-collapse -->
   </div><!-- /.container-fluid -->
</nav>

分页

<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<span class="sr-only">(current)</span></a></li>
  <li><a href="#">2 </a></li>
  <li><a href="#">3 </a></li>
  <li><a href="#" aria-label="Previous"><span aria-hidden="true">&raquo;</span></a></li>
</ul>

可关闭的警告框

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

进度条

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">60%</div>

有动画效果的进度条

<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    45%
  </div>
</div>

模态框

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
      </div>
      <div class="modal-body">
        hello, welcome to QiYuan!
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
​
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
​
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
      </div>
      <div class="modal-body">
        hello, welcome to QiYuan!
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

选项卡

<div>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">Home Content</div>
    <div role="tabpanel" class="tab-pane" id="profile">Profile Content</div>
    <div role="tabpanel" class="tab-pane" id="messages">Messages Content</div>
    <div role="tabpanel" class="tab-pane" id="settings">Settings Content</div>
  </div>
</div>

提示框

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on 左侧
</button>
​
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on 顶部
</button>
​
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on 底部
</button>
​
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on 右侧
</button>
<script type="text/javascript">
  $(function () {         // 提示框必须要手动初始化
       $('[data-toggle="popover"]').popover()
  })
</script>

警告框

<div class="alert alert-warning alert-dismissible fade in" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
    <strong>Holy guacamole!</strong> Hello, Welcome QiYuan.
  </div>
  <div class="alert alert-danger alert-dismissible fade in" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
    <h4>Oh snap! You got an error!</h4>
    <p class="h1">404! error!</p>
    <p>
      <button type="button" class="btn btn-danger">Take this action</button>
      <button type="button" class="btn btn-default">Or do this</button>
    </p>
  </div>

手风琴效果

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Collapsible Group Item #1 Content
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Collapsible Group Item #2 Content
      </div>
    </div>
  </div>
</div>

轮播图

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="holder.js/1386x400" width="100%" alt="...">
      <div class="carousel-caption">
        Img #1 Content
      </div>
    </div>
    <div class="item">
      <img src="holder.js/1386x400" width="100%" alt="...">
      <div class="carousel-caption">
        Img #2 Content
      </div>
    </div>
    <div class="item">
      <img src="holder.js/1386x400" width="100%" alt="...">
      <div class="carousel-caption">
        Img #3 Content
      </div>
    </div>
  </div>
</div>

01. bootstrap的介绍和下载

01.1 介绍

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。目前，Bootstrap最新版本为4.4。 注意，Bootstrap有三个大版本分别是 v2、v3和v4，我们这里学习最常用的v3。

 

使用Bootstrap的好处：

Bootstrap简单灵活，可用于架构流行的用户界面，具有 友好的学习曲线，卓越的兼容性，响应式设计，12列栅格系统，样式向导文档，自定义JQuery插件，完整的类库，基于Less等特性。

 

01.2 下载

bootstap英文官方: https://getbootstrap.com/

bootstrap中文官网：http://www.bootcss.com/

下载地址: http://v3.bootcss.com/getting-started/#download

注意： Bootstrap提供了三种不同的方式供我们下载，我们不需要使用Bootstrap的源码 和 sass项目，只需要下载生产环境的Bootstrap即可。

 

下载完成以后的目录如下：

bootstrap/dist/
   ├── css/
   │   ├── bootstrap.css               # Bootstrap 核心css文件[未压缩，建议在开发阶段使用]
   │   ├── bootstrap.min.css           # Bootstrap 核心css文件[压缩版，建议在生产阶段使用]
   │   ├── bootstrap-theme.css         # Bootstrap 附带的主题样式，用不上可以删掉
   │   └── bootstrap-theme.min.css     # Bootstrap 附带的主题样式，用不上可以删掉
   ├── js/
   │   ├── bootstrap.js                # Bootstrap 核心js文件[未压缩，建议在开发阶段使用]
   │   └── bootstrap.min.js            # Bootstrap 核心js文件[压缩版，建议在生产阶段使用]
   └── fonts/                          # fonts目录中主要存放的是图标字体，附带主题使用的

扩展

我们也可以使用Bootstrap中文网提供的免费CDN加速服务：

<!-- Bootstrap核心css文件 -->
<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery。务必在引入Bootstrap之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap核心js 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

01.3 bootstrap的引入和使用

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Bootstrap Template</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <script src="js/jquery/1.11.3/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <h1>你好，bootstrap！</h1>
    </body>
</html>

01.3.1 viewport

viewport，中文翻译可以叫做"视口"或"视区"，大家都知道移动设备的屏幕一般都比PC小很多，webkit浏览器会将一个较大的“虚拟”窗口映射到移动设备的屏幕上，默认的虚拟窗口为980像素宽（目前大部分网站的标准宽度），然后按一定的比例（3：1或2：1）进行缩放。也就是说当我们加载一个普通网页的时候，webkit会先以980像素的浏览器标准加载网页，然后再缩小为490像素的宽度。注意这个缩小是一个全局缩小，也就是页面上的所有元素都会缩小。他有以下几个属性

width                  控制 viewport 的大小，一般为了自适应设置为device-width
height                 一般为了自适应设置为device-height
target-densitydpi      设备的默认缩放比例。可以设置如下：
           low-dpi     使用ldpi作为目标 dpi。中等像素密度和高像素密度设备相应放大
           medium-dpi  使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设备相应缩小。 这是默认的target density.
           device-dpi  使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
           high-dpi    使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小
initial-scale          初始缩放，如果设置初始缩放为"1.0"，那么web页面在展现的时候就会以target density分辨率的1:1来展现
maximum-scale          最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。
user-scalable          是否允许调整缩放。即用户是否能对页面进行缩放。如果设置为yes则允许用户对页面进行缩放，反之为no。
常见viewport设置：

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

02. 栅格系统的原理和使用

02.1响应式设计

响应式设计是Ethan Marcotte在2010年5月份提出的一个概念，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动设备浏览网页而诞生的。

优点：

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

缺点：

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间加长

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

02.2 栅格系统[Grid System ]的介绍

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列。栅格系统提供的class样式类会自动在屏幕宽度大于或等于阈值的设备上起作用，并且将针对小屏幕设备所设置的class覆盖掉。

02.3 栅格系统[Grid System ]的使用

.container             类用于固定宽度并支持响应式布局的容器。
.container-fluid       类用于 100% 宽度，会自动占据全部视口（viewport）的容器。

03. bootstrap的全局样式

03.1 排版样式

标题

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。

页面主体

Bootstrap 将全局 font-size 设置为14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p>（段落）元素还被设置了等于 1/2 行高（即10px）的底部外边距（margin）

文本对齐
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
列表
a. 内联列表。通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。
     <ul class="list-inline"></ul>
b. 水平排列的描述，
     <dl class="dl-horizontal"></dl >

情境背景色

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

03.2 表格样式

03.2.1 table

普通表格

<table class="table"></table>
条纹状表格

<table class="table table-striped"></table>
带边框的表格

<table class="table table-bordered"></table>
鼠标悬停

<table class="table table-hover"></table>
响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失

<div class="table-responsive">
  <table class="table"></table>
</div>

03.2.2 tr

<tr class="active">...</tr>              #鼠标悬停在行或单元格上时所设置的颜色
<tr class="success">...</tr>             #标识成功或积极的动作
<tr class="warning">...</tr>             #标识警告或需要用户注意
<tr class="danger">...</tr>              #标识危险或潜在的带来负面影响的动作
<tr class="info">...</tr>                #标识普通的提示信息或动作

03.3 表单样式

所有设置了.form-control 类的<input>、<textarea> 和<select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在.form-group 中可以获得最好的排列。

<input type="text" class="form-control" placeholder="Text input">
<textarea class="form-control" rows="3"></textarea>
<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

03.4 按钮样式

<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-danger">（危险）Danger</button>
<button type="button" class="btn btn-link">（链接）Link</button>

. 使用 .btn-lg、.btn-sm 或.btn-xs 就可以获得不同尺寸的按钮

<button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
<button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
​
<button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
<button type="button" class="btn btn-default">（默认尺寸）Default button</button>
​
<button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
<button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
​
<button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
<button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>

04. 组件

字体图标

Glyphicons 字体图标，包括250多个来自 Glyphicon Halflings 的字体图标。使用时只需要找到对应图标下的class样式即可。

<span class="glyphicon glyphicon-apple" aria-hidden="true"></span>

下拉菜单

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
    <li><a href="#">Regular link</a></li>
    <li class="disabled"><a href="#">Disabled link</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Another link</a></li>
  </ul>
</div>

按钮组

通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

导航

Bootstrap 中的导航组件都依赖同一个 .nav类，状态类也是共用的。改变修饰类就可以改变样式

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">QiYuan</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
         <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home<span class="sr-only">(current)</span></a></li>
              <li><a href="#">Abouts</a></li>
              <li class="dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Catetorys <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Catetory 1</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Catetory 2</a></li>
                    </ul>
               </li>
         </ul>
      </div><!-- /.navbar-collapse -->
   </div><!-- /.container-fluid -->
</nav>

分页

<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<span class="sr-only">(current)</span></a></li>
  <li><a href="#">2 </a></li>
  <li><a href="#">3 </a></li>
  <li><a href="#" aria-label="Previous"><span aria-hidden="true">&raquo;</span></a></li>
</ul>

可关闭的警告框

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

进度条

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">60%</div>

有动画效果的进度条

<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    45%
  </div>
</div>

模态框

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
      </div>
      <div class="modal-body">
        hello, welcome to QiYuan!
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
​
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
​
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
      </div>
      <div class="modal-body">
        hello, welcome to QiYuan!
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

选项卡

<div>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">Home Content</div>
    <div role="tabpanel" class="tab-pane" id="profile">Profile Content</div>
    <div role="tabpanel" class="tab-pane" id="messages">Messages Content</div>
    <div role="tabpanel" class="tab-pane" id="settings">Settings Content</div>
  </div>
</div>

提示框

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on 左侧
</button>
​
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on 顶部
</button>
​
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on 底部
</button>
​
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on 右侧
</button>
<script type="text/javascript">
  $(function () {         // 提示框必须要手动初始化
       $('[data-toggle="popover"]').popover()
  })
</script>

警告框

<div class="alert alert-warning alert-dismissible fade in" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
    <strong>Holy guacamole!</strong> Hello, Welcome QiYuan.
  </div>
  <div class="alert alert-danger alert-dismissible fade in" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
    <h4>Oh snap! You got an error!</h4>
    <p class="h1">404! error!</p>
    <p>
      <button type="button" class="btn btn-danger">Take this action</button>
      <button type="button" class="btn btn-default">Or do this</button>
    </p>
  </div>

手风琴效果

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Collapsible Group Item #1 Content
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Collapsible Group Item #2 Content
      </div>
    </div>
  </div>
</div>

轮播图

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="holder.js/1386x400" width="100%" alt="...">
      <div class="carousel-caption">
        Img #1 Content
      </div>
    </div>
    <div class="item">
      <img src="holder.js/1386x400" width="100%" alt="...">
      <div class="carousel-caption">
        Img #2 Content
      </div>
    </div>
    <div class="item">
      <img src="holder.js/1386x400" width="100%" alt="...">
      <div class="carousel-caption">
        Img #3 Content
      </div>
    </div>
  </div>
</div>

猜你喜欢

转载自www.cnblogs.com/oneone123/p/12033444.html
今日推荐
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
周排行
rbac——界面、权限
Apache CXF + SpringMVC 整合发布WebService
so插件化
Vue.js实战系列---图标字体制作（svg格式）
PAT乙级 1007 素数对猜想(孪生素数对) (20分) ---（C语言 + 详细注释）
被IRM保护的文档，打开失败
Calendar和Date计算日期差的小问题
win10子系统ubuntu18.4安装docker
利用Wrap Shell Script定位Android Native内存泄漏
MySQL: Transaction (Part I - Basic Concept)
每日归档
更多
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022