Bootstrap学习笔记

笔记链接https://www.cnblogs.com/sankexin/p/5509955.html

标题 

　　和html一样，bootstrap使用标签<h1>到<h6>,在bootstrap中非标题元素也可以使用:

复制代码

实例

<h1>Bootstrap标题一</h1>

<h2>Bootstrap标题二</h2>

<h3>Bootstrap标题三</h3>

<h4>Bootstrap标题四</h4>

<h5>Bootstrap标题五</h5>

<h6>Bootstrap标题六</h6>

<!--Bootstrap中让非标题元素和标题使用相同的样式-->

实例

<div class="h1">Bootstrap标题一</div>

<div class="h2">Bootstrap标题二</div>

<div class="h3">Bootstrap标题三</div>

<div class="h4">Bootstrap标题四</div>

<div class="h5">Bootstrap标题五</div>

<div class="h6">Bootstrap标题六</div>

文本对齐

　　bootstrap中text-left：左对齐，text-center：居中对齐，text-right：右对齐,text-justify：两端对齐。

列表--无序列表、有序列表

　　<ul>无序

　　<ol>有序

实例

<h5>普通列表</h5>

<ul>

    <li>列表项目</li>

    <li>列表项目</li>

    <li>列表项目</li>

    <li>列表项目</li>

    <li>列表项目</li>

</ul>

<h5>有序列表</h5>

<ol>

      <li>项目列表一</li>

      <li>项目列表二</li>

      <li>项目列表三</li>

</ol>

内联列表

　　通过添加类名“.list-inline”来实现内联列表

实例

<ul class="list-inline">

    <li>W3cplus</li>

    <li>Blog</li>

    <li>CSS3</li>

    <li>jQuery</li>

    <li>PHP</li>

</ul>

列表--水平定义列表

　　Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。

实例

<dl class="dl-horizontal">

    <dt>W3cplus</dt>

    <dd>一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文

　　</dd>

</dl>

bootstrap中在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。

实例

<div>
    <pre class="pre-scrollable">
          <ul>
          <li>...</li>
          <li>...</li>
          <li>...</li>
          </ul>
          <ul>
          <li>...</li>
          <li>...</li>
          <li>...</li>
          </ul>
          <ul>
          <li>...</li>
          <li>...</li>
          <li>...</li>
          </ul>
          <ul>
          <li>...</li>
          <li>...</li>
          <li>...</li>
          </ul>
          <ul>
          <li>...</li>
          <li>...</li>
          <li>...</li>
          </ul>
          <ul>
          <li>...</li>
          <li>...</li>
          <li>...</li>
          </ul>
          <ul>
          <li>...</li>
          <li>...</li>
          <li>...</li>
          </ul>
          <ul>
          <li>...</li>
          <li>...</li>
          <li>...</li>
          </ul>
          <ul>
          <li>...</li>
          <li>...</li>
          <li>...</li>
          </ul>
          <ul>
          <li>...</li>
          <li>...</li>
          <li>...</li>
          </ul>
          
    </pre>
</div>

网格系统

1.实现原理

　　网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

2.工作原理　

　　Bootstrap框架的网格系统工作原理如下：

　　1、数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。

　　2、在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12。

　　3、具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素

　　4、通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（margin）来抵消内距(padding)的影响

实例

    <div class="container">
        <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-8">.col-md-8</div>
        </div>
        <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4">.col-md-4</div>
        </div>
        <div class="row">
            <div class="col-md-3">.col-md-3</div>
            <div class="col-md-6">.col-md-6</div>
            <div class="col-md-3">.col-md-3</div>
        </div>
    </div>

列的嵌套

　　Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列（像前面介绍的一样使用列）。但在列容器中的行容器（row），宽度为100%时，就是当前外部列的宽度。嵌套的列总数也需要遵循不超过12列。不然会造成末位列换行显示。

实例

    <div class="container">
        <div class="row">
            <div class="col-md-8">
                我里面嵌套了一个网格
                <div class="row">
                    <div class="col-md-6">col-md-6</div>
                    <div class="col-md-6">col-md-6</div>
                </div>
            </div>
            <div class="col-md-4">col-md-4</div>
        </div>

        <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-8">
                我里面嵌套了一个网格
                <div class="row">
                    <div class="col-md-4">col-md-4</div>
                    <div class="col-md-4">col-md-4</div>
                    <div class="col-md-4">col-md-4</div>
                </div>
            </div>
        </div>
        <br>
        <br>
        <div class="row">
            <div class="col-md-8">.col-md-8
                <div class="row">
                    <div class="col-md-8">col-md-8</div>
                    <div class="col-md-4">col-md-4</div>
                </div>
            </div>
            <div class="col-md-4">.col-md-4
                <div class="row">
                    <div class="col-md-9">col-md-9</div>
                    <div class="col-md-3">col-md-3</div>
                </div>
            </div>
        </div>
    </div>

