Bootstrap
2018-12-27 本文已影响0人
陈裔松的技术博客
Bootstrap介绍
概述
Bootstrap是基于HTML，CSS，JS的一个CSS/HTML框架，兼容jQuery。
优点
- 非常好的响应式布局支持
- jQuery插件的支持
- 丰富的组件
- 全新自定义选项
- 改进工具提示
- 支持HTML3 CSS3
- 支持LESS和SASS
下载
Bootstrap官网 => 下载【用于生产环境的 Bootstrap】
引入
- 直接引入
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap.min.js"> - CDN引入
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
整体组织架构
- 栅格系统
- 尺寸和状态样式
- 嵌套子元素
- 基础样式和颜色样式
- 动画样式
- 特殊和并列元素样式
栅格系统
概念
以规则的网络阵列来定义和规范网页中的版面布局以及信息分布。
Bootstrap内置响应式，移动设备优先的流式栅格系统
规则
- <div class="container"></div> 调试内外边距 对齐方式等
- row 默认12列
- 具体内容放在列元素之内，列元素能成为row元素的直接子元素
语法
<div class="row"></div> // 定义一行
<div class="col-md-1"></div> // 定义列(1/12)
<div class="col-md-3"></div> // 定义列(3/12)
<div class="col-md-1 col-md-offset-5"></div>
// 向右偏移3个列，相当于使用margin-left来实现的偏移，所以本元素后的元素都会随之偏移
<div class="col-md-3 col-md-push-7"></div>
// 推动元素向右移动7/12，是通过float来改变位置，本元素后的元素不会随之偏移
<div class="col-md-3 col-md-pull-5"></div>
// 拉动元素向左移动5/12，是通过float来改变位置，本元素前的元素不会随之偏移
<div class="pull-left"></div>
// 相当于让这个元素左浮动
<div class="pull-right"></div>
// 相当于让这个元素右浮动
栅格参数
- 超小屏幕 手机 (<768px)：
col-xs-数字 - 小屏幕 平板 (≥768px)：
col-sm-数字 - 中等屏幕 桌面显示器 (≥992px)：
col-md-数字 - 大屏幕 大桌面显示器 (≥1200px)：
col-lg-数字
<div class="row">
<div class="col-sm-4 col-md-8">1111</div>
<div class="col-sm-8 col-md-4">2222</div>
</div>
// 小屏幕 平板 (≥768px)的时候，1111占4列，2222占8列，因为此时col-sm-4和col-sm-8起作用
// 中等屏幕 桌面显示器 (≥992px)的时候，1111占8列，2222占4列，因为此时col-md-8和col-md-4起作用
模块分类及排版布局
模块分类
- 基础：统一的字号，背景，内外边距...
- 颜色：信息提示(蓝色)，警告(橙色)，报错(红色)，...
- 尺寸：xs(<768px)，sm(>=768 && <992px)，md(>=992 && <1200px)，lg(>=1200px)
- 状态：active，disable，hover，link，...
- 特殊元素：特定类型的组件，nav，button...
- 并列元素：一个元素内有多个子元素
- 嵌套子元素：下拉菜单...
- 动画
基础排版
<span class="h1">我是标题1</span> <!-- 36px -->
<span class="h2">我是标题2</span> <!-- 30px -->
<span class="h3">我是标题3</span> <!-- 24px -->
<span class="h4">我是标题4</span> <!-- 18px -->
<span class="h5">我是标题5</span> <!-- 12px -->
<span class="h6">我是标题6</span> <!-- 6px -->
<span class="lead">今天不错</span> <!-- lead -->
<span title="阳光灿烂">天气不错</span> <!-- 当鼠标移到"天气不错"上的时候，会显示"阳光灿烂" -->
<address>杭州市滨江区</address> <!-- 定义了address标签 -->
<!-- 水平排列li元素 -->
<ul class="list-inline">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!-- 水平排列dt和dd元素 -->
<dl class="dl-horizontal">
<dt>aaa</dt>
<dd>bbb</dd>
</dl>
表格样式
<table class="table"></table> <!-- 让表格宽度占据100% -->
<table class="table-striped"></table> <!-- 让表格内隔行变色 -->
<table class="table-bordered"></table> <!-- 设置表格边框 -->
<table class="table-hover"></table> <!-- 当鼠标移动到表格上的时候，相应行的颜色会有变化 -->
<tr class="active"></tr> <!-- 给当前行加上背景色(当前活动信息) -->
<td class="active"></td> <!-- 给当前数据项加上背景色(当前活动信息) -->
<tr class="success"></tr> <!-- 给当前行加上成功的提示背景色 -->
<tr class="info"></tr> <!-- 给当前行加上信息的提示背景色 -->
<tr class="warning"></tr> <!-- 给当前行加上警告的提示背景色 -->
<tr class="danger"></tr> <!-- 给当前行加上危险的提示背景色 -->
表单样式
<!-- form-inline:<内联表单>让form表单中的某一组元素在一行排列 -->
<!-- form-group:把label和input作为一个组合放在一起 -->
<!-- form-control:比较好的输入框样式 -->
<form class="form-inline">
<div class="form-group">
<label for="em">邮箱</label>
<input type="email" class="form-control" id="em" placeholder="Email">
</div>
<div class="form-group">
<label for="psw">密码</label>
<input type="password" class="form-control" id="psw" placeholder="password">
</div>
</form>
<!-- 一般bootstrap都定义了元素标签名字的类 -->
<input type="checkbox" class="checkbox">
按钮及其他样式
按钮
<button type="button" class="btn">默认样式</button>
<button type="button" class="btn btn-default">默认</button>
<button type="button" class="btn btn-primary">首选项</button>
<button type="button" class="btn btn-success">成功</button>
图片
class="img-rounded" // 四个角有一定的弧度
class="img-cicle" // 椭圆显示图片
class="img-cicle" width="80px" height="80px" // 正圆显示图片
class="img-thumbnail" // 图片外加一个边框
文本
class="text-primary" // 淡蓝色显示文本
class="text-success"
...
其他
<span class="caret"><span/> // 下三角
<div class="pull-right"><div/> // 右浮动
<div class="pull-left"></div> // 左浮动
<div class="btn btn-danger"></div> // 设置为红色按钮，可以用于div元素
<div class="center-block"></div> // 使块元素在父容器中居中
<div class="text-center"></div> // 此容器内的文本将居中显示
<div class="container"></div> // 此容器将在页面中居中
<div class="hidden-xs hidden-sm">4007-888888</div> // 在xs和sm的情况下隐藏元素
// pull-left和pull-right不能用于导航条组件中，
// 排列导航条中的组件时可以使用这些工具类：.navbar-left 或 .navbar-right
基本模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
