bootstrap样式

一、列组合


二、列偏移

偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如,.col-xs-*类不支持偏移,但是它们可以简单地通过使用一个空的单元格来实现该效果。为了在大屏幕显示器上使用偏移,请使用.col-md-offset-*类。这些类会把一个列的左外边距(margin)增加*列,其中*范围是从1到11。

三、列嵌套

为了在内容中嵌套默认的网格,请添加一个新的 .row,并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列,这组列个数不能超过12(其实,没有要求你必须占满12列)。

四、列排序

Bootstrap 网格系统另一个完美的特性,就是您可以很容易地以一种顺序编写列,然后以另一种顺序显示列。可以很轻易地改变带有.col-md-push-*和.col-md-pull-*类的内置网格列的顺序,其中*范围是从1到11。


                                           响应式栅格

                                             基础排版

一、标题

bootstap为传统的标题h1~h6重新定义了标准的样式,使得在所有浏览器下显示效果都一样,具体定义规则如下


二、页面主题

一般在默认情况下,Bootstrap为字体设置了全局的大小为12px,行间距line-height为字体大小的1.428倍既20px。段落元素p会有一个额外的margin-bottom,大小是行间距的一半(默认为10px),若果想让一段文字突出显示,可以使用.lead样式,嘁作用主要是增大字体大小,粗细,行间距和margin-bottom。

三、列表

1.内联列表:网页中很多时候使用的列表都是横向的,因此bootstrap就封装了这个特性(list-inline)

2.水平定义列表:Bootstrap提供了一个dl-horizontal样式,通过在dl元素上应用该class,实现定义列表水平显示(dl-horizontal)

四、表单

基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤:

1.向父元素添加 role="form"

2.把标签和控件放在一个带有 class .form-group 的中。这是获取最佳间距所必需的。

3.向所有的文本元素 向所有的文本元素 <input><textarea>和<select>添加 class ="form-control" 。

实例

内联表单

如果需要创建一个表单,它的所有元素是内联的,向左对齐的,标签是并排的,向标签添加 class .form-inline

水平表单

水平表单与其他表单不仅标记的数量上不同,而且表单的呈现形式也不同。如需创建一个水平布局的表单,请按下面的几个步骤进行:

1.向父元素添加 class .form-horizontal

2.把标签和控件放在一个带有 class .form-group 的中。

3.向标签添加 class .control-label

输入框(Input)

最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持,包括:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。适当的 type 声明是必需的,这样才能让 input 获得完整的样式。

文本框(Textarea)

当您需要进行多行输入的时,则可以使用文本框 textarea。必要时可以改变 rows 属性(较少的行 = 较小的盒子,较多的行 = 较大的盒子)。

复选框(Checkbox)和单选框(Radio)

1.复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。

2.当创建表单时,如果您想让用户从列表中选择若干个选项时,请使用 checkbox。如果您限制用户只能选择一个选项,请使用 radio

3.对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class,控制它们显示在同一行上。

选择框(Select)

1.当您想让用户从多个选项中进行选择,但是默认情况下只能选择一个选项时,则使用选择框。

2.使用 <select> 展示列表选项,通常是那些用户很熟悉的选择列表,比如州或者数字。

3.使用 multiple="multiple" 允许用户选择多个选项。

静态控件

当您需要在一个水平表单内的表单标签后放置纯文本时,在<p>使用 class .form-control-static

表单控件状态

除了 :focus 状态(即,用户点击 input 或使用 tab 键聚焦到 input 上),Bootstrap 还为禁用的输入框定义了样式,并提供了表单验证的 class。

输入框焦点

当输入框 input 接收到 :focus 时,输入框的轮廓会被移除,同时应用 box-shadow

禁用的输入框 input

如果您想要禁用一个输入框 input,只需要简单地添加 disabled 属性,这不仅会禁用输入框,还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。

禁用的字段集 fieldset

对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。

验证状态

Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class(.has-warning、 .has-error 或 .has-success)即可使用验证状态。

表单控件大小

可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。下面的实例演示了这点:

表单帮助文本

Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块,在<input>后使用 .help-block

                                            Bootstrap 按钮

一、按钮样式

二、按钮大小



三、按钮组

在 div 中直接使用 .btn-group 可以创建按钮组

四、自适应大小的按钮组

可以通过 .btn-group-justified 类来设置自适应大小的按钮组。

五、内嵌下拉菜单的按钮组

按钮组内嵌的按钮可以设置下拉菜单

实例

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,001评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,210评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,874评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,001评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,022评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,005评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,929评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,742评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,193评论 1 309
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,427评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,583评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,305评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,911评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,564评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,731评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,581评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,478评论 2 352