bootstrap入门
最后更新于：2022-04-01 11:55:18
bootstrap在后台管理系统中使用较多，先前所做的几个项目也是使用的Bootstrap框架，不过并未系统学习过Bootstrap，近期工作没有那么忙了，于是计划系统地学习一下。先简单分享一下Bootstrap表格。
使用Bootstrap，首先要在官网下载bootstrap包，提供了多种方式的下载。官网地址： [http://getbootstrap.com/](http://getbootstrap.com/)
进入官网之后，进入下载页面，第一个是预编译版本下载，包括css,js,font。第二个是源码下载，需要自行编译。第三个是Sass版本，根据自己的需要，自行下载，此处，我们下载的是预编译版本，因为，暂时对less和sass还没有深入学习了解。
使用bootstrap创建的网页头部需要使用html5的文档类型（Doctype）,否则可能会存在浏览器显示不一致的问题，甚至可能面临一些特定情况下的不一致，以至于代码不能通过W3C标准的验证。因此请使用如下的网页头部：
~~~
<!DOCTYPE html>
<html>
....
</html>
~~~
~~~
bootstrap依赖于Jquery,所以在引入bootstrap.min.js之前，需要先引入jquery.js
~~~
~~~
为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签： <meta name = "viewport" content = "width=device-width,initial-scale=1.0">
~~~
width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。
~~~
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
~~~
### 全局显示
~~~
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
~~~
第一条规则设置 body 的默认字体样式为 "Helvetica Neue", Helvetica, Arial, sans-serif。
第二条规则设置文本的默认字体大小为 14 像素。
第三条规则设置默认的行高度为 1.428571429。
第四条规则设置默认的文本颜色为 #333333。
最后一条规则设置默认的背景颜色为白色。
**全局链接样式**
###
通过属性 @link-color 设置全局链接的颜色。
以下是链接的默认样式：
~~~
a:hover,
a:focus {
color: #2a6496;
text-decoration: underline;
}
a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
~~~
### 容器（Container）
~~~
<div class="container">
...
</div>
~~~
Bootstrap 3 的 container class 用于包裹页面上的内容。bootstrap.css 文件中的 .container class。
~~~
.container {
padding-right:15px;
padding-left:15px;
margin-right:auto;
margin-left:auto;}
~~~
通过上面的代码，把 container 的左右外边距（margin-right、margin-left）交由浏览器决定。
请注意，由于内边距（padding）是固定宽度，默认情况下容器是不可嵌套的。
~~~
.container:before,.container:after {
display: table;
content:" ";}
~~~
这会产生伪元素。设置 display 为 table，会创建一个匿名的 table-cell 和一个新的块格式化上下文。:before 伪元素防止上边距崩塌，:after 伪元素清除浮动。
如果 conteneditable 属性出现在 HTML 中，由于一些 Opera bug，围绕上述元素创建一个空格。这可以通过使用 content: " " 来修复。
~~~
.container:after {
clear: both;}
~~~
它创建了一个伪元素，并确保了所有的容器包含所有的浮动元素。
Bootstrap 3 CSS 有一个申请响应的媒体查询，在不同的媒体查询阈值范围内都为 container 设置了max-width，用以匹配网格系统。
~~~
@media(min-width:768px){.container {
width:750px;}
~~~
引入Bootstrap开始使用Bootstrap。关于bootstrap.min.js和bootstrap.js区别仅在于是否压缩，此处我们均引入压缩过会的
~~~
<!doctype html>
<html lang="en">
<head>
<!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="Yvette Lau">
<meta name = "viewport" content = " width = device-width, initial-scale = 1 ">
<title>CSSDemo</title>
<!--css js 文件的引入-->
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css"/>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>
~~~