bootstrap的学习-基础样式和排版一

一、列表去除样式和横排排列 classs=“list-unstyled”,“list-inline”

二、【表格】.table 类指定基本样式，.table-striped 条纹样式，.table-bordered 类为边框样式，.table-hover 类带鼠标悬停样式，.table-condensed 类紧凑样式。

状态类(行或单元格设置颜色)：active，success，info，warning，info。

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格.

响应式表格: 会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

三、【按钮】

1. 基本样式，btn、btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-danger、active、disabled（禁用）

2. 展现形式，btn-link、btn-block（块形）、close、btn-outline(线性)

btn-circle（圆形）btn-rounded（圆角）

3. 尺寸样式，.btn-lg(大)、.btn-sm（小） 、.btn-xs（很小） 。

4.3D样式， dim类

5.下拉按钮组

<div class="btn-group">
　　　　<button data-toggle="dropdown" class="btn btn-warning dropdown-toggle">操作 <span class="caret"></span></button>
　　　　<ul class="dropdown-menu">
　　　　　　<li><a href="buttons.html#">置顶</a></li>
　　　　　　<li><a href="buttons.html#">修改</a></li>
　　　　　　<li><a href="buttons.html#">禁用</a></li>
　　　　　　<li class="divider"></li>//分割线

　　　　　　<li><a href="buttons.html#">删除</a></li>
　　　　</ul>
</div>



6.带图标的按钮

<button class="btn btn-primary " type="button"><i class="fa fa-check"></i> 提交</button>
<button class="btn btn-success " type="button"><i class="fa fa-upload"></i>  <span class="bold">上传</span></button>
<button class="btn btn-info " type="button"><i class="fa fa-paste"></i> 编辑</button>
<button class="btn btn-warning " type="button"><i class="fa fa-warning"></i> <span class="bold">警告</span></button>
<button class="btn btn-default " type="button"><i class="fa fa-map-marker"></i>  百度地图</button>

<a class="btn btn-success">
　　<i class="fa fa-weixin"> </i> 分享到微信</a>
<a class="btn btn-success btn-outline">
　　<i class="fa fa-qq"> </i> 使用QQ账号登录</a>



<a class="btn btn-white btn-bitbucket">
　　<i class="fa fa-user-md"></i></a>
<a class="btn btn-white btn-bitbucket">
　　<i class="fa fa-group"></i>
</a>
<a class="btn btn-white btn-bitbucket">
　　<i class="fa fa-wrench"></i>
</a>
<a class="btn btn-white btn-bitbucket">
　　<i class="fa fa-exchange"></i>
</a>
<a class="btn btn-white btn-bitbucket">
　　<i class="fa fa-check-circle-o"></i>
</a>
<a class="btn btn-white btn-bitbucket">
　　<i class="fa fa-road"></i>
</a>
<a class="btn btn-white btn-bitbucket">
　　<i class="fa fa-ambulance"></i>
</a>
<a class="btn btn-white btn-bitbucket">
　　<i class="fa fa-star"></i> 收藏
</a>



四、【文本】

1. 文本对齐类，text-left，text-center，text-right，text-justify（两端对齐），text-nowrap（禁止单元格内容换行）

2. 文本大小写类，text-lowercase，text-uppercase，text-capitalize

3.内联文本，使用<mark> 标签表示标注文本，<del>删除，<s>无用，<ins>插入，<u>下划线，<small>小号（父容器字体大小的 85%），<strong>着重，<em>斜体。

4.缩略语类，为 <abbr> 元素设置 title属性并使用.initialism 类让 font-size 变得稍微小些。例：<abbr title="attribute" class="initialism">attr</abbr>。

五、【表单】

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

2.所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。form-group，input-group，control-group，例子：

<form class="form-inline">
　　<div class="form-group">
　　　　<label>电子邮件</label>
　　　　<input type="email" class="form-control" placeholder="请输入您的电子邮件">
　　</div>
　　<div class="form-group">
　　　　<label>编号</label>
　　　　<input type="number" class="form-control" placeholder="请输入您的编号">
　　</div>
　　<div class="input-group">
　　　　<label class="input-group-addon">￥</label>
　　　　<input type="number" class="form-control" placeholder="输入价钱">
　　</div>
</form>

图例如下：全部水平放置



<form class="form-horizontal">
　　<div class="form-group">
　　　　<label class="col-sm-2 control-label" >电子邮件</label>
　　　　<div class="col-sm-10">
　　　　　　<input type="email" class="form-control" placeholder="请输入您的电子邮件">
　　　　</div>
　　</div>
　　<div class="form-group">
　　　　<label class="col-sm-2 control-label" >密码</label>
　　　　<div class="col-sm-10">
　　　　　　<input type="password" class="form-control" placeholder="请输入您的电子邮件">
　　　　</div>
　　</div>
</form>

