Boosrtap3.0的入门学习笔记（1）

这次写这篇文章是想和各位分享一下，学新的东西，我们要耐心去看官方文档，只有敢于突破舒适区，才能够有所成长，英语不好没关系，有道词典查一查，学着自己的去翻译和理解，而不是直接看视频和中文的文档，虽然方便，上手也快，但是缺少中间的思考和琢磨，也就是无法将其化为自身的一种见解。通过循序渐进地学习，既可以开拓新的视野，也未将来能够去遇见更大的世界。（特别还有想过四六级的同学，多看有助于提高仔细阅读的分数哦）下面是具体的网址：
http://w3schools.bootcss.com/bootstrap/bootstrap_get_started.html

What is Responsive Web Design?

Responsive web design is about creating web sites which automatically
adjust themselves to look good on all devices, from small phones to large desktops.

什么是响应式网站设计？（面试常问）
响应式布局就是创建一个网站，这个网站可以根据所处不同设备，比如小到手机大到桌面，自动调整自身的规格大小以达到最佳的视觉效果。（我这里是意译）

Bootstrap History
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter,and released as an open source product in August 2011 on GitHub.

Bootstrap的历史
2011年8月，Bootstrap由推特上的两位小伙子：Mark Otto 和 Jacob Thornton 在Github社区创建的是一个开源的作品。

Why Use Bootstrap?
Advantages of Bootstrap:
Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
Responsive features: Bootstrap's responsive CSS adjusts to phones,tablets, and desktops
Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework
Browser compatibility: Bootstrap is compatible with all modernbrowsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)

为什么要使用Bootstrap？
Bootstrap的优点：(不赘述)
1.易于使用;
2.响应式的特征;
3.手机端为主的途径;
4.浏览器兼容性

Bootstrap CDN
If you don't want to download and host Bootstrap yourself, you can include it from a CDN (Content Delivery Network).

接下来我们来快速上手演示，我们要用Bootstrap框架首先要将其引入到我们的项目中，引入可以有两种，一种是直接下载官方的包，然后再引入，另外一种是，引用CDN：
小白，看代码：

不过这个有一个缺点，在敲写代码的时候没有提示，所以这个做法对于新手来说我特别建议，敲代码就是要多敲，而不是想着如何偷懒。

下面呢我要展示的不是傻傻的把官网给你从头过到尾，这TMD大家一看都知道，我要做的是对比，展示一下有用和没用框架的区别。（没有用框架的，小贝自己翻译了，有些粗糙，这只是开始，会越来越好的）看仔细了：
首先，我们来区别在文字文本方面，框架给我们带来了怎样的视觉享受：

    
    
    
    



    Lighter, Secondary Text
    
The small element is used to create a lighter, secondary text in any heading:
    h1 heading secondary text
    h2 heading secondary text
    h3 heading secondary text
    h4 heading secondary text
    h5 heading secondary text
    h6 heading secondary text
    
你好我是汪洋拾贝，我来自美丽的潮州我的父亲帅哥一枚

    Abbreviations
    
The abbr element is used to mark up an abbreviation or acronym:
    
The WHO was founded in 1948.

    Blockquotes
    
The blockquote element is used to present content from another source:
    

 
For 50 years, WWF has been protecting the future of nature.
     The world's leading conservation organization, WWF works in
     100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
 
    

    
To show the quote on the right use the class .blockquote-reverse:
    

 
For 50 years, WWF has been protecting the future of nature. The
     world's leading conservation organization, WWF works in 100 countries
     and is supported by 1.2 million members in the United States and close
     to 5 million globally.
 
    

    Description Lists
    
The dl element indicates a description list:
    

 
Coffee
 
- black hot drink
 
Milk
 
- white cold drink
    
    
    Code Snippets
    
Inline snippets of code should be embedded in the code element:
    
The following HTML elements: span, section,
 and div defines a section in a document.

    
    Keyboard Inputs
    
To indicate input that is typically entered via the keyboard, use the kbd element:
    
Use ctrl + p to open the Print dialog box.

    Multiple Code Lines
    
For multiple lines of code, use the pre element:
    
    Text in a pre element
    is displayed in a fixed-width
    font, and it preserves
    both      spaces and
    line breaks.
    

    
    Contextual Colors
    
Use the contextual classes to provide "meaning through colors":
    
This text is muted.
    
This text is important.
    
This text indicates success.
    
This text represents some information.
    
This text represents a warning.
    
This text represents danger.

    Contextual Backgrounds
    
Use the contextual background classes to provide "meaning through colors":
    
This text is important.
    
This text indicates success.
    
This text represents some information.
    
This text represents a warning.
    
This text represents danger.

接下来是没有用框架的码源：

    
    



    Lighter, Secondary Text
    
small元素，被用于在标题处创建更轻的二级文本：
    h1 heading secondary text
    h2 heading secondary text
    h3 heading secondary text
    h4 heading secondary text
    h5 heading secondary text
    h6 heading secondary text
    secondary text：二级文本
    
你好我是汪洋拾贝，我来自美丽的潮州我的父亲帅哥一枚

    缩写词
    
abbr这个标签用于创建缩略词或者首字母缩略词：
    
The WHO was founded in 1948.

    Blockquato引言标签
    
引言元素（标签）是用来展示来自其他资源的内容:
    

 
50年过去了, WWF 守护了未来的自然资源. 领导世界上的保护组织,
     WWF 效力于全球一百多个国家，受到一百二十万员工美国人的支持，全球有5百万支持者
 
    

    
为了让引言出居右可以使用 class .blockquote-reverse :
    

 
For 50 years, WWF has been protecting the future of nature.
     The world's leading conservation organization, WWF works in
     100 countries and is supported by 1.2 million members in the
     United States and close to 5 million globally.
 
    

    描述列表
    
The dl 元素表明了一个描述列表:
    

 
Coffee
 
- black hot drink
 
Milk
 
- white cold drink
    

    编码片段
    
内联的代码片段应该嵌入在代码元素:
    
下面的HTML页面元素: span,
 section, and div
 定义了文本中的一个部分

    键盘输入
    
表示输入通常是通过键盘输入,使用 kbd 元素:
    
使用 ctrl + p 按钮来打开打印对话框.

    多行代码输入
    
对于多行代码，我们可以使用pre元素:
    
    Text in a pre element
    is displayed in a fixed-width
    font, and it preserves
    both      spaces and
    line breaks.
    

    上下文颜色
    
使用上下文的文本类来显示 "通过不同颜色来表现不同的内容":
    
这个文本是柔和的（text-muted）.
    
这个文本是重要的（text-primary）.
    
这个文本表示成功.
    
这个文本表示了部分信息（text-info）.
    
这个文本代表着警告.(text-waring)
    
这个文本代表了危险.(text-danger)

    上下文的背景颜色
    
使用上下文的背景颜色的类来显示 "通过不同颜色来表现不同的内容"
    
重要文本（bg-primary）.
    
表示成功的文本.
    
表示信息文本.（bg-info）
    
表示危险文本(bg-warning).
    
表示危险文本(bg-danger).