码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstarp相关类

时间:2015-07-06 11:57:22      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

/* 超小屏幕(手机,小于 768px) */
@media (max-width: @screen-xs-max) { ... }

/* 小屏幕(平板,大于等于 768px) */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕(桌面显示器,大于等于 992px) */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕(大桌面显示器,大于等于 1200px) */
@media (min-width: @screen-lg-min) { ... }

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序。

h1. 36px
h2. 30px
h3. 24px
h4. 18px
h5. 14px
h6. 12px

Bootstrap 将全局 font-size 设置为 14px,line-height 设置为 1.428(即20px)。这些属性直接赋予 <body> 元素和所有段落元素。另外,<p> (段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。

p中通过添加 .lead 类可以让段落突出显示。

对于被删除的文本使用 <del> 标签。

内联文本元素<mark>标签。

对于没用的文本使用 <s> 标签。

额外插入的文本使用 <ins> 标签。

为文本添加下划线,使用 <u> 标签。

使用 <small> 标签包裹,其内的文本将被设置为父容器字体大小的 85%。

strong-----粗体
em------斜体

<b> 用于高亮单词或短语,不带有任何着重的意味;
<i> 标签主要用于发言、技术词汇等。

text-lowercase----大写转小写
text-uppercase----小写转大写
text-capitalize----首字母小写转大写

list-unstyled------无样式列表
list-inline--------将所有元素放置于同一行

.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行(dt中的内容与dd中的内容在一行显示)

&lt;-------<
&gt;-------/>
通过 <code> 标签包裹内联样式的代码片段
通过 <kbd> 标签标记用户通过键盘输入的内容。
多行代码可以使用 <pre> 标签。为了正确的展示代码,注意将尖括号做转义处理。
pre可使用 .pre-scrollable 类,其作用是设置 max-height 为 350px ,并在垂直方向展示滚动条。

通过 <var> 标签标记变量。
通过 <samp> 标签来标记程序输出的内容。

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线
.table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。
.table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
.table-bordered 类为表格和其中的每个单元格增加边框。
.table-condensed 类可以让表格更加紧凑,单元格中的内补(padding)均会减半。


通过这些状态类可以为行或单元格设置颜色。

.active ----鼠标悬停在行或单元格上时所设置的颜色

.success ----标识成功或积极的动作

.info -------标识普通的提示信息或动作

.warning ------标识警告或需要用户注意

.danger --------标识危险或潜在的带来负面影响的动作

 

Bootstarp相关类

标签:

原文地址:http://www.cnblogs.com/mumianhua1003/p/4623640.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!