图例：输入框和它前面的文字水平



3.复选框和单选框，用法一样（.radio、.radio-inline、.checkbox、.checkbox-inline）

<div class="checkbox">
　　<label>
　　　　<input type="checkbox">体育
　　</label>
</div>
<div class="checkbox disabled">
　　<label>
　　　　<input type="checkbox" disabled>科学
　　</label>
</div>

图例：



4. 水平排列的表单。通过为表单添加 .form-horizontal 类改变 .form-group 的行为，使其表现为栅格系统中的行（row）

col-sm-2 水平栅格的两列

col-sm-10水平栅格的十列

5.下拉列表

<select class="form-control">

　　　　<option>1</option>

　　　　<option>2</option>

　　　　<option>3</option>

</select>

6.校验状态（错误，成功，警告）.has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。

<div class="form-group has-success">
　　　<label class="col-sm-2 control-label" >密码</label>
　　　　<div class="col-sm-10">
　　　　　　<input type="password" class="form-control" placeholder="请输入您的电子邮件">
　　　　</div>
</div>

图例：







7.添加额外的图标： plyphicon-ok （成功状态） plyphicon-warning-sign(警告状态) plyphicon-remove（错误状态）

控制大小：input-lg（大） input-sm(小)

<div class="form-group has-error has-feedback">
　　　　<label class="control-label" >电子邮件</label>
　　　　<input type="email" class="form-control input-lg" placeholder="请输入您的电子邮件">
　　　　<span class="plyphicon plyphicon-remove form-control-feedback"></span>
</div>

8.图片：img-rounded（圆角矩形）img-circle（椭圆）thumbnail（加边框的矩形）img-responsive（响应式的格式）

　　<img src="img/a1.jpg" alt="图片" class="img-rounded img-responsive">
　　<img src="img/a2.jpg" alt="图片" class="img-circle">
　　<img src="img/a3.jpg" alt="图片" class="img-thumbnail">

9. bootstrap用于使得页面自适应移动设备的声明语句

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=no">

10.栅格系统 12列 超小屏幕（<768px）小屏幕（<=768px sm）中等屏幕（>=992px md）大屏幕（>=1200px lg）

<div class="container-fluid">
　　<div class="row">
　　　　<div class="col-sm-1 a">1</div>
　　　　<div class="col-sm-1 a">2</div>
　　　　　　　　.

　　　　　　　　.

　　　　　　　　.
　　　　<div class="col-sm-1 a">11</div>
　　　　<div class="col-sm-1 a" >12</div>
　　</div>

</div>

图例：



<div class="col-lg-3 col-md-4 col-sm-6 a" >12</div>//意味着当缩小屏幕，有4列，然后3列，2列依次减小

10.1 偏移

<div class="row">//

　　<div class="col-sm-8 a" >12</div>

　　<div class="col-sm-3 col-sm-offset-1 a" >12</div>//向右偏移一格

</div>

10.2 嵌套

10.3 交换

col-sm-push-5 //向右移动5个位置


[b]col-sm-pull-7[b] //向左移动7个位置[/b][/b]

[b][b]六.搜索框[/b][/b]

<div class="input-group">
　　<input type="text" placeholder="查找客户" class="input form-control">
　　<span class="input-group-btn">
　　　　<button type="button" class="btn btn btn-primary"> <i class="fa fa-search"></i> 搜索</button>
　　</span>
</div>



七.提示notification



代码：

<div class="tooltip-demo">
　　<button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="left" data-content="这里是提示内容">左侧提示</button>
　　<button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="top" data-content="这里是提示内容">顶部提示</button>
　　<button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="这里是提示内容">底部提示</button>
　　<button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="right" data-content="这里是提示内容">右侧提示
　　</button>
</div>

加一个js文件：<script src="js/content.min.js?v=1.0.0"></script>

八.使用 Fancybox 插件实现图片的美化展示

1.额外js文件的引入

<script src="js/plugins/peity/jquery.peity.min.js"></script>
<script src="js/plugins/fancybox/jquery.fancybox.js"></script>
<script>
　　$(document).ready(function(){$(".fancybox").fancybox({openEffect:"none",closeEffect:"none"})});
</script>

2.额外CSS的引入

<link href="js/plugins/fancybox/jquery.fancybox.css" rel="stylesheet">

3.html代码