基础表单

    单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

　　在Bootstrap框架中，通过定制了一个类名`form-control`，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果。　　

　　1、宽度变成了100%

　　2、设置了一个浅灰色（#ccc）的边框

　　3、具有4px的圆角

　　4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化

　　5、设置了placeholder的颜色为#999

水平表单

Bootstrap框架默认的表单是垂直显示风格，在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：

　　1、在<form>元素是使用类名“form-horizontal”。

　　2、配合Bootstrap框架的网格系统。

　　在<form>元素上使用类名“form-horizontal”主要有以下几个作用：

　　1、设置表单控件padding和margin值。

　　2、改变“form-group”的表现形式，类似于网格系统的“row”。

内联表单

　　在Bootstrap框架中实现内联表单,只需要在<form>元素中添加类名“form-inline”即可。如果你要在input前面添加一个label标签时，会导致input换行显示。如果你必须添加这样的一个label标签，并且不想让input换行，你需要将label标签也放在容器“form-group”中。

表单控件(输入框input)

　　每一个表单都是由表单控件组成。离开了控件，表单就失去了意义。在Bootstrap中使用input时也必须添加type类型，如果没有指定type类型，将无法得到正确的样式，因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型，比如说text类型，对应的是input[type=“text”])的形式来定义样式的。

表单控件(复选框checkbox和单选择按钮radio)

　　1、不管是checkbox还是radio都使用label包起来了

　　2、checkbox连同label标签放置在一个名为“.checkbox”的容器内

　　3、radio连同label标签放置在一个名为“.radio”的容器内

　　在Bootstrap框架中，主要借助“.checkbox”和“.radio”样式，来处理复选框、单选按钮与标签的对齐方式。

表单控件(复选框和单选框按钮水平排列)

　　复选框和单选按钮有时需要水平排列:

　　1、如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”

　　2、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”

表单控件(按钮)

　　按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现：

 　　 ☑  input[type=“submit”]

  　　☑  input[type=“button”]

  　　☑  input[type=“reset”]

 　　 ☑  <button>

　　在Bootstrap框架中的按钮都是采用<button>来实现。

表单控件大小

　　Bootstrap框架还提供了两个不同的类名，用来控制表单控件的高度。这两个类名是：

　　1、input-sm:让控件比正常大小更小

　　2、input-lg:让控件比正常大小更大

　　这两个类适用于表单中的input，textarea和select控件

表单控件状态(焦点状态)

　　表单状态的作用：

　　每一种状态都能给用户传递不同的信息，比如表单有焦点的状态可以告诉用户可以输入或选择东西，禁用状态可以告诉用户不可以输入或选择东西，还有就是表单控件验证状态，可以告诉用户的操作是否正确等。那么在Bootstrap框架中的表单控件也具备这些状态。焦点状态是通过伪类“:focus”来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式，重新添加阴影效果。

　　要让控件在焦点状态下有样式效果，需要给控件添加类名“form-control”

表单控件状态(禁用状态)

 　　Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的，在相应的表单控件上添加属性“disabled”。和其他表单的禁用状态不同的是，Bootstrap框架做了一些样式风格的处理：使用方法为：只需要在需要禁用的表单控件上加上“disabled”即可：在使用了“form-control”的表单控件中，样式设置了禁用表单背景色为灰色，而且手型变成了不准输入的形状。如果控件中不使用类名“form-control”，禁用的控件只会有一个不准输入的手型出来。在Bootstrap框架中，如果fieldset设置了disabled属性，整个域都将处于被禁用状态。对于整个禁用的域中，如果legend中有输入框的话，这个输入框是无法被禁用的。

 表单控件状态(验证状态)

　　在制作表单时，不免要做表单验证。同样也需要提供验证状态样式，在Bootstrap框架中同样提供这几种效果。

　　1、.has-warning:警告状态（黄色）

　　2、.has-error：错误状态（红色）

