bootstrap思想总结_bootstrap常用知识点总结

api地址：https://v3.bootcss.com/css/#forms

栅格参数：

bootstrap 其实 是把 网页等 分为 了 12分，bootstrap把 根据屏 幕 大小 把屏 幕分 为了 4个层 级，小于 768 像 素的 为超小屏 幕，大于 等于 768 像素的 为小屏 幕，大于 等于992像素的为中等屏幕，大于等于1200像素的则为大屏幕，相应的类前缀见图或查看官方文档。

栅格：

超小屏幕 手机 (<768px) .col-xs-

小屏幕 平板 (≥768px) .col-sm-

中等屏幕 桌面显示器 (≥992px) .col-md-

大屏幕 大桌面显示器 (≥1200px) .col-lg-

排版

标题

HTML 中的所有标题标签，

 到 

 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联(inline)属性的文本赋予标题的样式。在标题内还可以包含  标签或赋予 .small 类的元素，可以用来标记副标题。

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text

h6. Bootstrap heading Secondary text

页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 

 元素和所有段落元素。另外，

 (段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。

...

中心内容

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

...

内联文本元素

Marked text

You can use the mark tag to highlight text.

被删除的文本

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

This line of text is meant to be treated as deleted text.

无用文本

对于没用的文本使用  标签。

This line of text is meant to be treated as no longer accurate.

插入文本

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

This line of text is meant to be treated as an addition to the document.

带下划线的文本

为文本添加下划线，使用  标签。

This line of text will render as underlined

小号文本

对于不需要强调的inline或block类型的文本，使用  标签包裹，其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的  元素被设置不同的 font-size 。

你还可以为行内元素赋予 .small 类以代替任何  元素。

This line of text is meant to be treated as fine print.

着重

通过增加 font-weight 值强调一段文本。

rendered as bold text

斜体

用斜体强调一段文本。

rendered as italicized text

对齐

通过文本对齐类，可以简单方便的将文字重新对齐。

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

改变大小写

通过这几个类可以改变文本的大小写。

Lowercased text.

Uppercased text.

Capitalized text.

缩略语

当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的  元素的增强样式。缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上(对使用辅助技术的用户也可见), 但需要包含 title 属性。

基本缩略语

attr

首字母缩略语

为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。

HTML

地址

让联系信息以最接近日常使用的格式呈现。在每行结尾添加 
 可以保留需要的样式。

Twitter, Inc.

1355 Market Street, Suite 900

San Francisco, CA 94103

P: (123) 456-7890

Full Name

first.last@example.com

引用

在你的文档中引用其他来源的内容。

默认样式的引用

将任何 HTML 元素包裹在 

 中即可表现为引用样式。对于直接引用，我们建议用 

 标签。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

列表

无序列表

排列顺序无关紧要的一列元素。

• ...

有序列表

顺序至关重要的一组元素。

1. ...

内联列表

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

• ...

描述

带有描述的短语列表。

...

...

水平排列的描述

.dl-horizontal 可以让 

...

...

overflow: hidden;

text-overflow: ellipsis;

代码

内联代码

通过  标签包裹内联样式的代码片段。

For example, <section> should be wrapped as inline.

用户输入

通过  标签标记用户通过键盘输入的内容。

To switch directories, type cd followed by the name of the directory.

To edit settings, press ctrl + ,

代码块

多行代码可以使用 

 标签。为了正确的展示代码，注意将尖括号做转义处理。

<p>Sample text here...</p>

变量

通过  标签标记变量。

y = mx + b

表格

基本实例

...

条纹状表格

通过 .table-striped 类可以给 

 之内的每一行增加斑马条纹样式。

...

带边框的表格

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

...

鼠标悬停

通过添加 .table-hover 类可以让 

 中的每一行对鼠标悬停状态作出响应

...

紧缩表格

通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补(padding)均会减半。

...

状态类

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

Class描述

.active

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

.success

标识成功或积极的动作

.info

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

.warning

标识警告或需要用户注意

.danger

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

..............................

其他的看api吧，

api地址：https://v3.bootcss.com/css/#forms

几个单个的例子：

Bootstrap 101 TemplateOptional table caption.

#First NameLast NameUsername

1MarkOtto@mdo

2

JacobThornton@fat

3

Larrythe Bird@twitter