bootstrap常用

如果是中文的网页加上

<!DOCTYPE html>
<html lang="zh-CN">
  ...
</html>
为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。

<meta name="viewport" content="width=device-width, initial-scale=1">
.container 类用于固定宽度并支持响应式布局的容器。（也就是版心，居中于页面距离两端有一定的距离）。

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。（占据了整个可视窗口的宽度）

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
  • “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
  • .row（设置一个容器为栅格） 和 .col-xs-3（超小屏幕 手机 (<768px)）.col-sm-3小屏幕 平板 (≥768px).col-md-3（中等屏幕 桌面显示器 (≥992px)） .col-lg-3（大屏幕 大桌面显示器 (≥1200px)）这些是设置在这个栅格容器中占据了多宽 这种预定义的类，可以用来快速创建栅格布局 如果列数如果超过12 那么超出部分就会换行（例如：两个col-md-5 那么第三个如果超过2第三个就会显示到下一行 ）

  • 栅格参数

    通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

     超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)
    栅格系统行为 总是水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
    .container 最大宽度 None （自动） 750px 970px 1170px
    类前缀 .col-xs- .col-sm- .col-md- .col-lg-
    列（column）数 12
    最大列（column）宽 自动 ~62px ~81px ~97px
    槽（gutter）宽 30px （每列左右均有 15px）
    可嵌套 是
    偏移（Offsets） 是
    列排序 是
  • 设置不同的col- 它包含除它外的哪些？在设置的时候如果你设置为.col-sm-3 就表示为在小屏幕及其以上屏幕是这样的 But在比它小的屏幕上会每一个.col会占用一行

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。 相当于相对自己的位置偏移几个单位。

 

嵌套列

 

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。 可以对它进行嵌套你嵌套的那个元素会被分成为12格。

列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。push为推也就是像右推动几格，pull 为拉 相当于向左拉几格。

 

标题

 

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。

页面主体

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

 

中心内容

 

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

 

 

被删除的文本

 

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

例：nt to be treated as deleted text.

无用文本

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

例：be treated as no longer accurate.

插入文本

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

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

带下划线的文本

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

例：This line of text will render as underlined

小号文本

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

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

着重

通过增加 font-weight 值强调一段文本 标签<strong></strong>。

对齐

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

<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>
实例：

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

改变大小写

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

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p
实例：

lowercased text.

UPPERCASED TEXT.

Capitalized Text.

地址

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

<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>
Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

列表样式ul是 无序ol是有序列表 只是无样式列表有不同

无样式列表

移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。

<ul class="list-unstyled">
  <li>...</li>
</ul>

内联代码

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

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

表格（把类加到table标签中）

基本实例

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

条纹状表格

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

 

带边框的表格

 

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

鼠标悬停

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

紧缩表格

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

状态类

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

Class描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作

响应式表格

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

表单

基本实例

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div>
</form>

内联表单

为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

水平排列的表单

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

被支持的控件

表单布局实例中展示了其所支持的标准表单控件。

输入框

包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

只有正确设置了 type 属性的输入控件才能被赋予正确的样式。

文本域

支持多行文本的表单控件。可根据需要改变 rows 属性。

<textarea class="form-control" rows="3"></textarea>

多选和单选框

多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。

设置了 disabled 属性的单选或多选框都能被赋予合适的样式。对于和多选或单选框联合使用的 <label> 标签，如果也希望将悬停于上方的鼠标设置为“禁止点击”的样式，请将 .disabled 类赋予 .radio、.radio-inline、.checkbox、.checkbox-inline 或 <fieldset>。

下拉列表（select）

使用默认选项或添加 multiple 属性可以同时显示多个选项。

输入框焦点 （获取焦点以后的样式）

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

按钮

预定义样式

使用下面列出的类可以快速创建一个带有预定义样式的按钮

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

尺寸

需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 可以获得不同尺寸的按钮。

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

 

button 元素

 

由于 :active 是伪状态，因此无需额外添加，但是在需要让其表现出同样外观的时候可以添加 .active 类。

图片

响应式图片

在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%; 和 height: auto; 属性，从而让图片在其父元素中更好的缩放。

图片形状

通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状。

<img src="..." alt="..." class="img-rounded">方框
<img src="..." alt="..." class="img-circle">圆框
<img src="..." alt="..." class="img-thumbnail">带边框的方框

关闭按钮

通过使用一个象征关闭的图标，可以让模态框和警告框消失。

 
<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

 

三角符号

通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意，向上弹出式菜单中的三角符号是反方向的。

下拉的三角

<span class="caret"></span>

关于颜色

字体颜色
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
p的背景色
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

快速浮动

 
<div class="pull-left">...</div>左浮
<div class="pull-right">...</div>右浮
posted @ 2017-07-10 19:37  浅悠落0521  阅读(219)  评论(0)  编辑  收藏  举报