Bootstrap 公布了一个新的大版本,解决了汪洋的

那是一段标准的html typical HTML file:



<!DOCTYPE html>  <html>    <head>      <title>Bootstrap 101 Template</title>      <meta name="viewport" content="width=device-width, initial-scale=1.0">    </head>    <body>      <h1>Hello, world!</h1>      <script src=""></script>    </body>  </html>


  • Submenu support on dropdowns. We avoided this for some time as
    we thought it would unnecessarily complicate things, but we’ve
    backtracked on that and opted to add them in. See the docs for more
  • Affix JavaScript plugin. Make anything stick to the top of the
    viewport as you scroll with our newest plugin, built to power our
    new docs navigation.
  • Block level buttons. Add .btn-block to a button to make it
  • State classes on table rows. Better convey success, warning, and
    error messages in tables.
  • Improved disabled states on navs and dropdowns. Where by
    “improve” we mean actually present—just add .disabled to the li.
  • The navbar component is now white by default, with an optional
    class to darken it.
    In order to have two options for the navbar,
    light and dark, we needed to have better defaults. Having a lighter
    default navbar means fewer lines of code as we don’t need to
    override anything for the basic navbar functionality and the
    override it again to restore the default styles. Missing the black?
    Just add .navbar-inverse to get the dark gray navbar back.
  • Improved prepended and appended inputs. No need to place the
    input and .add-on on the same line of code (sorry about that by
    the way). Break them up as you like and they’ll still stick together
    with some crafty font-size working.
  • New base font-size and line-height. 13px/18px is out, 14px/20px
    is in. This also has changed the size, line-height, and margin of
    our heading elements, buttons, and more.
  • Added variable for navbar collapse trigger point. Instead of a
    fixed pixel width of 980px for triggering the collapsed navbar, we
    now use a variable so you can customize it for your projects.
  • Fluid grid offsets. Thanks to our contributors, the fluid grid
    now has offset support to match our fixed (pixel) grid.
  • Fluid grid system variables are no longer fixed percentages.
    Instead, they are calculated in LESS with percentage() based on
    the default, fixed-width grid variables. Math!
  • Removed LESS docs page. We will no longer document variables and
    mixins in two places—rewriting that stuff was painful and took too
    much time. Instead, just checkout the .less files.

To make this a Bootstrapped template, just include the appropriate
CSS and JS files:

                    <ul >                          <li id="fat-menu" >                              <a    data-toggle="dropdown">下拉 <b ></b></a>                              <ul >                                  <li><a  >动作</a></li>                                  <li><a  >另一个动作</a></li>                                  <li><a  >其他</a></li>                                  <li ></li>                                  <li><a  >另一个链接</a></li>                              </ul>                          </li>                      </ul>  


<!DOCTYPE html>  <html>    <head>      <title>Bootstrap 101 Template</title>      <meta name="viewport" content="width=device-width, initial-scale=1.0">      <!-- Bootstrap -->      <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">    </head>    <body>      <h1>Hello, world!</h1>      <script src=""></script>      <script src="js/bootstrap.min.js"></script>    </body>  </html>


