Bootstrap 公布了一个新的大版本,解决了汪洋的
bug,改良了灵活性和连绵,引入一些很棒的新性情。

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

bootstrap-dropdown组件是个烂东西,笔者读后的总体感到。

根本满含:

<!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="http://code.jquery.com/jquery.js"></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
    info.
  • 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
    full-width.
  • 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="http://code.jquery.com/jquery.js"></script>      <script src="js/bootstrap.min.js"></script>    </body>  </html>

率先下延长菜单当中正是个中第二层的UL成分,类名叫dropdown-menu。下拉菜单经常处于隐蔽状态。大家得以在它的父成分上加个open类名,让它显示出来。它的父成分日常带个dropdown类名,其实是提供了贰个僵持稳固的盈盈块。当然除了dropdown外,你还足以选择用dropup。dropdown是让下拉菜单向下显得,dropup是升高呈现。要开发下拉菜单,平日大家要点击某处让它展现出来。大家称为触发器。这么些触发器带一个data-toggle=dropdown的自定义属性。通过前面包车型客车就学,你们应该隐隐察觉到,data-toggle在bootstrap有独特含义,是让对象对象表现某一类控件,什么data-toggle=button,data-toggle=buttons-checked,data-toggle=radio……不过它还大概有特地的类名dropdown-toggle。触发器能够通过data-target自定义属性钦定指标下拉框张开,也能够经过href属性打开。可是bootstrap的下拉框有严重的排它性,贰个页面只好展开叁个下拉框,也无法透过套嵌建设布局多级下拉框。

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('click.dropdown.data-api', this.toggle)          $('html').on('click.dropdown.data-api', function () {              $el.parent().removeClass('open')          })      }        Dropdown.prototype = {            constructor: Dropdown  ,           toggle: function (e) {              var $this = $(this)              , $parent              , isActive                if ($this.is('.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 ($this.is('.disabled, :disabled')) return              //取得控件的容器              $parent = getParent($this)              //如果处于激活状态              isActive = $parent.hasClass('open')              //如果没有激活或激话了+回车,就触发其点击事件              if (!isActive || (isActive && e.keyCode == 27)) return $this.click()              //如果是菜单项(不能是作为分隔线的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 = $this.data('dropdown')              if (!data) $this.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('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)      .on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) {          e.stopPropagation()      })      .on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) {          e.stopPropagation()      })   //这里是用于绑定到某个链接或按钮上,点击它让某个下拉菜单打开      .on('click.dropdown.data-api touchstart.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)      //绑定键盘事件,方便在菜单项中上下移动      .on('keydown.dropdown.data-api touchstart.dropdown.data-api', 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
src=”;
<script
src=”;
<script> $(function(卡塔尔(قطر‎{
//注意:事件要绑定在UI容器上,并非关闭按键中
$(‘.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.

Bootstrap用到的HTML成分和CSS属性须求HTML5
doctype。因而各种使用Bootstrap的页面都应该包启HTML5注解。

<!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.

以下是它对应的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
Bootstrap.

  //  // 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 >
.vertical(@dropdownLinkBackgroundHover,
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.

做为框架暗中认可的一局部,Bootstrap提供了940px宽,
12列的栅格系统(未有人机联作式开启)。纵然引进了responsive
css文件,那么就能够基于你的设施viewport来退换宽度。倘使设备在767之下,列就能够成为流动

 


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).

因为他是三个12
column的网格,span数加起来总是要对等12或等于他的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.

(row内的具有span都位居同一行内

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.

挪动列到左侧使用offset类,U.S.类扩张右侧距。比如:offset4平移span肆11个列。

<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.

列的内嵌

在Bootstrap中选取静态(non-fluid卡塔尔国栅格比较轻便实现内嵌,
只要在一个已存在的 .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.

依据百分比,而非像素

流式栅格系统中的列宽运用百分比总计宽度而非像素。与像素栅格构造相似,Bootstrap依照设备和分辨率差异提供了不一致的响应性方案。

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.

流式列的内嵌

流式列的内嵌稍微有一点点差异:嵌套column
level应该加起来为12,因为具备的内嵌列都以按百分比分配父列的100%肥瘦。

<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
docs.

 <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,
    initial-scale=1.0″>
  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.