标签:center only 比例 enter lis 完全 time font 排列
1.栅格类数字表示的意思
.col-xs-12 .col-sm-6 .col-md-8 .col-lg-12 这里的数字代表在各自对应的屏幕状态下占据的比例。12为总列数。比如col-sm-6,就是指在sm屏幕状态下,包含此类的盒子占据6份的宽度,也就是一半。其他的以此类推。
如果在一个 .row 内包含的列(column)大于12个,包含多余列(column)的元素将作为一个整体单元被另起一行排列。如9+4,那么第一行就只有9,另一个盒子另起一行。
2.列偏移offset:
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
3.页面主体:
Bootstrap 将全局 font-size 设置为 14px,line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外,<p> (段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。
4.被删除文本使用<del>,表删除,无用文本用<s>两个的样式完全一样。
5.文本对齐:直接添加类名即可,有以下几种:
<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>
<p class="text-nowrap">No wrap text.</p>
6.内联列表:<ul class="list-inline"><li>...</li></ul> 实现列表同行并列的样式,类似于浮动。
7.水平排列的dl,dt,dd,就是实现dt,dd对应的排列在一行,小屏幕是两行,大屏幕在一行显示。只需要给dl添加类名dl-horizontal.
8.响应式表格:将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。
1.所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
2.内联表单:就是输入框,按钮等放在一行上
为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现 为 inline-block 级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。
3.bootstrap中给元素添加.sr-only类,可以将此元素隐藏.
4.水平排列表单 .form-horizontal
5.input元素的几种状态:disabled,readonly
6.为了让所有用户都能访问你的网站,我们强烈建议为所有输入框添加 label 标签。如果你不希望将 label 标签展示出来,可以通过添加 .sr-only 类来实现。
7.输入框尺寸:通过 .input-lg 类似的类可以为控件设置高度,通过 .col-lg-* 类似的类可以为控件设置宽度。
3、按钮
1.为 <a>、<button> 或 <input> 元素添加按钮类即可使用 Bootstrap 提供的样式。
<a class="btn btn-default" href="#" role="button">Link</a>
标签:center only 比例 enter lis 完全 time font 排列
原文地址:http://www.cnblogs.com/hyesc/p/7608785.html