And you’re set! With those two files added, you can begin to develop
any site or application with Bootstrap.



  !function ($) {      "use strict"; // jshint ;_;      /* DROPDOWN CLASS DEFINITION    * ========================= */      var toggle = '[data-toggle=dropdown]'      , Dropdown = function (element) {          var $el = $(element).on('', this.toggle)          $('html').on('', function () {              $el.parent().removeClass('open')          })      }        Dropdown.prototype = {            constructor: Dropdown  ,           toggle: function (e) {              var $this = $(this)              , $parent              , isActive                if ($'.disabled, :disabled')) return              //分别通过以下三个途径:              //1 data-target自定义属性               //2 href的属性中的hash(也是ID选择器),               //3这个按钮的直属父节点              $parent = getParent($this)                isActive = $parent.hasClass('open')              //每次页面只能有一个菜单被打开,这是个失败的设计              clearMenus()              //如果没有打开,则打开它              if (!isActive) {                  $parent.toggleClass('open')              }              //让当前菜单项获得焦点              $this.focus()                return false          } ,           keydown: function (e) {              var $this              , $items              , $parent              , isActive              , index              //如果不是上下方向键或回车键,返回              if (!/(38|40|27)/.test(e.keyCode)) return                $this = $(this)                e.preventDefault()              e.stopPropagation()              //如果标识为禁止状态              if ($'.disabled, :disabled')) return              //取得控件的容器              $parent = getParent($this)              //如果处于激活状态              isActive = $parent.hasClass('open')              //如果没有激活或激话了+回车,就触发其点击事件              if (!isActive || (isActive && e.keyCode == 27)) return $              //如果是菜单项(不能是作为分隔线的LI)下的A元素              $items = $('[role=menu] li:not(.divider):visible a', $parent)                if (!$items.length) return              //那么我们取得当前获得焦点的元素作为基准,通过它上下移动              index = $items.index($items.filter(':focus'))                if (e.keyCode == 38 && index > 0) index--                                        // up              if (e.keyCode == 40 && index < $items.length - 1) index++                        // down              if (!~index) index = 0//如果是-1,那么回到第一个              //然后焦点落在它之上              $items              .eq(index)              .focus()          }      }        function clearMenus() {//请空页面上所有显示出来下拉菜单          $(toggle).each(function () {              getParent($(this)).removeClass('open')          })      }      function getParent($this) {          var selector = $this.attr('data-target')  , $parent            if (!selector) {              selector = $this.attr('href')//只能取ID选择器了              selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^s]*$)/, '') //strip for ie7          }            $parent = $(selector)          $parent.length || ($parent = $this.parent())            return $parent      }      /* DROPDOWN PLUGIN DEFINITION     * ========================== */      var old = $.fn.dropdown      $.fn.dropdown = function (option) {          return this.each(function () {              var $this = $(this)              , data = $'dropdown')              if (!data) $'dropdown', (data = new Dropdown(this)))              //这个option从原型来看,也只能是toggle              if (typeof option == 'string') data[option].call($this)          })      }        $.fn.dropdown.Constructor = Dropdown        /* DROPDOWN NO CONFLICT    * ==================== */      $.fn.dropdown.noConflict = function () {          $.fn.dropdown = old          return this      }      /* APPLY TO STANDARD DROPDOWN ELEMENTS     * =================================== */        $(document)//绑定事件      .on('', clearMenus)      .on('click.dropdown', '.dropdown form', function (e) {          e.stopPropagation()      })      .on('', '.dropdown-menu', function (e) {          e.stopPropagation()      })   //这里是用于绑定到某个链接或按钮上,点击它让某个下拉菜单打开      .on(''  , toggle, Dropdown.prototype.toggle)      //绑定键盘事件,方便在菜单项中上下移动      .on('', toggle + ', [role=menu]' , Dropdown.prototype.keydown)    }(window.jQuery);  

全局设定global setting:

<!DOCTYPE html> <html> <head>
<title>bootstrap学习 by 司徒正美</title> <meta
http-equiv=”Content-type” content=”text/html; charset=utf-8″>
<link rel=”stylesheet” /> <script
src=”” >
</script> <script
<script> $(function(卡塔尔(قطر‎{
$(‘.dropdown-toggle’State of Qatar.dropdown(卡塔尔 }卡塔尔(قطر‎ </script> </head>
<body> <div id=”navbar-example” > <div > <div >
<a >项目名称</a> <ul > <li > <a
data-toggle=”dropdown”>下拉 <b ></b></a> <ul
> <li><a >动作</a></li> <li><a
>另三个动作</a></li> <li><a
>其余</a></li> <li ></li> <li><a
>另三个链接</a></li> </ul> </li> <li >
<a data-toggle=”dropdown”>下拉 <b ></b></a>
<ul > <li><a >动作</a></li>
<li><a >另叁个动作</a></li> <li><a
>其余</a></li> <li ></li> <li><a
>另叁个链接</a></li> </ul> </li> </ul>
<ul > <li id=”fat-menu” > <a
data-toggle=”dropdown”>下拉 <b ></b></a> <ul
> <li><a >动作</a></li> <li><a
>另叁个动作</a></li> <li><a
>别的</a></li> <li ></li> <li><a
>另三个链接</a></li> </ul> </li> </ul>
</div> </div> </div> <br/> <br/>
<br/> <br/> <br/> <ul > <li><a
>准绳的链接</a></li> <li id=”menutest1″> <a
data-toggle=”dropdown” > 下拉项 <b ></b> </a>
<ul > <li><a >动作</a></li>
<li><a >另八个动作</a></li> <li><a
>别的</a></li> <li ></li> <li><a
>被间隔的链接</a></li> </ul> </li> <li
> <a data-toggle=”dropdown” > 点击笔者看看 </a> </li>
</ul> </body> </html>

Requires HTML5 doctype

Bootstrap makes use of certain HTML elements and CSS properties that
require the use of the HTML5 doctype. Include it at the beginning of all
your projects.


<!DOCTYPE html>  <html lang="en">    ...  </html>


Typography and links

Bootstrap sets basic global display, typography, and link styles.
Specifically, we:

  • Remove margin on the body
  • Set background-color: white; on the body
  • Use the @baseFontFamily@baseFontSize,
    and @baseLineHeight attributes as our typographic base
  • Set the global link color via @linkColor and apply link underlines
    only on :hover

These styles can be found within scaffolding.less.


Reset via Normalize

With Bootstrap 2, the old reset block has been dropped in favor
of Normalize.css, a project by Nicolas Gallagher and Jonathan Neal that
also powers the HTML5 Boilerplate. While we use much of Normalize within
our reset.less, we have removed some elements specifically for

  //  // Dropdown menus  // --------------------------------------------------      // Use the .menu class on any 

Default grid system

element within the topbar or ul.tabs and you’ll get some superfancy
dropdowns .dropup, .dropdown { position: relative; } .dropdown-toggle {
// The caret makes the toggle a bit too tall in IE7 *margin-bottom:
-3px; } .dropdown-toggle:active, .open .dropdown-toggle { outline: 0; }
// Dropdown arrow/caret // ——————– .caret { display:
inline-block; width: 0; height: 0; vertical-align: top; border-top: 4px
solid @black; border-right: 4px solid transparent; border-left: 4px
solid transparent; content: “”; } // Place the caret .dropdown .caret {
margin-top: 8px; margin-left: 2px; } // The dropdown menu (ul) //
———————- .dropdown-menu { position: absolute; top: 100%;
left: 0; z-index: @zindexDropdown; display: none; // none by default,
but block on “open” of the menu float: left; min-width: 160px; padding:
5px 0; margin: 2px 0 0; // override default ul list-style: none;
background-color: @dropdownBackground; border: 1px solid #ccc; //
Fallback for IE7-8 border: 1px solid @dropdownBorder;
*border-right-width: 2px; *border-bottom-width: 2px;
.border-radius(6px); .box-shadow(0 5px 10px rgba(0,0,0,.2));
-webkit-background-clip: padding-box; -moz-background-clip: padding;
background-clip: padding-box; // Aligns the dropdown menu to right
&.pull-right { right: 0; left: auto; } // Dividers (basically an hr)
within the dropdown .divider { .nav-divider(@dropdownDividerTop,
@dropdownDividerBottom); } // Links within the dropdown menu li > a {
display: block; padding: 3px 20px; clear: both; font-weight: normal;
line-height: @baseLineHeight; color: @dropdownLinkColor; white-space:
nowrap; } } // Hover state // ———– .dropdown-menu li >
a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a
{ text-decoration: none; color: @dropdownLinkColorHover; #gradient >
darken(@dropdownLinkBackgroundHover, 5%)); } // Active state //
———— .dropdown-menu .active > a, .dropdown-menu .active >
a:hover { color: @dropdownLinkColorActive; text-decoration: none;
outline: 0; #gradient > .vertical(@dropdownLinkBackgroundActive,
darken(@dropdownLinkBackgroundActive, 5%)); } // Disabled state //
————– // Gray out text and ensure the hover state remains gray
.dropdown-menu .disabled > a, .dropdown-menu .disabled > a:hover {
color: @grayLight; } // Nuke hover effects .dropdown-menu .disabled >
a:hover { text-decoration: none; background-color: transparent;
background-image: none; // Remove CSS gradient .reset-filter(); cursor:
default; } // Open state for the dropdown // —————————
.open { // IE7’s z-index only goes to the nearest positioned ancestor,
which would // make the menu appear below buttons that appeared later on
the page *z-index: @zindexDropdown; & > .dropdown-menu { display:
block; } } // Right aligned dropdowns // —————————
.pull-right > .dropdown-menu { right: 0; left: auto; } // Allow for
dropdowns to go bottom up (aka, dropup-menu) //
—————————————————— // Just add
.dropup after the standard .dropdown class and you’re set, bro. // TODO:
abstract this so that the navbar fixed styles are not placed here?
.dropup, .navbar-fixed-bottom .dropdown { // Reverse the caret .caret {
border-top: 0; border-bottom: 4px solid @black; content: “”; } //
Different positioning for bottom up menu .dropdown-menu { top: auto;
bottom: 100%; margin-bottom: 1px; } } // Sub menus //
————————— .dropdown-submenu { position: relative; } //
Default dropdowns .dropdown-submenu > .dropdown-menu { top: 0; left:
100%; margin-top: -6px; margin-left: -1px; .border-radius(0 6px 6px
6px); } .dropdown-submenu:hover > .dropdown-menu { display: block; }
// Dropups .dropup .dropdown-submenu > .dropdown-menu { top: auto;
bottom: 0; margin-top: 0; margin-bottom: -2px; .border-radius(5px 5px
5px 0); } // Caret to indicate there is a submenu .dropdown-submenu >
a:after { display: block; content: ” “; float: right; width: 0; height:
0; border-color: transparent; border-style: solid; border-width: 5px 0
5px 5px; border-left-color: darken(@dropdownBackground, 20%);
margin-top: 5px; margin-right: -10px; } .dropdown-submenu:hover >
a:after { border-left-color: @dropdownLinkColorHover; } // Left aligned
submenus .dropdown-submenu.pull-left { // Undo the float // Yes, this is
awkward since .pull-left adds a float, but it sticks to our conventions
elsewhere. float: none; // Positioning the submenu > .dropdown-menu {
left: -100%; margin-left: 10px; .border-radius(6px 0 6px 6px); } } //
Tweak nav headers // —————– // Increase padding from 15px to
20px on sides .dropdown .dropdown-menu .nav-header { padding-left: 20px;
padding-right: 20px; } // Typeahead // ——— .typeahead { z-index:
1051; margin-top: 2px; // give it some space to breathe
.border-radius(@baseBorderRadius); }