<div class="ibox-content">
　　<a class="fancybox" href="img/p1.jpg" title="图片1">
　　　　<img alt="image" src="img/p_big1.jpg" />
　　</a>
　　<a class="fancybox" href="img/p2.jpg" title="图片2">
　　　　<img alt="image" src="img/p_big2.jpg" />
　　</a>
　　<a class="fancybox" href="img/p3.jpg" title="图片3">
　　　　<img alt="image" src="img/p_big3.jpg" />
　　</a>
　　　　　　　　。。。
　　<a class="fancybox" href="img/p2.jpg" title="图片8">
　　　　<img alt="image" src="img/p_big2.jpg" />
　　</a>
</div>



九.电子相册滑动播放功能









1.额外js文件的引入

<script src="js/plugins/peity/jquery.peity.min.js"></script>
<script src="js/plugins/fancybox/jquery.fancybox.js"></script>
<script src="js/plugins/blueimp/jquery.blueimp-gallery.min.js"></script>

2.额外CSS的引入

<link href="js/plugins/fancybox/jquery.fancybox.css" rel="stylesheet">

<link href="css/plugins/blueimp/css/blueimp-gallery.min.css" rel="stylesheet">

3.html代码

<div class="lightBoxGallery">
　　<a href="img/p_big1.jpg" title="图片" data-gallery=""><img src="img/p1.jpg"></a>
　　<a href="img/p_big2.jpg" title="图片" data-gallery=""><img src="img/p2.jpg"></a>
　　<a href="img/p_big3.jpg" title="图片" data-gallery=""><img src="img/p3.jpg"></a>
　　<a href="img/p_big1.jpg" title="图片" data-gallery=""><img src="img/p1.jpg"></a>
　　<a href="img/p_big2.jpg" title="图片" data-gallery=""><img src="img/p2.jpg"></a>
　　<a href="img/p_big3.jpg" title="图片" data-gallery=""><img src="img/p3.jpg"></a>
　　<a href="img/p_big1.jpg" title="图片" data-gallery=""><img src="img/p1.jpg"></a>

</div>

<div id="blueimp-gallery" class="blueimp-gallery">
　　<div class="slides"></div>
　　<h3 class="title"></h3>
　　<a class="prev">‹</a>
　　<a class="next">›</a>
　　<a class="close">×</a>
　　<a class="play-pause"></a>
　　<ol class="indicator"></ol>
</div>

十.单图滑动 HTML内容

<div class="ibox-content">
　　<div class="carousel slide" id="carousel1">
　　<div class="carousel-inner">
　　　　<div class="item active">
　　　　　　<img alt="image" class="img-responsive" src="img/p_big3.jpg">
　　　　</div>
　　　　<div class="item">
　　　　　　<img alt="image" class="img-responsive" src="img/p_big1.jpg">
　　　　</div>
　　　　<div class="item ">
　　　　　　<img alt="image" class="img-responsive" src="img/p_big2.jpg">
　　　　</div>

　　</div>
　　　　<a data-slide="prev" href="carousel.html#carousel1" class="left carousel-control">
　　　　　　<span class="icon-prev"></span>
　　　　</a>
　　　　<a data-slide="next" href="carousel.html#carousel1" class="right carousel-control">
　　　　　　<span class="icon-next"></span>
　　　　</a>
　　</div>
</div>



十一.徽章，标签，进度条







1.徽章类 badge badge-primary（基本）， badge-info，badge-success。。。

2.标签类 label label-primary（基本），label-info，label-success，label-danger...

3.进度条：

<div class="ibox-content">
　　<h5>基本</h5>
　　<div class="progress">
　　　　<div style="width: 35%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="35" role="progressbar" class="progress-bar progress-bar-success">
　　　　　　<span class="sr-only">35% Complete (success)</span>
　　　　</div>
　　</div>

　　<div class="progress progress-bar-default">
　　　　<div style="width: 43%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="43" role="progressbar" class="progress-bar">
　　　　　　<span class="sr-only">43% Complete (success)</span>
　　　　</div>
　　</div>

　　<h5>条纹</h5>

　　<div class="progress progress-striped">
　　　　<div style="width: 50%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" role="progressbar" class="progress-bar progress-bar-warning">
　　　　　　<span class="sr-only">40% Complete (success)</span>
　　　　</div>
　　</div>

　　<h5>动画</h5>

　　<div class="progress progress-striped active">
　　　　<div style="width: 75%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" role="progressbar" class="progress-bar progress-bar-danger">
　　　　　　<span class="sr-only">40% Complete (success)</span>
　　　　</div>
　　</div>

</div>