官网:https://v3.bootcss.com/

CDN库http://www.bootcdn.cn/bootstrap/

 

媒体查询

 @media screen and (min-width: 500px) {
            div{
                width: 100px;
                height: 100px;
                background: yellow;
            }
        }
        @media screen and (min-width: 800px) {
            div{
                width: 200px;
                height: 200px;
                background: blue;
            }
        }

 

布局容器

.container 类用于固定宽度并支持响应式布局的容器

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器

<div class="container-fluid">
  ...
</div>

 

栅格系统(系统会自动分为最多12列)

	                  超小屏幕        小屏幕          中等屏幕 桌面显示器    大屏幕 大桌面显示器 
	                手机 (<768px)   平板 (≥768px)	    (≥992px)	           (≥1200px)
栅格系统行为	       总是水平排列	  开始是堆叠在一起的,当大于这些阈值时将变为水平排列C		
.container 最大宽度	 None (自动)	   750px	            970px	              1170px
类前缀	               .col-xs-	          .col-sm-	       .col-md-	             .col-lg-
列(column)数	          12			  12                 12                     12
最大列(column)宽	   自动	          ~62px	             ~81px	               ~97px
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

 

排版

HTML 中的所有标题标签,<h1><h6> 均可使用。另外,还提供了 .h1.h6 类,为的是给内联(inline)属性的文本赋予标题的样式

<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>
<span class="h1">我是p标签的h1标签</span><br/><br/>
<span class="h2">我是p标签的h2标签</span><br/><br/>
<span class="h3">我是p标签的h3标签</span><br/><br/>
<span class="h4">我是p标签的h4标签</span><br/><br/>
<span class="h5">我是p标签的h5标签</span><br/><br/>
<span class="h6">我是p标签的h6标签</span><br/><br/>

 

表格

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线

条纹状表格

通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式

<table class="table table-striped">
  ...
</table>

带边框的表格

添加 .table-bordered 类为表格和其中的每个单元格增加边框

<table class="table table-bordered">
  ...
</table>

鼠标悬停

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应

<table class="table table-hover">
  ...
</table>

紧缩表格

通过添加 .table-condensed 类可以让表格更加紧凑,单元格中的内补(padding)均会减半

<table class="table table-condensed">
  ...
</table>

状态类

通过这些状态类可以为行或单元格设置颜色

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

表单

内联表单

<form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口(viewport)至少在 768px宽度时(视口宽度再小的话就会使表单折叠)。

水平排列的表单

通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局

 

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input><textarea><select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列

<form action="#" class="form-horizontal">
	<div class="form-group">
		<input type="text" placeholder="请输入你的帐号" class="form-control">
	</div>
	<div class="form-group">
		<input type="password" placeholder="请输入你的密码" class="form-control">
	</div>
	<div class="checkbox">
		<label>
			<input type="checkbox">记住我
		</label>
		</div>
	<div class="radio">
		<label for="man">
			<input type="radio" id="man" name="sex">man
		</label>
		<label for="woman">
			<input type="radio" id="woman" name="sex">woman
		</label>
		<label for="secret">
			<input type="radio" id="secret" name="sex" disabled>secret
		</label>
    </div>
	<div class="form-group">
		<select name="select" class="form-control">
			<option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
		</select>
	</div>
</form>

 

按钮

<a><button><input> 元素添加按钮类(button class)即可使用 Bootstrap 提供的样式

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
<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 就可以获得不同尺寸的按钮

<p>
  <button type="button" class="btn btn-primary btn-lg">(大按钮)Large button</button>
  <button type="button" class="btn btn-default btn-lg">(大按钮)Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">(默认尺寸)Default button</button>
  <button type="button" class="btn btn-default">(默认尺寸)Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">(小按钮)Small button</button>
  <button type="button" class="btn btn-default btn-sm">(小按钮)Small button</button>
</p>
<p>
  <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>
</p>

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素

<button type="button" class="btn btn-primary btn-lg btn-block">(块级元素)Block level button</button>

 

图片

通过为 <img> 元素添加以下相应的类,可以让图片呈现不同的形状

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

 

辅助类

情境文本颜色

<p class="text-muted">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-primary">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-success">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-warning">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>

情境背景色

<p class="bg-primary">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="bg-success">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="bg-info">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="bg-warning">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>

关闭按钮

通过使用一个象征关闭的图标,可以让模态框和警告框消失

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>

三角符号

通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意,向上弹出式菜单中的三角符号是反方向的

<span class="caret"></span>

快速浮动

<div class="pull-left">...</div>
<div class="pull-right">...</div>

清除浮动

通过为父元素添加 .clearfix 类可以很容易地清除浮动

