#Bootstrap >Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 ##Bootstrap 环境安装 **Bootstrap CDN **推荐 本站实例采用的是自建的静态资源库上的Bootstrap资源。
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- 可选的Bootstrap主题文件(一般不使用) -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
##Bootstrap css概览 ###移动设备优先 为了让 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` 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。 ###响应式图像
<img src="..." class="img-responsive" alt="响应式图像">
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}
###全局显示、排版和链接 ####基本的全局显示 Bootstrap 3 使用 `body {margin: 0;}` 来移除 body 的边距。 请看下面有关 body 的设置:
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。 最后一条规则设置默认的背景颜色为白色。 ####排版 使用 @font-family-base、 @font-size-base 和 @line-height-base 属性作为排版样式。
链接样式
通过属性 @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)是固定宽度,默认情况下容器是不可嵌套的。