BootStrap css概览

响应式图像

<img src="..." class="img-responsive" alt="响应式图像">

如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。

网格系统

<div class="container">
	 <div class="row">
		 <div class="col-md-6 col-lg-4">....</div
		 <div class="col-md-6 col-lg-8">....</div>
 	</div>
</div>

网格中的每一行是由 12 个单元组成的，自定义列的尺寸：6×6，断点处更改列的宽度

[外链图片转存失败(img-qk8VL6GR-1564587391565)(/home/xiao/.config/Typora/typora-user-images/1564558797824.png)]

排版

<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>

[外链图片转存失败(img-sPj2cIIq-1564587391567)(/home/xiao/.config/Typora/typora-user-images/1564558999357.png)]

<p class="lead">得到更大更粗、行高更高的文本</p>
<p class="small">这是个文字更小</p>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-justify">对齐文本。该段落会根据屏幕的大小对超出屏幕的文字进行换行</p>      
<p class="text-nowrap">该段落不会根据屏幕的大小对超出屏幕的文字进行换行</p>
<p class="text-lowercase">小写文本</p>
<p class="text-uppercase">大写文本</p>      
<p class="text-capitalize">首字母大写文本</p>

列表

<h4>未定义样式列表</h4>
<ul class="list-unstyled"> <li></li></ul>

<h4>内联列表</h4>
<ul class="list-inline"><li></li></ul>

<h4>水平的定义列表</h4>
<dl class="dl-horizontal"><dd></dd></dl>

[外链图片转存失败(img-EjCQS7K1-1564587391567)(/home/xiao/.config/Typora/typora-user-images/1564559884856.png)]

[外链图片转存失败(img-oINsLsEA-1564587391568)(/home/xiao/.config/Typora/typora-user-images/1564559896465.png)]

代码

<var>	变量赋值: x = ab + y
<kbd>ctrl + p</kbd>	按键提示： CTRL + P
<code>	同一行代码片段: span, div
<pre>	多行代码	
<pre class="pre-scrollable">	多行代码带有滚动条	
<samp>	电脑程序输出: Sample output	

表格

table class=""
table	为任意 <table> 添加基本样式 (只有横向分隔线)	
table table-striped	在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)	
table table-bordered	为所有表格的单元格添加边框	
table table-hover	在 <tbody> 内的任一行启用鼠标悬停状态	
table table-condensed	让表格更加紧凑

div class=""
table-responsive	表格水平滚动以适应小型设备

tr th td class=""
.active	将悬停的颜色应用在行或者单元格上	(灰)
.success	表示成功的操作	(绿)
.info	表示信息变化的操作	
.warning	表示一个警告的操作	(黄)
.danger	表示一个危险的操作　(红)

表单

• 向父 元素添加 role=“form”。
• 把标签和控件放在一个带有 class .form-group 的
  中。这是获取最佳间距所必需的。
• 向所有的文本元素 、 和 添加 class =“form-control” 。

<form role="form">
	<div class="form-group">
	
		<label for="name">名称</label>
		<input type="text" class="form-control" id="name" placeholder="请输入名称">
		
		<label for="name">文本框</label>
		 <textarea class="form-control" rows="3"></textarea>
    
		<button type="submit" class="btn btn-default">提交</button>
	</div>
</form>

<form class="form-inline" role="form">//横向左对齐
使用 class="sr-only"，您可以隐藏内联表单的标签。

<form class="form-horizontal" role="form">	//水平表单
<label for="firstname" class="col-sm-2 control-label">名字</label>

单选框（Radio）

<div class="radio">
    <label>
        <input type="radio"  value="option1" checked> 选项 1
    </label>
</div>

<label class="radio-inline">	//显示在同一行
        <input type="radio"  value="option2"> 选项 2
    </label>

复选框（Checkbox）

<div class="checkbox">
		<label><input type="checkbox" value="">选项 1</label>
</div>
<label class="checkbox-inline">	//显示在同一行
		<input type="checkbox"  value="option1"> 选项 1
</label>

选择框（Select）

<select class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
 </select>
    
 <select multiple class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
</select>

静态控件

<div class="form-group">
	<label class="col-sm-2 control-label">Email</label>
	<div class="col-sm-10">
		 <p class="form-control-static">email@example.com</p>
	 </div>
</div>

输入框焦点

 <div class="form-group">
    <label class="col-sm-2 control-label">聚焦</label>
    <div class="col-sm-10">
      <input class="form-control" id="focusedInput" type="text" value="该输入框获得焦点...">
    </div>
  </div>