Live grid example

The default Bootstrap grid system utilizes 12 columns, making for a
940px wide container without responsive features enabled. With the
responsive CSS file added, the grid adapts to be 724px and 1170px wide
depending on your viewport. Below 767px viewports, the columns become
fluid and stack vertically.



Basic grid HTML

For a simple two column layout, create a .row and add the appropriate
number of .span* columns. As this is a 12-column grid,
each.span* spans a number of those 12 columns, and should always add
up to 12 for each row (or the number of columns in the parent).


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

Given this example, we have .span4 and .span8, making for 12 total
columns and a complete row.


Offsetting columns

Move columns to the right using .offset* classes. Each class increases
the left margin of a column by a whole column. For
example,.offset4 moves .span4 over four columns.


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

Nesting columns

To nest your content with the default grid, add a new .row and set
of .span* columns within an existing .span* column. Nested rows
should include a set of columns that add up to the number of columns of
its parent.


只要在一个已存在的 .span* 列中,嵌套一个新的 .row 列,然后在 .row 列中再加多一组 .span* 列即可。

<div class="row">    <div class="span9">      Level 1 column      <div class="row">        <div class="span6">Level 2</div>        <div class="span3">Level 2</div>      </div>    </div>  </div>




Live fluid grid example 流动网格系统

