bootstrap-杨标的博客

Bootstrap

BootStrap准备工作

<meta name="renderer" content="webkit" >
<link rel="stylesheet" href="./css/bootstrapV3/css/bootstrap.min.css" type="text/css">
<!--[if lt ie 9]>
    <script src="./css/bootstrapV3/html5shiv.min.js" type="text/javascript"></script>
    <script src="./css/bootstrapV3/respond.min.js" type="text/javascript"></script> 
<![endif]-->
<script src="./css/bootstrapV3/js/jquery.min.js" type="text/javascript"></script>
<script src="./css/bootstrapV3/js/bootstrap.min.js" type="text/javascript"></script>

说明：一定要先导jQuery，再导BooStrap

container容器

pc端：container容器 ,根据设备大小，自动调整内容宽度，并且居中，内容两边都留有间隙

移动端：container-fluid 宽度为100%

网格系统

	额外的小设备收集（<768px）	小型设备平板电脑（≥768px）	中型设备台式电脑（≥992px）	大型设备台式电脑（≥1200px）
网格行为	一直是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的
Class 前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列	12	12	12	12

网格的基本结构

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

偏移列

使用 .col-md-offset-*，这些类会把一个列的左外边距（margin）增加 ***** 列，其中 ***** 范围是从 1 到 11。

<div class="row" >
      <div class="col-xs-6 col-md-offset-3" >
         <p>Lorem ipsum dolor sit amet </p>
      </div>
   </div>

列排序

.col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 ***** 范围是从 1 到 11。

<div class="row">
      <p>排序前</p>
      <div class="col-md-4" >
         我在左边
      </div>
      <div class="col-md-8" >
         我在右边
      </div>
   </div><br>
   <div class="row">
      <p>排序后</p>
      <div class="col-md-4 col-md-push-8" >
         我在左边
      </div>
      <div class="col-md-8 col-md-pull-4" >
         我在右边
      </div>
   </div>

标题

<h1>我是标题1 h1</h1>
<h6>我是标题6 h6</h6>
<div class="h1">
    这也是1号标题
</div>
<p class="h6">
    这也是6号标题
</p>

内联子标题

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

引导标题

<h2>引导主体副本</h2>
<p class="lead">这是一个演示引导主体副本用法的实例。。</p>

页面标题

<div class="page-header">
    <h2 class="text-primary text-center">
        标题<small>副标题</small>
    </h2>
</div>

强调

<small>本行内容是在标签内</small>

class	样式
text-left	向左对齐文本
text-center	居中对齐文本
text-right	向右对齐文本
text-uppercase	英文转大写
text-lowercase	英文转小写
text-capitalize	首字母大写
text-hide	文本隐藏

class	样式
tex-primary	主要
text-success	成功
text-info	提示
text-warning	警告
text-danger	危险

表格

可选的表格类

可选的表格类	样式
table-striped	条纹表格
table-bordered	边框表格
table-hover	悬停表格
table-condensed	紧凑型表格
table-responsive	响应式防压缩表格

修饰类

下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色

类	描述
.active	对某一特定的行或单元格应用悬停颜色
.success	表示一个成功的或积极的动作
.warning	表示一个需要注意的警告
.danger	表示一个危险的或潜在的负面动作

<table class="table table-striped table-bordered table-hover table-condensed">
   <caption>条纹表格布局</caption>
      <tr>
         <th>名称</th>
      </tr>
</table>

button按钮

定义按钮的样式

Class	描述
btn	标准的按钮。
btn-default	默认的按钮
btn-primary	提供额外的视觉效果，标识一组按钮中的原始动作。
btn-success	表示一个成功的或积极的动作。
btn-info	信息警告消息的上下文按钮。
btn-warning	表示应谨慎采取的动作。
btn-danger	表示一个危险的或潜在的负面动作。
btn-link	并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为。

<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>

按钮大小

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

<p>
   <button type="button" class="btn btn-primary btn-lg">
      大的原始按钮
   </button>
   <button type="button" class="btn btn-default btn-lg">
      大的按钮
   </button>
</p>

按钮状态

Class	状态
.active	激活状态
disabled	禁用状态

<button type="button" class="btn btn-default btn-lg active">
      激活按钮
 </button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">
      禁用按钮
</button>

按钮组

<div class="btn-group">
    <button type="button" class="btn btn-default btn-lg">
      大的按钮
   </button>
     <button type="button" class="btn btn-default btn-lg">
      大的按钮
   </button>
</div>
<!--不仅可以够成按钮组，还可以垂直-->
<div class="btn-group-vertical">
    
