Bootstrap_bootstrap textorange-CSDN博客

本文链接：https://blog.csdn.net/orange_532/article/details/82078996
一、简单介绍
1、是一种前端ui库，可以快速构建网站，基于HTML、CSS、
JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 
开发更加快捷。 [1]  Bootstrap提供了优雅的HTML和CSS规范，
它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，
一直是GitHub上的热门开源项目，比如慕课网，网易云这些网站就
用了它重点内容

2、特点
    1.跨设备，跨浏览器，对IE8-11支持，safari PC端不支持
    2.响应式布局：对pc端各种分辨率，移动端，平板的支持
    3.提供全面的组件，比如导航，按钮，模态框，幻灯片等
    4.h5和css3有很好的支持
    5.data-*属性的使用，栅格系统

二、全局css样式

A、多用H5文档类型
B、移动设备优先
<meta name="viewport" content="width=device-width, 
initial-scale=1, maximum-scale=1, user-scalable=no">
device-width:当前宽度为设备宽度
C、布局容器
.container类用于固定宽度并支持响应式的容器
.container-fluid类用于100%宽度，占据全部视口的容器
D、栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随
着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

1.用行“row”和列“col”来创建页面布局，内容就可以放到其中
2.行必须放到.container和.container-fluid中，为了给其添加对称
的padding和排列
3.用“row”在水平方向上先创建一组列
4.用“.col-md-4"创建列，然后内容放到列内
5.如果一“行（row）”中包含了的“列（column）”大于 12，
多余的“列（column）”所在的元素将被作为一个整体另起一
行排列。
6.class="col-xs-6 col-md-6" 到什么屏幕用什么 
/xs超小屏幕（手机：<768px 
/sm小屏幕（平板）：>=768 
/md中等屏幕>=992 /lg

7.列偏移 .col-md-offset-4
8.在列里边嵌套排列，依然是12排列
9.列排序  col-md-push-3，col-md-pull-9
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>  左边是9等分，右边是3等分，所以左边往有推3等分，右左拉9等分

E、排版
1..h1~h6类：给内联文本添加标题样式，改变大小和字体等；在h1~h6中加<
small>标签可以用来标记副标题,small也表示小号文本
2.<del>：被删除的文本  <s>：无用文本  <ins>插入文本  <u>带下划线的文本
3.文本对齐
<p class="text-left">Left aligned text.</p>  
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>  两端对齐
4.改变大小写
<p class="text-lowercase">Lowercased text.</p> 小写
<p class="text-uppercase">Uppercased text.</p> 大写
<p class="text-capitalize">Capitalized text.</p>  首字母大写
5.内联列表
<ul class="list-inline">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>     把块级元素变为行级并添加padding让所有li在一行显示

F、表格
1.class="table table-striped table-bordered table-hover table-condensed"
table类：添加表格间距 table-stripted：添加斑马线 table-bordered：添加
边框 table-hover：对鼠标悬停做出响应 table-condensed：表格更加紧凑
2.状态类<td class="active">...</td> <tr class="active">...</tr>给td和tr
添加颜色，active:悬停设置的颜色 succes info warning danger 
3.<div class="table-responsive"> 响应式表格
  <table class="table">
  </table>
  </div>

G、表单
1.所有的<input><textarea><select>在添加了form-control类后其默认宽度
为100%，他们和<lable>搭配最佳，排列会更好

2.内联表单
添加form-inline类可以让表单变为inline-block级别的控件，但是这种情况至少
要在768px宽度，因为宽度再小表单会折叠，注意这个时候要把宽度设置成auto
并且要加lable标签
<form class="form-inline">
  <div class="form-group">
    <label >Amount</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control"  placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

3.水平排列的表单
在form中添加form-horizontal类并联合使用 Bootstrap 预置的栅格类，可以
将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，
使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。
<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
</form>

4.<textarea class="form-control" rows="3"></textarea>rows属性可以更改
高度

5.多选框和单选框
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="">
       be sure to include why it's great
  </label>
