这次写这篇文章是想和各位分享一下，学新的东西，我们要耐心去看官方文档，只有敢于突破舒适区，才能够有所成长，英语不好没关系，有道词典查一查，学着自己的去翻译和理解，而不是直接看视频和中文的文档，虽然方便，上手也快，但是缺少中间的思考和琢磨，也就是无法将其化为自身的一种见解。通过循序渐进地学习，既可以开拓新的视野，也未将来能够去遇见更大的世界。（特别还有想过四六级的同学，多看有助于提高仔细阅读的分数哦）下面是具体的网址：
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：
小白，看代码：
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">不过这个有一个缺点，在敲写代码的时候没有提示，所以这个做法对于新手来说我特别建议，敲代码就是要多敲，而不是想着如何偷懒。
下面呢我要展示的不是傻傻的把官网给你从头过到尾，这TMD大家一看都知道，我要做的是对比，展示一下有用和没用框架的区别。（没有用框架的，小贝自己翻译了，有些粗糙，这只是开始，会越来越好的）看仔细了：
首先，我们来区别在文字文本方面，框架给我们带来了怎样的视觉享受：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap框架</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h1>Lighter, Secondary Text</h1>
<p>The small element is used to create a lighter, secondary text in any heading:</p>
<h1>h1 heading <small>secondary text</small></h1>
<h2>h2 heading <small>secondary text</small></h2>
<h3>h3 heading <small>secondary text</small></h3>
<h4>h4 heading <small>secondary text</small></h4>
<h5>h5 heading <small>secondary text</small></h5>
<h6>h6 heading <small>secondary text</small></h6>
<p>你好我是汪洋拾贝，我来自美丽的潮州<mark>我的父亲帅哥一枚</mark></p>
<h1>Abbreviations</h1>
<p>The abbr element is used to mark up an abbreviation or acronym:</p>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<h1>Blockquotes</h1>
<p>The blockquote element is used to present content from another source:</p>
<blockquote>
<p>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.</p>
<footer>From WWF's website</footer>
</blockquote>
<p>To show the quote on the right use the class .blockquote-reverse:</p>
<blockquote class="blockquote-reverse">
<p>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.</p>
<footer>From WWF's website</footer>
</blockquote>
<h1>Description Lists</h1>
<p>The dl element indicates a description list:</p>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<!--
Snippets 片段
be embedded in 嵌入
section 部分
-->
<h1>Code Snippets</h1>
<p>Inline snippets of code should be embedded in the code element:</p>
<p>The following HTML elements: <code>span</code>, <code>section</code>,
and <code>div</code> defines a section in a document.</p>
<!--
via prep 渠道 路径
-->
<h1>Keyboard Inputs</h1>
<p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
<h1>Multiple Code Lines</h1>
<p>For multiple lines of code, use the pre element:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
</pre>
<!--
Contextual 上下文的
muted 柔和的
indicate 表明
represent 代表
-->
<h2>Contextual Colors</h2>
<p>Use the contextual classes to provide "meaning through colors":</p>
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>
<h2>Contextual Backgrounds</h2>
<p>Use the contextual background classes to provide "meaning through colors":</p>
<p class="bg-primary">This text is important.</p>
<p class="bg-success">This text indicates success.</p>
<p class="bg-info">This text represents some information.</p>
<p class="bg-warning">This text represents a warning.</p>
<p class="bg-danger">This text represents danger.</p>
</div>
</body>
</html>接下来是没有用框架的码源：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<h1>Lighter, Secondary Text</h1>
<p>small元素，被用于在标题处创建更轻的二级文本：</p>
<h1>h1 heading <small>secondary text</small></h1>
<h2>h2 heading <small>secondary text</small></h2>
<h3>h3 heading <small>secondary text</small></h3>
<h4>h4 heading <small>secondary text</small></h4>
<h5>h5 heading <small>secondary text</small></h5>
<h6>h6 heading <small>secondary text</small></h6>
secondary text：二级文本
<p>你好我是汪洋拾贝，我来自美丽的潮州<mark>我的父亲帅哥一枚</mark></p>
<h1>缩写词</h1>
<p>abbr这个标签用于创建缩略词或者首字母缩略词：</p>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<h1>Blockquato引言标签</h1>
<p>引言元素（标签）是用来展示来自其他资源的内容:</p>
<blockquote>
<p>50年过去了, WWF 守护了未来的自然资源. 领导世界上的保护组织,
WWF 效力于全球一百多个国家，受到一百二十万员工美国人的支持，全球有5百万支持者</p>
<footer>来自WWF官网</footer>
</blockquote>
<p>为了让引言出居右可以使用 class .blockquote-reverse :</p>
<blockquote>
<p>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.</p>
<footer>From WWF's website</footer>
</blockquote>
<h1>描述列表</h1>
<p>The dl 元素表明了一个描述列表:</p>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<h1>编码片段</h1>
<p>内联的代码片段应该嵌入在代码元素:</p>
<p>下面的HTML页面元素: <code>span</code>,
<code>section</code>, and <code>div</code>
定义了文本中的一个部分</p>
<h1>键盘输入</h1>
<p>表示输入通常是通过键盘输入,使用 kbd 元素:</p>
<p>使用 <kbd>ctrl + p</kbd> 按钮来打开打印对话框.</p>
<h1>多行代码输入</h1>
<p>对于多行代码，我们可以使用pre元素:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
</pre>
<h2>上下文颜色</h2>
<p>使用上下文的文本类来显示 "通过不同颜色来表现不同的内容":</p>
<p class="text-muted">这个文本是柔和的（text-muted）.</p>
<p class="text-primary">这个文本是重要的（text-primary）.</p>
<p class="text-success">这个文本表示成功.</p>
<p class="text-info">这个文本表示了部分信息（text-info）.</p>
<p class="text-warning">这个文本代表着警告.(text-waring)</p>
<p class="text-danger">这个文本代表了危险.(text-danger)</p>
<h2>上下文的背景颜色</h2>
<p>使用上下文的背景颜色的类来显示 "通过不同颜色来表现不同的内容"</p>
<p class="bg-primary">重要文本（bg-primary）.</p>
<p class="bg-success">表示成功的文本.</p>
<p class="bg-info">表示信息文本.（bg-info）</p>
<p class="bg-warning">表示危险文本(bg-warning).</p>
<p class="bg-danger">表示危险文本(bg-danger).</p>
</div>
</body>
</html>共同学习，写下你的评论
评论加载中...
作者其他优质文章
