标签：版本 sheet link 最新版本 100% 三级 项目 插件 www.
内容：
1.Bootstrap框架大致介绍
2.Bootstrap全局样式
3.常用Bootstrap组件
4.响应式开发
5.JavaScript插件
6.Bootstrap经典实例
7.课后习题练习
参考：
http://www.cnblogs.com/liwenzhou/p/8214637.html
我使用V3版本的Bootstrap，我用的是Bootstrap的CDN来加载Bootstrap的文件
一、Bootstrap框架大致介绍
1.什么是Bootstrap框架
2.为什么要用Bootstrap
在Bootstrap出现之前：
在使用Bootstrap之后： 各种命名都统一并且规范化。 页面风格统一，画面和谐。
3.Bootstrap框架使用
(1)下载Bootstrap相关文件到项目目录下，在HTML中导入下载的相关文件
(2)直接使用CDN导入文件(需连网)，直接复制下面的代码到HTML中即可
1 <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> 2 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 3 4 <!-- 可选的 Bootstrap 主题文件（一般不用引入） --> 5 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 6 7 <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 8 <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
二、Bootstrap全局样式
1.什么是Bootstrap全局样式
排版、按钮、表格、表单、图片等我们常用的HTML元素，Bootstrap中都提供了全局样式；我们只要在基本的HTML元素上通过设置class就能够应用上Bootstrap的样式，从而使我们的页面更美观和谐
下面是一些常用的全局样式，详细全局样式看这里：https://v3.bootcss.com/css/
2.基础全局样式
(1)设置移动设备优先
1 <meta name="viewport" content="width=device-width, initial-scale=1">
(2)布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器, 有两个作此用处的类。注意这两种容器类不能互相嵌套
1 .container 类用于固定宽度并支持响应式布局的容器 2 <div class="container"> 3 ... 4 </div> 5 6 .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器 7 <div class="container-fluid"> 8 ... 9 </div>
(3) Normalize.css
增强跨浏览器表现的一致性，可以使用Normalize.css，这是一个CSS 重置样式库
1 <link href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css" rel="stylesheet">
(4)标题相关
标题
1 <h1>一级标题36px</h1> 2 <h2>二级标题30px</h2> 3 <h3>三级标题24px</h3> 4 <h4>四级标题18px</h4> 5 <h5>五级标题14px</h5> 6 <h6>六级标题12px</h6> 7 8 <!--除了使用h标签，Bootstrap内置了相应的全局样式--> 9 <!--内联标签应用标题样式--> 10 <span class="h1">一级标题36px</span> 11 <span class="h2">二级标题30px</span> 12 <span class="h3">三级标题24px</span> 13 <span class="h4">四级标题18px</span> 14 <span class="h5">五级标题14px</span> 15 <span class="h6">六级标题12px</span>
副标题
1 <!--一级标题中嵌入小标题--> 2 <h1>一级标题<small>小标题</small></h1>
三、常用Bootstrap组件
四、响应式开发
五、JavaScript插件
六、Bootstrap经典实例
七、课后习题练习
标签：版本 sheet link 最新版本 100% 三级 项目 插件 www.
原文地址：https://www.cnblogs.com/wyb666/p/9376893.html
