Bootstrap框架

*移动端设备优先

*使用前需在head标签中添加viewport元数据标签和通过meta属性禁用移动端界面缩放功能



1.布局容器

    container可以设置宽度的可响应布局的容器

    container-fluid不可设置宽度,占据100%的宽度


2.棚格系统

    是一种响应式、移动端设备优先的栅格系统,随屏幕或视口(viewport)尺寸的增加,最多可以分配12格。


3.行(row)定义:必须归属于container或container-fluid下

预定义的类:

row是一下所有列(column)的领头军!

-col-xs-(<768px):排列方式水平;超小宽度自动;使用于手机屏;

-col-sm-(750px):随屏幕大小改变;适用于平板屏;

-col-md-(970px):随屏幕大小改变;桌面显示器;

-sol-lg-(1170px):随屏幕大小改变;大屏幕;


*当列大于12时,包含多余列的元素会被挤下去而另起一行。

**克服以上另起一行的问题:

        响应式列重置  clearfix可以使其多余列的元素框并在一行



4.列的偏移

**在class中使用 col-sm-offset-3可以实现向右偏移3个列的宽度;若想清除响应需用到col-sm-offset-0;


5.嵌套列

可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。


6.列排序

通过使用col-md-push-3和col-md-pull-9的类可以实现两个位置的调换


7.元素的使用

    Bootstrap重新设置了字体、标题、段落、等标签的大小;

另外引入:

    lead类  让段落突出显示

    <small>标签可以标记副标题



8.内联文本元素

<mark>标签使字体突出显示

<del>标签删除文本

<s>标签用于没有作用的文本

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

<u>标签  下划线文本

<strong>标签  着重强调

<em>标签  斜体

<address>标签  使文本内容正常显示  空格  回车  字符等

<blockquote>引用文本 中用<p>

在 HTML5 中可以放心使用标签。用于高亮单词或短语,不带有任何着重的意味;而标签主要用于发言、技术词汇等


9.文本对齐

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.


10.缩略语

title=attribute鼠标放文本上有问号;

class=initialism使font-size变小


*11.无样式列表

list-style移除项目符号


12.内联列表

display: inline-block;并添加少量的内补(padding),将所有元素放置于同一行。



**13.水平排列

.dl-horizontal可以让短语及其描述排在一行。

为任意<table>标签添加.table类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。

通过.table-striped类可以给<tbody>之内的每一行增加斑马条纹样式。

添加.table-bordered类为表格和其中的每个单元格增加边框。

通过添加.table-hover类可以让<tbody>中的每一行对鼠标悬停状态作出响应。

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

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

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

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

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



将任何.table元素包裹在.table-responsive元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。


垂直方向的内容截断

响应式表格使用了overflow-y: hidden属性,这样就能将超出表格底部和顶部的内容截断。特别是,也可以截断下拉菜单和其他第三方组件。



***14.表单

不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。

form-control默认宽度为100%

form-inline左对齐

<select>下拉列表框 class="form-control"

<textare>标签设置多行文本输入框

没有设定placeholder时使用<label>设置文本框提示内容

通过为表单添加.form-horizontal类,并联合使用 Bootstrap 预置的栅格类,可以将label标签和控件组水平并排布局。这样做将改变.form-group的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加.row了。

多选框(checkbox)用于选择列表中的一个或多个选项,而单选框(radio)用于从多个选项中只选择一个。


内联单选.radio-inline 和多选框.checkbox-inline

如果需要内没有文字,输入框(input)正是你所期望的。目前只适用于非内联的 checkbox 和 radio。




静态控件

如果需要在表单中将一行纯文本和label元素放置于同一行,为<p>

元素添加.form-control-static类即可。

焦点状态

我们将某些表单控件的默认outline样式移除,然后对:focus状态赋予box-shadow属性

为输入框设置disabled属性可以禁止其与用户有任何交互(焦点、输入等)。被禁用的输入框颜色更浅,并且还添加了not-allowed鼠标状态。

只读 为输入框设置readonly属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅(就像被禁用的输入框一样),但是仍然保留标准的鼠标状态。

你还可以针对校验状态为输入框添加额外的图标。只需设置相应的.has-feedback类并添加正确的图标即可。

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

推荐阅读更多精彩内容