The fluid grid system uses percents instead of pixels for column widths.
It has the same responsive capabilities as our fixed grid system,
ensuring proper proportions for key screen resolutions and devices.



Basic fluid grid HTML

Make any row “fluid” by changing .row to .row-fluid. The column
classes stay the exact same, making it easy to flip between fixed and
fluid grids.

把稳固结构产生流式布局很简短,把 .row 变成 .row-fluid就可以,列内容不改变,由此在流式架商谈定位构造之间转移非常轻巧。

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

Fluid offsetting

Operates the same way as the fixed grid system offsetting:
add .offset* to any column to offset by that many columns.

<div class="row-fluid">    <div class="span4">...</div>    <div class="span4 offset2">...</div>  </div>

Fluid nesting

Fluid grids utilize nesting differently: each nested level of columns
should add up to 12 columns
. This is because the fluid grid uses
percentages, not pixels, for setting widths.



<div class="row-fluid">    <div class="span12">      Fluid 12      <div class="row-fluid">        <div class="span6">          Fluid 6          <div class="row-fluid">            <div class="span6">Fluid 6</div>            <div class="span6">Fluid 6</div>          </div>        </div>        <div class="span6">Fluid 6</div>      </div>    </div>  </div>



Fixed layout固定布局

Provides a common fixed-width (and optionally responsive) layout with
only <div > required.

用 <div > 实现的简要的中心结构的页面,默感到940px宽。

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


Fluid layout

Create a fluid, two-column page with <div >—great for applications and

 <div > 提供灵活的页面构造,定义了细微和最大开间,具备二个左侧栏。很合乎做应用和文书档案。

<div class="container-fluid">    <div class="row-fluid">      <div class="span2">        <!--Sidebar content-->      </div>      <div class="span10">        <!--Body content-->      </div>    </div>  </div>



Responsive design

Enabling responsive features

Turn on responsive CSS in your project by including the proper meta tag
and additional stylesheet within the <head> of your document. If
you’ve compiled Bootstrap from the Customize page, you need only include
the meta tag.

  1. <metaname=”viewport”content=”width=device-width,
  2. <linkhref=”assets/css/bootstrap-responsive.css”rel=”stylesheet”>

Heads up! Bootstrap doesn’t include responsive features by default at
this time as not everything needs to be responsive. Instead of
encouraging developers to remove this feature, we figure it best to
enable it as needed.