本文介绍了Bootstrap前端框架，包括其定义、使用原因和安装步骤。详细讲解了viewport视口、网格系统，以及Bootstrap的常用类名和组件，如表格、表单、按钮、响应式工具、导航栏和分页。此外，还提到了Bootstrap的模态框、滚动监听等插件的使用方法，帮助读者快速掌握Bootstrap的使用。
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言
本章目标：
1、Bootstrap介绍
2、掌握viewport视口
3、掌握网格系统（栅格系统）
4、掌握Bootstrap常用类名
一、Bootstrap介绍
1.Bootstrap是什么？
- Bootstrap是当下流行的前端框架（界面工具集）；
- 移动端优先的设计理念
- 特点就是灵活简洁，代码优雅，美观大方；
- 其目的是为了让Web开发更敏捷；
- 是Twitter公司的两名前端工程师Mark Otto和Jacob Thornton在2011年发起的，并利用业余时间完成第一个版本的开发；
2.为什么使用Bootstrap
- 生态圈火，不断地更新迭代；
- 提供一套美观大方地界面组件；
- 提供一套优雅的HTML+CSS编码规范；
- 让我们的 Web 开发更简单，更快捷；
3.安装并导入Bootstrap
使用Bootstrap前需要在vscode中安装Bootstrap 3 Snippets插件
下载Bootstrap：
https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
<!-- 引入Bootstrap核心样式文件（必须） -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- 由于Bootstrap的JS插件依赖jQuery，所以必须在引入Bootstrap的js文件之前就引入jQuery -->
<script src="js/jquery.min.js"></script>
<!-- 引入Bootstrap的JS插件 -->
<script src="bootstrap.min.js"></script>
<!-- 自己的脚本文件 -->
<script src="example.js"></script>
<!-- 自己的样式或其他文件 -->
<link rel="stylesheet" href="example.css">
</head>
<body></body>
</html>
二、viewport视口
代码如下（示例）：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
/* initial-scale：初始化缩放
user-scalable:是否允许用户自行缩放（值：yes/no; 1/0）
minimum-scale:最小缩放，一般设置了用户不允许缩放，就没必要设置最小和最大缩放
maximum-scale:最大缩放
*/
- 视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示
- 目前大多数手机浏览器的视口（承载页面的容器）宽度都是980
- 视口的宽度可以通过meta标签设置
- 此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放比例为1:1）
三、网格系统（栅格系统）
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
- xs : 超小屏幕 手机 (<768px)
- sm : 小屏幕 平板 (≥768px)
- md : 中等屏幕 桌面显示器 (≥992px)
- lg : 大屏幕 大桌面显示器 (≥1200px)
<!-- 版心container-->
<div class="container">
<div class="row">
<!-- 先实现占2格 -->
<div class="col-xs-6 col-sm-4 col-md-3">我是第一个</div>
<div class="col-xs-6 col-sm-4 col-md-3">我是第二个</div>
<div class="col-xs-6 col-sm-4 col-md-3">我是第三个</div>
<div class="col-xs-6 col-sm-4 col-md-3">我是第四个</div>
</div>
</div>
四、Bootstrap常用类名
1、常用的Bootstrap组件
（1）表格
.table：为任意 table 添加基本样式 (只有横向分隔线)
<!-- 示例 -->
<table class="table table-bordered table-hover">
（2）表单
.form-horizontal：给表单添加一个基本样式
<!-- 示例 -->
<form action="" method="POST" class="form-horizontal" role="form">
（3）按钮
.btn：为按钮添加基本样式
<!-- 实例 -->
<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>
- success：绿色
- info：蓝色
- warning：橙黄色
- danger：红色
（4）响应式实用工具
hidden-xx : 在某种屏幕下隐藏
visible-xx : 在某种屏幕尺寸下显示
<!-- 示例 -->
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-sm">小型</span>
<span class="visible-sm">✔ 在小型设备上可见</span>
</div>
（5）导航栏
.navbar、.navbar-default：创建一个默认的导航栏
<!-- 示例 -->
<nav class="navbar navbar-default" role="navigation">
（6）分页
.paginationt：在页面上显示分页
<!-- 示例 -->
<ul class="pagination">
2、常用的Bootstrap插件
（1）模态框
.modal fade：可以切换模态框（Modal）插件的隐藏内容
<!-- 示例 -->
<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
</div>
<div class="modal-body">在这里添加一些文本</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">提交更改</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
（2）滚动监听
滚动监听（Scrollspy）插件
<!-- 示例 -->
<body data-spy="scroll" data-target=".navbar-example">
...
<div class="navbar-example">
<ul class="nav nav-tabs">
...
</ul>
</div>
...
</body>
（3）标签页（Tab切换）
标签页（Tab）插件：
通过 data 属性：需要添加 data-toggle=“tab” 或 data-toggle=“pill” 到锚文本链接中。
添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。
<!-- 示例 -->
<ul class="nav nav-tabs">
<li><a href="#identifier" data-toggle="tab">Home</a></li>
...
</ul>
（4）提示工具（Tooltip）插件
通过 data 属性：如需添加一个提示工具（tooltip），只需向一个锚标签添加 data-toggle=“tooltip” 即可。锚的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。
<!-- 示例 -->
<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>
（5）弹出框（Popover）插件
通过 data 属性：如需添加一个弹出框（popover），只需向一个锚/按钮标签添加 data-toggle=“popover” 即可。锚的 title 即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部。
<!-- 示例 -->
<button type="button" class="btn btn-default" title="Popover title"
data-container="body" data-toggle="popover" data-placement="left"
data-content="左侧的 Popover 中的一些内容">
左侧的 Popover
</button>
（6）折叠（Collapse）（手风琴）插件
- data-toggle=“collapse” 添加到您想要展开或折叠的组件的链接上。
- href 或 data-target 属性添加到父组件，它的值是子组件的 id。
- data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上。
<!-- 示例 -->
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
（7）轮播（Carousel）插件
关键类名：carousel…(例如：carousel slide)
<!-- 示例 -->
<div id="carousel-id" class="carousel slide" data-ride="carousel">
（7）附加导航（Affix）插件
通过 data 属性：如需向元素添加附加导航（Affix）行为，只需要向需要监听的元素添加 data-spy=“affix” 即可。请使用偏移来定义何时切换元素的锁定和移动。
<!-- 示例 -->
<ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
<li class="active"><a href="#section-1">第一部分</a></li>
<li><a href="#section-2">第二部分</a></li>
<li><a href="#section-3">第三部分</a></li>
<li><a href="#section-4">第四部分</a></li>
<li><a href="#section-5">第五部分</a></li>
</ul>
> 可以通过修改top值制作吸顶导航
扫一扫
2548
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
