标签：des style c class blog code
Tapestry的学习不得不停一下了。因为Bootstrap再一次引起了我的注意，并且我不得不再系统地学习它一次。
1 bootstrap需要一个HTML5的环境，也就是说必须是：
<!DOCTYPE html> <html> ... </html>
2 bootstrap3是移动设备优先的，需要指定一个meta信息，viewport，视角：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3 响应式图片的加入，img-responsive设定了一个图片的width:100%; height:auto;可以让图片按比例缩放，不超过其父元素的尺寸。
<img src="..." class="img-responsive" alt="Responsive image">
4 用.container包裹页面上的内容即可实现居中对齐。
注意，由于设置了padding 和
固定宽度，.container不能嵌套。
5 栅栏系统
row需要放到一个container中，以便追加适当的内补等；
row中只允许直接放置列（col-sm-6等）；
内容放到列中。
6 栅栏系统中如果一个列的高度超过其它列的高度，当出现折行的时候会有错乱，需要在出现错乱的地方加入如下代码。。。
<div class="clearfix visible-xs"></div>
7 列嵌套需要追加一个新的row这样会完美的嵌套，否则会出现一些padding。。。
8 通过使用.col-md-push-* 和 .col-md-pull-*就可以很容易的改变列的顺序。
真心不明白为什么会有这个设计，(^.^)
9 一些被自定义的字号相关的内容：
<small>小字号容器的85%，<strong>粗字体，<em>斜体
10 文本对其： text-left，text-center，text-right
11 ul，li
<ul class="list-unstyled"> 设置该ul的直接子节点的li的样式为基本样式。
<ulclass="list-inline"> 设置直接子节点li处在一直线上。
12 .lead 让段落突出显示
13
text-muted
text-primary
text-success
text-info
text-warning
text-danger
14 我们也许该试试把下面这些标签放到我们的HTML5中了：
<address> ： 地址的设置，<br>是用来提供换行的；<strong>是用来提供突出显示的。
<blockquote> ：引用别人的内容，其中需要<p>标签。直接引用这样就可以了。如果有出处的话，加入如下的代码就可以了。
<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
dl(定义列表，definition list), dt(定义项目，definition title), dd(定义描述，definition describe)
<dl> <dt>...</dt> <dd>...</dd> </dl> or <dl class="dl-horizontal"> <dt>...</dt> <dd>...</dd> </dl>
15 表格，为任意的表格追加.table样式即可获得bootstrap的支持。
利用.table-striped可以给<tbody>之内的每一样增加斑马条纹样式。（IE8，USELESS）
.table-striped > tbody > tr:nth-child(odd) > td { background-color: #f9f9f9; }
利用.table-bordered为表格和其中的每个单元格增加边框。
利用.table-hover可以让<tbody>中的每一行响应鼠标悬停状态。
利用.table-condensed可以让表格更加紧凑，单元格中的内部（padding）均会减半。
将任何.table包裹在.table-responsive中即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失。
16 <span class="badge">可以简单方便的标记一个东西。
<a href="#"> <span class="badge pull-right">42</span> Home </a>
17 如果想要大屏幕显示一个内容的话，需要用到如下的样式，挺好看的说。。。。
<div class="jumbotron"> <h1>Hello, world!</h1> <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p> </div>
18 警告框
<div class="alert alert-success">...</div> <div class="alert alert-info">...</div> <div class="alert alert-warning">...</div> <div class="alert alert-danger">...</div>
可关闭的警告框，为了保证在所有的设备上都能关闭，需要我们制定这个data-dismiss
<div class="alert alert-warning alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <strong>Warning!</strong> Best check yo self, you‘re not looking too good. </div>
我们可以在一个警告框中追加一个连接，这个连接的样式如下：
<div class="alert alert-success"> <a href="#" class="alert-link">...</a> </div>
19 模态对话框，看上去相对简单。。。
不需写JavaScript代码也可激活模态框。通过在一个起控制器作用的页面元素（例如，按钮）上设置data-toggle="modal"，并使用data-target="#foo"或href="#foo"指向特定的模态框即可。
<button type="button" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#myModal"> Show Module! </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
以下的javascript也可以直接显示module
$(‘#myModal‘).modal(options)
Bootstrap学习 Base,布布扣,bubuko.com
标签：des style c class blog code
原文地址：http://www.cnblogs.com/voctrals/p/3754083.html
