Bootstrap 使用了一些 HTML5 元素和 CSS 属性，所以需要使用 HTML5 文档类型。

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   ...
  4. </html>

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

  1. <meta name="viewport" content="width=device-width, //视口宽度为设备宽度
  2.                                      initial-scale=1.0, //缩放程度
  3.                                      maximum-scale=1.0, //最大缩放级别（可选）
  4.                                      user-scalable=no">//禁止页面缩放（可选）

Bootstrap 使用 Normalize 来建立跨浏览器的一致性。Normalize.css 是一个很小的 CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。

关于布局

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

  • img-responsive 用于img元素

  • container 用于包裹页面上的内容的元素

    • 行需要放在container，并用来创建列的水平组。
    • 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。
    • 行列可相互嵌套，嵌套后的自适应以父级元素为准，而不是设备宽度
    • 要创建三个相等的列，则使用三个 col-xs-4，要是12个列就12个col-xs-1。 
      1. <div class="container">
      2.    <div class="row">
      3.       <div class="col-xs-6 col-md-2 col-md-offset-1"></div>
      4.       <div class="col-xs-6 col-md-3"></div>
      5.       <div class="col-xs-6 col-md-3"></div>
      6.       <div class="col-xs-6 col-md-3"></div>
      7.    </div>
      8.    <div class="row">...</div>
      9. </div>
      10. <div class="container">....
      11. <!--以上代码在手机上就是两行两列，在电脑上是一行四列，其中第一列前面有空白，比其它列宽度小三分之一-->
        //可使用.col-md-push-* 和 .col-md-pull-* 这种类设定显示，col-md-push-6按照我个人的理解，是在左面浮动了6列，然后再插入元素，col-md-pull-3则是在右边浮动了3列，然后从右往左插入元素
      1.  
  • 媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。 
    1. @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
    2. //对于所有带有 min-width: @screen-sm-min 的设备，如果屏幕的宽度小于 @screen-sm-max，则会进行一些处理。

关于排版

  • 关于文本

    1. <small>本行内容是在标签内</small><br>
    2. <strong>本行内容是在标签内</strong><br>
    3. <em>本行内容是在标签内，并呈现为斜体</em><br>
    4. <p class="text-left">向左对齐文本</p>
    5. <p class="text-center">居中对齐文本</p>
    6. <p class="text-right">向右对齐文本</p>
    7. <p class="text-muted">本行内容是减弱的</p>灰
    8. <p class="text-primary">本行内容带有一个 primary class</p>蓝
    9. <p class="text-success">本行内容带有一个 success class</p>绿
    10. <p class="text-info">本行内容带有一个 info class</p>深蓝
    11. <p class="text-warning">本行内容带有一个 warning class</p>黄
    12. <p class="text-danger">本行内容带有一个 danger class</p>红
  • Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 <abbr> title 属性添加了文本）。为了得到一个更小字体的文本，请添加 .initialism 到 <abbr>。 
    1. <abbr title="World Wide Web">WWW</abbr><br>
    2. <abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
  • 使用 <address> 标签，您可以在网页上显示联系信息。
  • 使用<Blockqoute>标签作为引用 
    1. <blockquote>这是一个带有源标题的引用。<small>Someone famous in Source Title</small></blockquote>

  • list-unstyled用于未定义样式列表ul，list-inline用于水平列表ul

  • pre-scrollable使pre可滚动
  • <code>内联显示代码，<pre>显示多行代码

关于表格

  • 通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。 
    1. <div class="table-responsive">
    2.    <table class="table">
    3.       <caption>响应式表格布局</caption>
    4.       <thead>
    5.          <tr>
    6.             <th>产品</th>
    7.             <th>付款日期</th>
    8.             <th>状态</th>
    9.          </tr>
    10.       </thead>
    11.       <tbody>
    12.          <tr>
    13.             <td>产品1</td>
    14.             <td>23/11/2013</td>
    15.             <td>待发货</td>
    16.          </tr>
    17.       </tbody>
    18.    </table>
    19. </div>

关于表单

  • 在form上加上属性role="form"就会应用Bootstrap基本的表单结构，此时默认为垂直表单
  • 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
  • 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。 
      1. <input type="text" class="form-control" placeholder="文本输入"/>
      2. <textarea class="form-control" rows="3"></textarea>
      3. <label for="name">可多选的选择列表</label>
      4.       <select multiple class="form-control">
      5.          <option>1</option>
      6.          <option>2</option>
      7.          <option>3</option>
      8.          <option>4</option>
      9.          <option>5</option>
      10.      </select>
  • 在form加上类calss=form-inline，那么表单元素就会变成内联的
  • 在form加上类class=form-horizontal，那么表单元素就会变成水平的
    • 设置表单控件padding和margin值
    • 改变“form-group”的表现形式，类似于网格系统的“row”。
    • 向标签添加 class .control-label。
  • 复选框和单选框
    • 对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。
  • 当您需要在一个水平表单内的表单标签后放置纯文本时，请在 <p> 上使用 class .form-control-static。

  • 禁用的输入框 input，如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性

  • 对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。
  • Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。
  • .input-lg 和.input-sm可以改变输入框的高度样式
  • help-block   Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在 <input> 后使用 .help-block。 
    1. <input class="form-control" type="text" placeholder="">
    2.    <span class="help-block">一个较长的帮助文本块，超过一行，
    3.    需要扩展到下一行。本实例中的帮助文本总共有两行。</span>

