Bootstrap介绍及Bootstrap常用类名

一只小姜丝332

已于 2022-08-25 08:52:39 修改

阅读量1.5k

点赞数 3

文章标签： bootstrap 前端 javascript

于 2022-08-24 21:38:12 首次发布

本文链接：https://blog.csdn.net/qq_50906507/article/details/126509354

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

本章目标：
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 cla

最低0.47元/天解锁文章