对齐:
text-left:居左
text-center居中
text-right居右
text-justify文本对齐
text-nowrap文本不换行
<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>
改变大小写:
lowercased text.全是小写
UPPERCASED TEXT.全是大写
Capitalized Text.首字母大写
<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p>
栅格系统:
- “行(row)”必须包含在
.container
(固定宽度)或.container-fluid
(100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。 - 通过“行(row)”在水平方向创建一组“列(column)”。
- 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
- 类似
.row
和.col-xs-4
这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。 - 通过为“列(column)”设置
padding
属性,从而创建列与列之间的间隔(gutter)。通过为.row
元素设置负值margin
从而抵消掉为.container
元素设置的padding
,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding
。 - 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
- 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个
.col-xs-4
来创建。 - 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
- 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何
.col-md-*
栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何.col-lg-*
不存在, 也影响大屏幕设备。
栅格系统Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin用于生成更
具语义的布局。
1、 不论什么时候、分割父容器时、父容器永远是12分
2、它本身的样式(md)、找的是比它本身小的样式(sm/xs当没有sm时,会默认成sm的格式、当更小时、会是xs的样式)(它本身有时,用本身的,本身没有时,找比它小的,本身更小时,用100%)列重置:
列重置解决的空隙/白问题(重叠问题)visible-xs-block它只在xs上使用,其他地方看不到.
visible-xs-block意思是手机浏览时时显示为块元素, 同理.visible-xs-inline则为行内元素。所有的响应式布局都是基于媒体查询的、在手机上做东西时,很少左右留空白注意:在写代码时,不要行里
面套行、否则内容会被覆盖列偏移使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4 类将 .col-md-4
元素向右侧偏移了4个列(column)的宽度。col-sm-offset-0没有列偏移、row-no-gutters没有间距、列排序通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序、
push左边、pull右边、push和pull允许填东西、但是空白不允许填东西嵌套列就是指12分部局、只要让他们的布局等于12就可以(md里可以套md、md、sm、xs他们是样式、这个嵌套列跟样式没太大关系、
只要结果等于12就可以) 当转换成xs样式时,他们两个md-6是上下分布的,因为1:div默认是独占一行的,没有样式,但宽度是100%的 排版h1和div.h1样式是一样的小号文本(<small> ) sub(下标)和sup
(上标)<em>和i是一样的是斜体标签、text-lowercase全改成小写、text-uppercase全改成大写、text-capitalize驼峰式命名(第一个单词的首字母大写)、列表:有序、无序、自定义:dt/dl/dd默认情
况下:dd和dt不在一行