Bootstrap框架个人总结

bootstrap简介

bootstrap是一个支持响应式设计的前端框架。

响应式设计指的是智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。
简单的说，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

bootstrap基础知识预热

HTML 5 文档类型（Doctype）

Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，我们需要使用 HTML5 文档类型（Doctype）。因此，开头需要包含下面的代码段：

<!DOCTYPE html>
        <html>
            ....
        </html>

容器（Container）

<div class="container">
   ...
</div>

bootstrap用Container class包裹页面内容，下面是bootstrap.css 文件中的 .container class

.container {
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }

可见，内边距左右各有15px,外边距是自适应的。
如果要做流式布局，将上述class = "container"改为class = "container-fluid"

网格(栅格)布局

Bootstrap的网格(栅格)布局在没有响应式特性的默认情况下, 采用12 列方式布局，即将每行分为12列。
布局方法：创建一个.row容器，并在容器中加入合适数量的 .span* 列即可。
如果需要流式布局，将class = "row"改为class = "row-fluid"
例如：

• 两列式布局

<div class="row">
    <div class="span4">...</div>
    <div class="span8">...</div>
</div>

上面的代码展示了 .span4 和 .span8 两列，两列的和总共是12个栅格。

• 三列式布局

 <div class="row">
     <div class="span4">...</div>
     <div class="span4">...</div>
     <div class="span4">...</div>
</div>

上面的代码展示了 三列.span4 ，三列的和总共是12个栅格。

可根据需求分配需要的列数，超过12栅格会自动开辟新的一行。

media queries

min-width和max-width

Bootstrap支持几个少数的Media queries, 可以让你的项目更灵活的去适应不同设备和屏幕分辨率。
min-width:最小宽度，即设备尺寸大于这个值时应用样式
max-width:最大宽度，即设备尺寸小于这个值时应用样式
也可结合两者使用：

@media (min-width:300px) and (max-width: 580px) {body{background-color: red;}  }

上述代码表示屏幕宽度在300px和580px时，背景颜色为红色。

在不同设备中隐藏或显示

这个功能还需要linkbootstrap-responsive.css
有以下6种：
.visible-phone：只在手机端显示
.visible-tablet：只在平板显示
.visible-desktop：只在电脑显示
.hidden-phone：只在手机端隐藏
.hidden-tablet：只在平板隐藏
.hidden-desktop：只在电脑隐藏

常用的文字排版标签

<strong>...</strong> ：加粗文字
<em>...</em>：使用斜体

<abbr class="initialism" title="">...</abbr>

<abbr>标签表示使用了简称,title里的值是文字的全称
.initialism类使标签里的文字大写或者使大写的字母稍微缩小。

<blockquote class = "pull-right">..<cite>...</cite>...</blockquote>:
<blockquote>标签标识使用引用的文字
<cite>...</cite>:表示引用的来源
class = "pull-right":表示使文字靠右显示

列表

描述列表如下：

  <dl>
      <dt>Drupal</dt>
          <dd>强大而灵活的CMF</dd>
      <dt>Joomla</dt>
          <dd>简单易用的CMS</dd>
      <dt>Wordpress</dt>
          <dd>优雅的内容发布应用</dd>
  </dl>

描述的词汇用<dt>标注，描述的具体内容用<dd>标注。
如果在<dl>标签中添加类.dl-horizontal，可以更改样式