<div class="clearfix">...</div>

显示或隐藏内容

<div class="show">...</div>
<div class="hidden">...</div>

 

Glyphicons字体图标

图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span> 标签,并将图标类应用到这个 <span> 标签上.图标类只能应用在不包含任何文本内容或子元素的元素上。

<span class="glyphicon glyphicon-align-left"></span>
<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span>
</button>

 

下拉菜单

用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码

<div class="dropdown">
	<button class="btn btn-primary" data-toggle="dropdown">我是一个下拉框 
	<span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="#">python</a></li>
        <li><a href="#">c++</a></li>
        <li><a href="#">java</a></li>
    </ul>
</div>
<br/><br/><br/><br/><br/><br/>
<div class="dropup">
	<button class="btn btn-primary" data-toggle="dropdown">我是一个上拉框 
		<span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="http://www.baidu.com">python</a></li>
      <li><a href="#">c++</a></li>
      <li><a href="#">java</a></li>
    </ul>
</div>

 

按钮组

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

<div class="btn-group">
  	<button type="button" class="btn btn-default">Left</button>
  	<button type="button" class="btn btn-success">Middle</button>
  	<button type="button" class="btn btn-warning">Right</button>
</div>

按钮组嵌套下拉框

<div class="btn-group">
	<button class="btn btn-danger">按钮1</button>
	<button class="btn btn-success">按钮2</button>
	<button class="btn btn-warning">按钮3</button>
	<div class="btn-group">
    	<button class="btn btn-primary" data-toggle="dropdown">我是一个下拉框 
    		<span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">python</a></li>
            <li><a href="#">c++</a></li>
            <li><a href="#">java</a></li>
        </ul>
    </div>
</div>

分裂式下拉菜单

<div class="btn-group">
	<button class="btn btn-success">成功</button>
	<button class="btn btn-info" data-toggle="dropdown">
		<span class="caret"></span></button>
	<ul class="dropdown-menu">
        <li><a href="#">python</a></li>
        <li><a href="#">c++</a></li>
        <li><a href="#">java</a></li>
	</ul>
</div>

 

输入框组

通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮,可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon.input-group-btn 类,可以给 .form-control 的前面或后面添加额外的元素

<div class="input-group">
	<span class="input-group-addon">@</span>
	<input type="text" placeholder="请输入你的帐号" class="form-control">
</div>

<div class="input-group">
	<input type="text" placeholder="请输入你的帐号" class="form-control">
	<span class="input-group-addon">@</span>
</div>

<div class="input-group">
	<input type="text" placeholder="请输入你的帐号" class="form-control">
	<span class="input-group-addon">
		<span class="glyphicon glyphicon-heart"></span>
	</span>
</div>

<div class="input-group">
	<span class="input-group-addon">
		<span class="glyphicon glyphicon-heart"></span>
	</span>
	<input type="text" placeholder="请输入你的帐号" class="form-control">
</div>

 

导航

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

标签页

注意 .nav-tabs 类依赖 .nav 基类

<ul class="nav nav-tabs">
    <li class="active"><a href="#">python</a></li>
    <li><a href="#">c++</a></li>
    <li><a href="#">java</a></li>
</ul>

胶囊式标签页

<ul class="nav nav-pills">
    <li class="active"><a href="#">python</a></li>
    <li><a href="#">c++</a></li>
    <li><a href="#">java</a></li>
</ul>

两端对齐的标签页

<ul class="nav nav-tabs nav-justified">
    <li class="active"><a href="#">python</a></li>
    <li><a href="#">c++</a></li>
    <li><a href="#">java</a></li>
</ul>

路径导航标签页

<ul class="breadcrumb">
    <li class="active"><a href="#">python</a></li>
    <li><a href="#">c++</a></li>
    <li><a href="#">java</a></li>
</ul>

 

导航条

添加 .navbar-fixed-top 类可以让导航条固定在顶部,添加 .navbar-fixed-bottom 类可以让导航条固定在底部

<div class="navbar navbar-default navbar-fixed-top">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">python</a></li>
        <li><a href="#">c++</a></li>
        <li><a href="#">java</a></li>
    </ul>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">python</a></li>
        <li><a href="#">c++</a></li>
        <li><a href="#">java</a></li>
    </ul>
</div>

 

分页

<ul class="pagination">
    <li><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li class="active"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">»</a></li>
</ul>

 

进度条

<div class="progress">
	<div class="progress-bar progress-bar-success" style="width:50%">50%</div>
</div>

<div class="progress">
	<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:50%">50%			</div>
</div>

<div class="progress">
    <div class="progress-bar progress-bar-info progress-bar-striped active" 		 style="width:50%">50%</div>
	</div>
</div>