Bootstrap学习

                                                           Bootstrap学习

1：Bootstrap（1）包含了丰富的web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对话框等。（2）自带了13个jQery插件，这些插件为bootstrap中的组件赋予了生命。其中包括：模式对话框、标签页、滚动条、弹出框等。

 

2 :栅格系统（布局）

下面就介绍以下Bootstrap栅格系统的工作原理：

• “行（row）”必须包含在.container中，以便为其赋予合适的排列（aligment）和内补（padding）。

• 使用“行（row）”在水平方向创建一组“列（column）”。

• 你的内容应当放置于“列（column）”内，而且，只有“列（column）”可以作为行（row）”的直接子元素。

• 类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。

• 通过设置padding从而创建“列（column）”之间的间隔（gutter）。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。

• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。

  代码介绍：

  1..container:用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询或值范围内都为container设置了max-width，用以匹配栅格系统。

   2..col-xs-4:这个类通过"-"分为三个部分，第三个部分的数字作为一个泛指，它的范围是1到12。就是可以把一个区域分为12个栏，这个要和row类联合使用。

 

 3：排版

1：提供了.h1到.h6的class,为的是给inline属性的文本赋予标题的样式。

2：在标题内还可以包含<small>标签或.small元素，可以用来标记副标题。

3：小号，着重，斜体，对齐class ：<p>Left aligned text.</p>

强调class：<p>Mae n magna.</p>

       代表着各种不同的颜色

引用选项

 

命名来源:添加<small>标签来注明引用来源。来源名称可以放在<cite>标签里面。

<blockquote>

      <p>生命的意义不仅限于生存，云在青天水在瓶。</p>

    <small>本文来自于：<cite title="http:www.hehehe.com">来源链接</cite></small>

</blockquote>

 

4：表格

鼠标悬停

利用.table-hover可以让<tbody>中的每一行响应鼠标悬停状态。

<table class="table  table-hover">

 

5：按钮

1、选项

使用上面列出的class可以快速创建一个带有样式的按钮。

6：下拉菜单

将下拉菜单触发器和下拉菜单都包裹在.dropdown里，或者另一个声明了position: relative;的元素。然后添加组成菜单的HTML代码

首先看button按钮中有个dropdown-toggle，还有一个data-toggle属性，根据这个属性来弹出下来列表

紧接着ul标签的dropdown-menu应该是和上面button按钮的样式类dropdown-toggle联合使用，在通过aria-labelledby绑定上面的button按钮。

第四个li标签中有个divider其实是一个分割线的样式类。

7：导航

Bootstrap中可用的导航有相似的标记，用基类.nav开头，这是相似的部分。改变修饰类可以改变样式。

标签页注意.nav-tabs类需要.nav基类。：

1.  <h1 class="page-header">标签页</h1>  

2.          <ul class="nav nav-tabs">  

3.              <li class="active"><a href="#">主页</a></li>  

4.              <li><a href="#">属性</a></li>  

5.              <li><a href="#">信息</a></li>  

6.          </ul>