Bootstrap框架基础入门

Bootstrap 介绍
  Bootstrap 是非常流行的前端框架。特点是：灵活简洁、代码优雅、美观大方。它是由Twitter的两名工程师 Mark Otto 和 Jacob Thornton 在2011年开发的。

  简单来说，Bootstrap 让 Web 开发更简单、更快捷。使用 Bootstrap 框架并不代表我们再开发时不用自己写 CSS 样式，而是不用谢绝大多数常见的样式。

官网网站

• 官方网站：https://getbootstrap.com/
• 中文网站：http://www.bootcss.com/

列举几个用 Bootstrap 做的网站：

• Bootstrap 优站精选
• https://mobirise.com/
• http://snappa.io/

Bootstrap 浏览器/设备支持
  Bootstrap 可以在最新的桌面系统和移动端浏览器中很好的工作。
  旧的浏览器可能无法很好的支持。
  下表为 Bootstrap 支持最新版本的浏览器和平台：
* Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器。

一、栅格系统

栅格系统的工作原理：

• “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 通过“行（row）”在水平方向创建一组“列（column）”。
• 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
• 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin也可以用来创建语义化的布局。
• 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container
  元素设置的padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
• 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
• 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
• 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-*
  不存在，也影响大屏幕设备。
  
  

媒体查询：

• 媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。

• Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用，用来创建 Bootstrap网格系统中的关键的分界点阈值。
  
  

     /* 超小屏幕（手机，小于 768px） */
     /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
     /* 小屏幕（平板，大于等于 768px） */
     @media (min-width: @screen-sm-min) { ... }	
  
     /* 中等屏幕（桌面显示器，大于等于 992px） */
     @media (min-width: @screen-md-min) { ... }
  
     /* 大屏幕（大桌面显示器，大于等于 1200px） */
     @media (min-width: @screen-lg-min) { ... }
  

• 有时候也会在媒体查询代码中包含 max-width，从而将 CSS 的影响限制在更小范围的屏幕大小之内。

  @media (max-width: @screen-xs-max) { ... }
  @media (min-width:@screen-sm-min) and (max-width: @screen-sm-max) { ... } 
  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
  @media (min-width: @screen-lg-min) { ... }
  

• 媒体查询有两个部分，先是一个设备规范，然后是一个大小规则。在上面的案例中，设置了下列的规则：

  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
  

• 对于所有带有 min-width: @screen-sm-min 的设备，如果屏幕的宽度小于 @screen-sm-max，则会进行一些处理。

栅格参数：
下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

二、Bootstrap 排版

标题：

HTML 中的所有标题标签，h1 到 h6 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

  <h1>我是标题1 h1</h1> 
  <h2>我是标题2 h2</h2> 
  <h3>我是标题3 h3</h3>
  <h4>我是标题4 h4</h4>
  <h5>我是标题5 h5</h5> 
  <h6>我是标题6 h6</h6>

• 在标题内还可以包含 标签或赋予 .small 类的元素，可以用来标记副标题。
  如果需要向任何标题添加一个内联子标题，只需要简单地在元素两旁添加 ，或者添加 .small class，这样子您就能得到一个字号更小的颜色更浅的文本，如下面实例所示：

  <h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
  <h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
  <h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
  <h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
  <h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
  <h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>
  

• 页面主体：Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予
  body 元素和所有段落元素。另外，p （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

列表：
Bootstrap 支持有序列表、无序列表和定义列表。

• 有序列表：有序列表是指以数字或其他有序字符开头的列表。
• 无序列表：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果您不想显示这些着重号，您可以使用 class .list-unstyled 来移除样式。您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。
• 定义列表：在这种类型的列表中，每个列表项可以包含 dt 和 dd 元素。dt 代表定义术语，就像字典，这是被定义的属于（或短语）。接着，dd 是 dt 的描述。您可以使用 class dl-horizontal 把 dl 行中的属于与描述并排显示。

下面的实例演示了这些类型的列表：

  <h4>有序列表</h4>
  <ol>
  	<li>Item 1</li>
  	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
  </ol>

  <h4>无序列表</h4>
  <ul>
  	<li>Item 1</li>
  	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
  </ul>

  <h4>未定义样式列表</h4>
  <ul class="list-unstyled">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
  </ul>
  
  <h4>内联列表</h4>
  <ul class="list-inline">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
  </ul>

  <h4>定义列表</h4>
  	<dl>
  		<dt>Description 1</dt>
		<dd>Item 1</dd>
		<dt>Description 2</dt>
		<dd>Item 2</dd>
  </dl>

  <h4>水平的定义列表</h4>
  	<dl class="dl-horizontal">
	<dt>Description 1</dt>
	<dd>Item 1</dd>
	<dt>Description 2</dt>
	<dd>Item 2</dd>
  </dl>

运行结果如下：

这里只是列举一下部分的css样式使用方法，如想了解更多，点击官网进行查看，最后希望大家都能学会好用的Bootstrap。