Bootstrap框架

发布时间：2020-12-17 20:51:23 所属栏目：安全来源：网络整理

导读：内容： 1.Bootstrap框架大致介绍 2.Bootstrap全局样式 3.常用Bootstrap组件 4.响应式开发 5.JavaScript插件 6.Bootstrap经典实例 7.课后习题练习 ? 参考： http://www.cnblogs.com/liwenzhou/p/8214637.html 官方地址：https://getbootstrap.com 中文地址：h

内容：

1.Bootstrap框架大致介绍

2.Bootstrap全局样式

3.常用Bootstrap组件

4.响应式开发

5.JavaScript插件

6.Bootstrap经典实例

7.课后习题练习

参考：

http://www.cnblogs.com/liwenzhou/p/8214637.html

官方地址：https://getbootstrap.com

中文地址：http://www.bootcss.com/

我使用V3版本的Bootstrap，我用的是Bootstrap的CDN来加载Bootstrap的文件

一、Bootstrap框架大致介绍

1.什么是Bootstrap框架

Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架
是为实现快速开发Web应用程序而设计的一套前端工具包
支持响应式布局，并且在V3版本之后坚持移动设备优先

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>

3.栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

(1)简介?

栅格系统用于通过一系列的行与列的组合来创建页面布局，你的内容可以放入创建好的布局中

(2)简单栅格系统实例

三、常用Bootstrap组件

四、响应式开发

五、JavaScript插件

六、Bootstrap经典实例

七、课后习题练习

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!