</div>     添加checkbox radio类,disabled类可将其变为不可选状态，多个单选
或多选默认上下排列  添加checkbox-inline或radio-inline类可以让单选和多选框
在一行
6.select
直接在select上添加 form-concrol就可以，添加multiple属性可以默认显示多行
7.静态控件，
如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 
.form-control-static 类即可
<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>
8.属性readonly 可以让表单成为可读状态，但保持聚焦状态
9.表单的校验状态
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true">
</span></div>   在表单组里添加has-success 绿色 ；has-warning 黄色；has-error
红色  ;has-feedback和form-control-feedback可以在表单右边创建小图标
10.控件尺寸
<input class="form-control input-lg" type="text" >
input-lg/sm类来控制高度，用通过添加 .form-group-lg 或 .form-group-sm 类，
为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸
<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
</form>
调整列的大小，1.给父元素设置宽，2.用栅格系统
H、按钮
1.可作为按钮使用的标签或元素<a><button><input> 直接添加btn类
<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">
注意事项：1.虽然按钮类可以应用到 <a> 和 <button> 元素上，但是，导航和
导航条组件只支持 <button> 元素 2.如果 <a> 元素被作为按钮使用 -- 并用于
在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他
部分，那么，务必为其设置 role="button" 属性。
2.预定义样式
btn-default 默认灰色 btn-primary 首选项深蓝色 btn-success 成功绿色 
btn-info 一般信息天蓝色 btn-warning 警告黄色 btn-danger 危险红色
btn-link 链接
3.按钮尺寸
btn-lg 大 、btn-sm 小 、btn-xs 超小；添加btn-block类可以将其拉伸至父元素
100%宽度；active和disabled:经常把 .disabled 作为工具类使用，就像 .active
 类一样，因此不需要增加前缀
J、图片
1.响应式图片
直接添加img-responsive类，如果想让图片居中，一般用center-block类,而不用
text-center类
2.图片形状  img-rounded 加圆角 img-circle 圆形 img-thumbnail 加圆角边框
K、辅助类
1.情景文本颜色
<p class="text-muted">...</p>  灰色
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
2.情景背景色
<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>
3.关闭按钮
<button type="button" class="close"><span>&times;</span></button>
4.三角符号
<span class="caret"></span>
5.快速浮动
<div class="pull-left">...</div>
<div class="pull-right">...</div> 让盒子左右浮动，但在导航条中不能用
而用navbar-left或navbar-right类
6.内容快居中：center-block
7.清除浮动 ：.cleafix  没有设置浮动的元素添加
8.显示和隐藏内容  直接加show和hidden类
<div class="show">...</div>
<div class="hidden">...</div
9.使用 .text-hide 类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图。
<h1 class="text-hide">Custom heading</h1>
10.响应式工具                                         
                        超小屏幕          小屏幕      中等屏幕     大屏
                    手机 (<768px)  平板 (≥768px) 桌面 (≥992px)
.visible-xs-*   可见  隐藏  隐藏  隐藏
.visible-sm-*   隐藏  可见  隐藏  隐藏
.visible-md-*   隐藏  隐藏  可见  隐藏
.visible-lg-*   隐藏  隐藏  隐藏  可见
.hidden-xs      隐藏  可见  可见  可见
.hidden-sm  可见  隐藏  可见  可见
.hidden-md  可见  可见  隐藏  可见
.hidden-lg                  可见  可见          可见  隐藏
三、组件
A、添加图标
<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star
</button>
B、下拉菜单
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者
另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。
<div class="dropdown/up">
<button class="btn btn-default" type="button" data-toggle="dropdown">
   Dropup
<span class="caret"></span>
 </button>
<ul class="dropdown-menu">
 <li><a href="#">Action</a></li>
 <li class="dropdown-header">ggggggggggg</li>  给下边的菜单项的说明
 <li><a href="#">Another action</a></li>
 <li><a href="#">Something else here</a></li>
 <li role="separator" class="divider"></li>   分割线
 <li class="disabled"><a href="#"> link</a></li> 禁用选项
</ul>
</div>
1.下拉菜单的对齐用dropdown-menu-right/left类，当然可以用pull-right/left
但是不建议
C、按钮组
1.<div class="btn-group" >  
<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>
2.复杂的按钮组
把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar">
 中就可以做成更复杂的组件
<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>
3.尺寸
btn-group-lg/sm/xs
4.嵌套，比如按钮和下拉菜单的组合
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>  把btn-group换成btn-group-vertical/justified,可以让按钮垂直排列，下拉
</div>     菜单不管用/链段对齐，对按钮不起作用，需要把每个按钮包裹进一个按钮组中
5.按钮式下拉菜单
只需将改变按钮的颜色，在button里添加类如btn-danger就行
6.分列式按钮下拉菜单
只需在下拉菜单中再添加一个按钮
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
 <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
7.尺寸，跟按钮一样
D、输入框组
1.通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，可以实
现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 或 
.input-group-btn 类，可以给 .form-control 的前面或后面添加额外的元素。
只支持文本输入框<input>,避免使用<select>和<textarea>
2.基本实例
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>  @可以用 <input type="checkbox" >/
 <button class="btn btn-default" type="button">Go!</button>替换
