Bootstrap介绍及Bootstrap常用类名

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

文章目录

  • 前言
  • 一、Bootstrap介绍
    • 1.Bootstrap是什么?
    • 2.为什么使用Bootstrap
    • 3.安装并导入Bootstrap
  • 二、viewport视口
  • 三、网格系统(栅格系统)
  • 四、Bootstrap常用类名
    • 1、常用的Bootstrap组件
      • (1)表格
      • (2)表单
      • (3)按钮
      • (4)响应式实用工具
      • (5)导航栏
      • (6)分页
    • 2、常用的Bootstrap插件
      • (1)模态框
      • (2)滚动监听
      • (3)标签页(Tab切换)
      • (4)提示工具(Tooltip)插件
      • (5)弹出框(Popover)插件
      • (6)折叠(Collapse)(手风琴)插件
      • (7)轮播(Carousel)插件
      • (7)附加导航(Affix)插件


前言

本章目标:
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)

	<div class="container">
		<div class="row">
			
			<div class="col-xs-6 col-sm-4 col-md-3">我是第一个div>
			<div class="col-xs-6 col-sm-4 col-md-3">我是第二个div>

你可能感兴趣的:(bootstrap,前端,javascript)