关于按钮

  1. <button type="button" class="btn btn-default">默认按钮</button>
  2.  
  3. <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
  4. <button type="button" class="btn btn-primary">原始按钮</button>
  5.  
  6. <!-- 表示一个成功的或积极的动作 -->
  7. <button type="button" class="btn btn-success">成功按钮</button>
  8.  
  9. <!-- 信息警告消息的上下文按钮 -->
  10. <button type="button" class="btn btn-info">信息按钮</button>
  11.  
  12. <!-- 表示应谨慎采取的动作 -->
  13. <button type="button" class="btn btn-warning">警告按钮</button>
  14.  
  15. <!-- 表示一个危险的或潜在的负面动作 -->
  16. <button type="button" class="btn btn-danger">危险按钮</button>
  17.  
  18. <!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
  19. <button type="button" class="btn btn-link">链接按钮</button>

按钮的大小

  1. <p>
  2.    <button type="button" class="btn btn-primary btn-lg">
  3.       大的原始按钮
  4.    </button>
  5. </p>
  6. <p>
  7.    <button type="button" class="btn btn-primary">
  8.       默认大小的原始按钮
  9.    </button>
  10. </p>
  11. <p>
  12.    <button type="button" class="btn btn-primary btn-sm">
  13.       小的原始按钮
  14.    </button>
  15. </p>
  16. <p>
  17.    <button type="button" class="btn btn-primary btn-xs">
  18.       特别小的原始按钮
  19.    </button>
  20. </p>
  21. <p>
  22.    <button type="button" class="btn btn-primary btn-lg btn-block">
  23.       块级的原始按钮
  24.    </button>
  25. </p>

class为active表示激活按钮

class为disabled表示禁用按钮

在a和input上使用按钮class也能弄成按钮的样子，但是考虑到跨浏览器的问题还是在button上比较好

关于图片

关于图片的样式除了之前提到的img-responsive用于图片的自适应之外还有以下三个样式
.img-rounded 圆角图片

.img-circle 圆形图片

.img-thumbnail 缩略图功能

关于其它样式类

  • .pull-left左浮动
  • .pull-right右浮动
  • center-block内容居中
  • .clearfix清除浮动
  • .caret显示下拉式
  • .close关闭图标

关于不同设备

【Bootstrap基础学习】01 Bootstrap的CSS的更多相关文章

  1. Bootstrap基础学习 ---- 系列文章

    [Bootstrap基础学习]05 Bootstrap学习总结 [Bootstrap基础学习]04 Bootstrap的HTML和CSS编码规范 [Bootstrap基础学习]03 Bootstrap ...

  2. bootstrap基础学习【导航条、分页导航】（五）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. bootstrap基础学习【菜单、按钮、导航】（四）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. bootstrap基础学习【网格系统】（三）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. bootstrap基础学习【表单含按钮】（二）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. bootstrap基础学习【排版】（一）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. 【Bootstrap基础学习】00 序

    其实这样的东西很多了,但是我就是要写. 我写这种鬼东西只是为了监督自己,如果能顺便帮一下别人就更好了. 这个系列的基础学习,不会去看实体书,主要是去看网上的资料和官网. Bootstrap就是对jQu ...

  8. Bootstrap基础学习(一)—表格与按钮

    一.Bootstrap 概述      Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML.CSS.JavaScript 的开源框架.该框架代码简洁 ...

  9. bootstrap基础学习小记（二）排版、列表、代码风格、表格

    排版——标题.副标题.段落(正文文本).强调内容.粗体.斜体.强调相关的类.文本对齐 <!DOCTYPE HTML> <html> <head> <meta ...

  10. Bootstrap 基础学习笔记（一）

    排版 (1)标题 Bootstrap标题样式进行了以下显著的优化重置: 1.重新设置了margin-top和margin-bottom的值,  h1~h3重置后的值都是20px:h4~h6重置后的值都 ...

随机推荐

  1. Nagios 安装配置

    ##Debian 6 安装server # apt-get install nagios* 一路设置好各种密码,成功后访问 http://ip/nagios3 既可,默认用户*nagiosadmin* ...

  2. ASP.NET中彩票项目中的计算复式投注的注数的方法

    从别人做的项目中抽取出的代码:

  3. 【C#】取得并改变图像解析度

    , , bmpOrg.Width, bmpOrg.Height);       g.Dispose();       // 画像を保存       string dirName = Path.GetD ...

  4. 查看iOS模拟器应用的沙箱文件

    iOS 升级到8.3 以后就不能用iFunBox 这样的工具看沙箱里的文件了(非共享的), 而开发时我们的数据库文件又不在共享目录里.关于这个问题,我们可以看模拟器里的沙箱文件, iOS8.0 以后, ...

  5. Maven3路程（二）Eclipse集成Maven

    我的环境: Eclipse:eclipse-jee-juno-SR2-win32 Maven:Maven3.0.5 1.Help->Eclipse Marketplace 2.选中要安装的插件, ...

  6. LoadRunner AJAX TruClient协议Tips and Tricks

    LoadRunner AJAX TruClient协议Tips and Trickshttp://automationqa.com/forum.php?mod=viewthread&tid=2 ...

  7. AndroidTouchGalleryLibrary 优化

    AndroidTouchGalleryLibrary 是一个非常好用的库, 但是使用的时候,需要小心处理,容易引发OutOfMemoryError,同时使用UrlTouchImageView的时候, ...

  8. MSIL 教程（三）：类和异常处理（转）

    转自:http://www.cnblogs.com/Yahong111/archive/2007/08/16/857771.html 续上文[翻译]MSIL 教程(二):数组.分支.循环.使用不安全代 ...

  9. User Settings in WPF

    原文:<User Settings in WPF> Posted on 2014/04/09 =============================================== ...

  10. 疯狂的ASP.NET系列-第一篇：啥是ASP.NET后续

    之前总结到了ASP.NET的七大特点,只总结了2大特点,现继续总结后面的5大特点. (3)ASP.NET支持多语言 这里说的多语言就是多种开发语言,如C#,VB.NET,无论你采用哪种开发语言,最终的 ...