</div>
<!--批量设置按钮组按钮大小-->
<div class="btn-group btn-group-xs/lg">
    
</div>

Form表单

表单布局类型

form-group	垂直表单
form-inline	内联表单
form-horizontal	水平表单

复选框CheckBox和单选框Radio

对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline

<div class="radio">
   <label>
      <input type="radio" name="optionsRadios" >男
   </label>
    <label>
      <input type="radio" name="optionsRadios" >男
   </label>
</div>
<div>
   <label class="checkbox-inline">
      <input type="checkbox" value="option1"> 选项 1
   </label>
   <label class="checkbox-inline">
      <input type="checkbox"  value="option2"> 选项 2
   </label>
   <label class="checkbox-inline">
      <input type="checkbox"  value="option3"> 选项 3
   </label>
</div>

垂直或基本表单

非form元素添加 role="form"。
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。
表单里面的文字使用label标签，添加clsas .control-label
水平表单需要使用栅格系统来分开

组合输入框

class样式	说明
input-group	组合
input-group-addon	组合的元素
input-group-btn	组合按钮的时候使用

<form>
    <div class="form-group">
        <div class="input-group">
            <div class="input-group-addon">
                <span class="glyphicon glyphicon-user"></span>
            </div>
            <input type="text">
        </div>
    </div>
    <div class="form-group">
        <div class="input-group">
            <div class="input-group-addon">
                <span class="glyphicon glyphicon-lock"></span>
            </div>
            <input type="text">
        </div>
    </div>
    <div class="form-group">
        <div class="input-group">
            <input type="text">
            <div class="input-group-btn">
                <button type="button" class="btn btn-info">
                    <span class="glyphicon glyphicon-floder-open"></span>
                </button>
            </div>
        </div>
    </div>
</form>

图像

图像应用简单样式

img-rounded	图像圆角
img-circle	让整个图像变成圆形
img-thumbnail	灰色的边框
img-responsive	响应式图片

<img src="/wp-content/uploads/2014/06/download.png" 
   class="img-rounded">
<img src="/wp-content/uploads/2014/06/download.png" 
   class="img-circle">
<img src="/wp-content/uploads/2014/06/download.png" 
   class="img-thumbnail">

实用工具类

Class	设备
.visible-xs	额外的小设备（小于 768px）可见
.visible-sm	小型设备（769 px 起-990px）可见
.visible-md	中型设备（991px 到 1200 px）可见
.visible-lg	大型设备（1200px）可见
visible只是可见，在其它状态不可见
.hidden-xs	额外的小设备（小于 768px）隐藏
.hidden-sm	小型设备（769 px 起-990px）隐藏
.hidden-md	中型设备（991px 到 1200 px）隐藏
.hidden-lg	大型设备（1200px）隐藏
hidden只是在某一个范围隐藏，其它的范围可见
pull-left	向左浮动
pull-right	向右浮动
center-block	呈现块级并居中
clearfix	清除浮动
show	强制元素显示
hide/hidden	元素会隐藏
sr-only	只在屏幕阅读器可见

Bootstrap 布局组件

按钮组下拉菜单

 <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" 
      data-toggle="dropdown">
      下列
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">下拉链接 1</a></li>
      <li><a href="#">下拉链接 2</a></li>
    </ul>
  </div>

垂直的按钮组

 <div class="btn-group-vertical">
    <button type="button" class="btn btn-default dropdown-toggle" 
      data-toggle="dropdown">
      下拉
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">下拉链接 1</a></li>
      <li><a href="#">下拉链接 2</a></li>
    </ul>
  </div>

下拉菜单

下拉菜单主要的class有dropdown ,dropdown-menu,dropdown-toggle，使用的属性有data-toggle="dropdown"

<div class="dropdown">
   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
       下拉菜单<span class="caret"></span>
   </button>
   <ul class="dropdown-menu">
       <li><a href="#">第一项</a></li>
       <li><a href="#">第二项</a></li>
       <li class="divider"></li>
       <li><a href="#">第三项</a></li>
   </ul>
</div>

列表组

主要用是ul来进行使用,class样式有 list-unstyled,list-group,list-inline,list-group-item,list-group-item-heading还有不同的主题颜色

<ul class="list-group">
    <li class="list-group-item list-group-item-heading">第一项</li>
    <li class="list-group-item list-group-item-danger">第二项</li>
    <li class="list-group-item list-group-item-info">第三项</li>
    <li class="list-group-item list-group-item-success">第四项</li>
    <li class="list-group-item list-group-item-warning">第五项</li>
</ul>

如果希望排在一行，则使用list-inline.如果仅仅只是想去掉样式，则使用list-unstyled