当里边加入的是按钮或者下拉菜单或分列式按钮时，用类input-group-btn
3.尺寸 input-group-lg/sm/xs

E、导航
1.标签页，添加类.nav-tabs,其基于.nav类
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>
2.胶囊式标签页  .nav-pills添加.nav-stacked可以垂直堆叠排列
3.面包屑导航   .breadcrumb
4.导航条 .navbar .navbar-default添加颜色，然后在其中可以添加很多连接
和按钮/-navbar-header:导航头，内部包含了带有 navbar-brand 的
 <a> 元素。这会让文本看起来更大一号。/.navbar-nav:在导航中添加链接
必用，必须和.nav合用/.collapse .navbar-collapse:让导航响应式/navbar-
right/left:左右浮动/.navbar-form:很好的呈现垂直对齐并在较窄的视口
中呈现折叠状态。 使用对齐选项可以规定其在导航条上出现的位置。
<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>/.navbar-btn:对于不包含在 <form> 中的 <button> 元素
，加上 .navbar-btn 后，可以让它在导航条里垂直居中.navbar-text:
把文本包裹在 .navbar-text中时，为了有正确的行距和颜色，通常使用 <p>
///.navbar-fixed-top/bottom:固定到顶部/底部，这个固定的导航条会遮住
页面上的其它内容，除非你给 <body> 元素底部设置了 padding。导航条
的默认高度是 50px。//.navbar-static-top:静止在顶部，随着页面向下滚动
而消失///.navbar-inverse:反色，黑色的导航条

5.终极案例，见官网
F、分页
1.默认分页
<ul class="pagination">  .pagination
    <li>
      <a href="#">
        <span>&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><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="#" >
        <span>&raquo;</span>
      </a>
    </li>
  </ul>
2.激活和禁用，.active/.disabled
3.尺寸  .pagination-lg/sm
4.翻页，默认居中对齐
<ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
</ul>
5.对齐链接
<li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
G、标签
1.如在h1后边添加标签
<h3>Example heading <span class="label label-default">New</span></h3>
H、徽章
1.给链接、导航等元素嵌套 <span class="badge"> 元素，可以很醒目的展示新的或未读的信息条目。
<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>
J、巨幕
<div class="jumbotron">
  <div class="page-header">  //添加页头可以给h1增加适当的空间，和其他
  <h1>Hello, world!</h1>     部分有一定的分隔，还可添加其他组件
  </div>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
K、缩略图
1.添加一点点额外的标签，就可以把任何类型的 HTML 内容，例如标题、
段落或按钮，加入缩略图组件内。
<div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a>
        <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
L、警告框
1.alert alert-danger
<div class="alert alert-success" role="alert">...</div>
2.可关闭的警告框
为警告框添加一个可选的 .alert-dismissible 类和一个关闭按钮
<div class="alert alert-warning alert-dismissible">
<button type="button" class="close" data-dismiss="alert" ><span>&times;</span></button>
<strong>Warning!</strong> Better check yourself
</div>
3.在警告框中添加链接
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">fjjgrhbjbvj</a>nbjfbdfn vbrgfbdhvdf
</div>
M 、进度条
1.默认
<div class="progress">
<div class="progress-bar"style="width: 100%;"></div>
</div>
2.  progress-bar-info：情景变化/progress-bar-striped：条纹效果/active
:动画效果/把多个进度条放进一个.progress中，有堆叠效果
<div class="progress-bar progress-bar-info progress-bar-striped active "style="width: 100%;"></div>
N、媒体对象
1.这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内
容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等默认样式的媒体对
象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  </div>
</div>   //左右布局用类.media-right/left/body
2.对齐:媒体对象在上中下对齐
<div class="media-left media-top/middle/bottom">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
3.媒体对象列表.media-list
把多个媒体对象放到一个列表中，对评论或文章列表很有用
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>
O、列表组
1.列表组是灵活又强大的组件，不仅能用于显示一组简单的元素，还能用于
复杂的定制的内容。基本实例
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>
2.其他列表
<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
</div>
------------
<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
</div>
-------------
3.情景类.list-group-item-success.....
P、面板：用来把某些内容放到盒子里，其原理时增加边框和内补
1.
<div class="panel panel-default">  基本样式和颜色
  <div class="panel-heading">         面板头
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body"> 面板主体
    Panel content
  </div>
<div class="panel-footer">Panel footer</div>面板脚注
</div>
2.可以在面板主体中添加表格，列表组，
Q、Well
把 Well 用在元素上，就能有嵌入（inset）的简单效果
<div class="well well-lg/sm">...</div>