验证状态

<div class="form-group has-success">	输入成功
 <div class="form-group has-warning">	输入警告
 <div class="form-group has-error">			输入错误
    <label class="col-sm-2 control-label" for="inputSuccess">输入成功</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputSuccess">
    </div>

按钮

class=""
btn btn	为按钮添加基本样式	
btn btn-default	默认/标准按钮	
btn btn-primary	原始按钮样式（未被操作）	
btn btn-success	表示成功的动作	
btn btn-info	该样式可用于要弹出信息的按钮	
btn btn-warning	表示需要谨慎操作的按钮	
btn btn-danger	表示一个危险动作的按钮操作	
btn btn-link	让按钮看起来像个链接 (仍然保留按钮行为)	
btn btn-lg	制作一个大按钮	
btn btn-sm	制作一个小按钮	
btn btn-xs	制作一个超小按钮	
btn btn-block	块级按钮(拉伸至父元素100%的宽度)	
btn active	按钮被点击	
btn disabled	禁用按钮

btn btn-lg	这会让按钮看起来比较大。
btn btn-sm	这会让按钮看起来比较小。
btn btn-xs	这会让按钮看起来特别小。
btn btn-block	这会创建块级的按钮，会横跨父元素的全部宽度。

 <button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用按钮</button>
 <button type="button" class="btn btn-primary btn-lg" disabled="disabled">禁用的原始按钮</button>
 <a href="#" class="btn btn-default btn-lg disabled" role="button">禁用链接</a>
 <a href="#" class="btn btn-primary btn-lg disabled" role="button">禁用的原始链接</a>
 
 <a class="btn btn-default" href="#" role="button">链接</a>
<button class="btn btn-default" type="submit">按钮</button>
<input class="btn btn-default" type="button" value="输入">
<input class="btn btn-default" type="submit" value="提交">

按钮组
 <div class="btn-group">
 <div class="btn-group-vertical">	垂直方向
   <div class="btn-group btn-group-justified">	自适应
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
 注意: 如果是 <button> 元素, 你需要在外层使用 .btn-group 类来包裹:
 
 内嵌下拉菜单的按钮
 <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Sony <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Tablet</a></li>
      <li><a href="#">Smartphone</a></li>
    </ul>
  </div>
  
  分割按钮
  <div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Tablet</a></li>
    <li><a href="#">Smartphone</a></li>
  </ul>
</div>

图片

<img src="" class="img-rounded">	圆角矩形
<img src="" class="img-circle">			圆形
<img src="" class="img-thumbnail">	边框矩形
<img src="" class="img-responsive"> 支持响应式，将很好地扩展到父元素

文本

text-muted	"text-muted" 类的文本样式	
text-primary	"text-primary" 类的文本样式	
text-success	"text-success" 类的文本样式	
text-info	"text-info" 类的文本样式	
text-warning	"text-warning" 类的文本样式	
text-danger	"text-danger" 类的文本样式

背景

bg-primary	表格单元格使用了 "bg-primary" 类	
bg-success	表格单元格使用了 "bg-success" 类	
bg-info	表格单元格使用了 "bg-info" 类	
bg-warning	表格单元格使用了 "bg-warning" 类	
bg-danger	表格单元格使用了 "bg-danger" 类

其他

pull-left	元素浮动到左边	
pull-right	元素浮动到右边	
center-block	设置元素为 display:block 并居中显示	
clearfix	清除浮动	
show	强制元素显示	
hidden	强制元素隐藏	
sr-only	除了屏幕阅读器外，其他设备上隐藏元素	
sr-only-focusable	与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)	
text-hide	将页面元素所包含的文本内容替换为背景图	
close	显示关闭按钮	
caret	显示下拉式功能
<span class="caret"></span>	插入符

字体图标

<button type="button" class="btn btn-primary btn-lg　
style="text-shadow: black 5px 3px 3px;font-size: 60px;color: rgb(212, 106, 64)">
  <span class="glyphicon glyphicon-user"></span> User
</button>

下拉菜单

dropdown	指定下拉菜单，下拉菜单都包裹在 .dropdown 里	
dropdown-menu	创建下拉菜单	
dropdown-menu-right	下拉菜单右对齐	
dropdown-header	下拉菜单中添加标题	
dropup	指定向上弹出的下拉菜单	
disabled	下拉菜单中的禁用项	
divider	下拉菜单中的分割线