导航元素

面板导航

<ul class="nav nav-tabs">
     <li><a href="#">第一项</a></li>
     <li><a href="#">第二项</a></li>
     <li><a href="#">第三项</a></li>
     <li><a href="#">第四项</a></li>
</ul>

胶囊式导航

<ul class="nav nav-pills">
     <li><a href="#">第一项</a></li>
     <li><a href="#">第二项</a></li>
     <li><a href="#">第三项</a></li>
     <li><a href="#">第四项</a></li>
</ul>

垂直这式导航

<ul class="nav nav-pills nav-stacked">
     <li><a href="#">第一项</a></li>
     <li><a href="#">第二项</a></li>
     <li><a href="#">第三项</a></li>
     <li><a href="#">第四项</a></li>
</ul>

面包屑

<ul class="breadcrumb">
     <li><a href="#">第一项</a></li>
     <li><a href="#">第二项</a></li>
     <li><a href="#">第三项</a></li>
     <li class="active"><a href="#">第四项</a></li>
</ul>

导航元素与面板的结合

导航元素与面板的样式结合在一起以后，我们可以实现点击切换的效果

<ul class="nav nav-tabs">
     <li class="active"><a href="#first" data-toggle="tab">第一项</a></li>
     <li><a href="#second" data-toggle="tab">第二项</a></li>
     <li><a href="#third" data-toggle="tab">第三项</a></li>
     <li><a href="#fourth" data-toggle="tab">第四项</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active in" id="first">
        这是第一项里面显示的内容
    </div>
    <div class="tab-pane" id="second">
        这是第二项里面显示的内容
    </div>
    <div class="tab-pane" id="third">
        这是第三项里面显示的内容
    </div>
    <div class="tab-pane" id="fourth">
        这是第四项里面显示的内容
    </div>
</div>

导航元素与面板可以结合，同时其它的元素也可以结果，同时也可以没有a标签，使用其它标签的时候，要使用自定义属性data-target

分页

分页使用到的属性是pagination,pagination-xs,pagination-lg

<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li class="active"><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="#">&raquo;</a></li>
</ul>

分页的状态可以改变大小，同时也可以改变位置，大小主要通过-xs或-lg来完成,位置则主要通过浮动pull-right来完成

class	说明
label label-default	默认
label label-primary	主要的
label label-danger	危险的
label label-success	成功的
label label-info	信息的
label label-warning	警告的

进度条

主要的class样式为progress ,progress-bar来进行的

<div class="progress">
    <div class="progress-bar" style="width:40%"></div>
</div>
<!--这是一个primary色的效果 -->

还可以使用其它的在调

progress-bar-danger,progress-bar-warning,progress-bar-success,probress-bar-info

同时还有一个条纹的进度条

progress-bar-striped

如果我们希望进度看起来在动，可以在progress上面添加一个class效果 active

徽章

应用场景在导航栏上或者列表组上面,class样式为<span class="badage">10</span>

巨幕

<div class="###">
   <div class="container">
        <h1>欢迎登陆页面！</h1>
        <p>这是一个超大屏幕（Jumbotron）的实例。</p>
        <p><a class="btn btn-primary btn-lg" role="button">
        学习更多</a>
      </p>
   </div>
</div>

超大屏幕（Jumbotron）

上拉下滑

bootstrap可以直接使用上拉下滑,主要使用到的样式是collapse,主要使用到的自定义属性data-toggle="collapse",data-target="#id"

<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#c1">
    上拉下滑
</button>
<div class="collapse" id="c1">
    这是里面的内容
</div>

导航栏

主要的class样式

class	样式说明
navbar	基本样式
nav-default	默认样式
nav-inverse	黑色的主题
nav-static-top/nav-static-bottom	去掉圆角
nav-fixed-top/nav-fixed-bottom	固定在顶部/底部
nav-brand	标题
nav-header	头部的
navbar-nav	导航栏里面的导航元素
navbar-right	去导航栏的右边
navbar-form	导航栏里面的表单
navbar-collapse	响应式导航栏里面在PC端显示，在移动端隐藏
icon-bar	一个横线

<nav class="navbar navbar-default">
	<div class="container">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">项目标题</a>
            <button class="btn btn-default navbar-toggle" data-toggle="collapse" data-target="#c1">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="c1">
            <ul class="nav navbar-nav">
                <li><a href="#">中文网站</a></li>
                <li><a href="#">技术支持</a></li>
            </ul>
            <form class="navbar-form navbar-right">
                <div class="form-group">
                    <input type="text" class="form-congtrol">
                </div>
            </form>
        </div>
    </div>
</nav>

bootstrap