　　3、.has-success：成功状态（绿色）

　　使用的时候只需要在form-group容器上对应添加状态类名。

　　很多时候，在表单验证的时候，不同的状态会提供不同的 icon，比如成功是一个对号（√），错误是一个叉号（×）等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来，只需要在对应的状态下添加类名“has-feedback”。请注意，此类名要与“has-error”、“has-warning”和“has-success”在一起。在 Bootstrap 的小图标都是使用@font-face来制作。而且必须在表单中添加了一个 span 元素。

表单提示信息

　　Bootstrap框架中使用了一个"help-block"样式，将提示信息以块状显示，并且显示在控件底部。在Bootstrap V2.x版本中还提供了一个行内提示信息，其使用了类名“help-inline”。一般让提示信息显示在控件的后面，也就是同一水平显示。如果你想在BootstrapV3.x版本也有这样的效果，你可以添加这段代码：

按钮是Bootstrap框架核心内容之一

复制代码

    <button class="btn" type="button">基础按钮.btn</button>

    <button class="btn btn-default" type="button">默认按钮.btn-default</button>

    <button class="btn btn-primary" type="button">主要按钮.btn-primary</button>

    <button class="btn btn-success" type="button">成功按钮.btn-success</button>

    <button class="btn btn-info" type="button">信息按钮.btn-info</button>

    <button class="btn btn-warning" type="button">警告按钮.btn-warning</button>

    <button class="btn btn-danger" type="button">危险按钮.btn-danger</button>

    <button class="btn btn-link" type="button">链接按钮.btn-link</button>

    默认按钮

　　Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格，然后通过“.btn-default”定义了一个默认的按钮风格。默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色。使用默认按钮风格也非常的简单，只需要在基础按钮“btn”的基础上增加类名“btn-default”即可：

   多标签支持

　　一般制作按钮除了使用<button>标签元素之外，还可以使用<input type="submit">和<a>标签等。同样，在Bootstrap框架中制作按钮时，除了刚才所说的这些标签元素之外，还可以使用在其他的标签元素上，唯一需要注意的是，要在制作按钮的标签元素上添加类名“btn”。如果不添加是不会有任何按钮效果。

    <button class="btn btn-defalult" type="button">button标签</button>

    <input type="submit" class="btn btn-default" value="input标签按钮"/>

    <span class="btn btn-default">span标签按钮</span>

    <div class="btn btn-default">div标签按钮</div>

    块状按钮

　　Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满整个容器，并且这个按钮不会有任何的padding和margin值。在实际当中，常把这种按钮称为块状按钮

    按钮状态

　　Bootstrap框架针对按钮的状态做了一些特殊处理。在Bootstrap框架中针对按钮的状态效果主要分为两种：活动状态和禁用状态。　Bootstrap按钮的活动状态主要包括按钮的悬浮状态(:hover)，点击状态(:active)和焦点状态（:focus）几种。而且不同风格下的按钮都具有这几种状态效果，只是颜色做了一定的调整

   按钮状态--禁用状态　　

　　在Bootstrap框架中，要禁用按钮有两种实现方式：

　　方法1：在标签中添加disabled属性

　　方法2：在元素标签中添加类名“disabled”

　　两者的主要区别是：

　　“.disabled”样式不会禁止按钮的默认行为，比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为，则需要通过JavaScript这样的语言来处理。对于<a>标签也存在类似问题，如果通过类名“.disable”来禁用按钮，其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。

图像

　　在Bootstrap框架中对于图像的样式风格提供以下几种风格：

　　1、img-responsive：响应式图片，主要针对于响应式设计

　　2、img-rounded：圆角图片

　　3、img-circle：圆形图片

　　4、img-thumbnail：缩略图片

　　使用方法非常简单，只需要在<img>标签上添加对应的类名

图标(一)

　　Bootstrap框架中提供了近200个不同的icon图片，而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。

　　自定义完字体之后，需要对icon设置一个默认样式，在Bootstrap框架中是通过给元素添加“glyphicon”类名来实现，然后通过伪元素“:before”的“content”属性调取对应的icon编码

    <span class="glyphicon glyphicon-search"></span>

    <span class="glyphicon glyphicon-asterisk"></span>

    <span class="glyphicon glyphicon-plus"></span>

    <span class="glyphicon glyphicon-cloud"></span>

图标(二)

    在网页中使用图标也非常的简单，在任何内联元素上应用所对应的样式即可：