官网
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。它是一个 CSS/HTML 框架。Bootstrap 提供了优雅的 HTML 和 CSS 规范。Bootstrap 一经推出后颇受欢迎，一直是 GitHub 上的热门开源项目。
Bootstrap 安装是非常容易的。本章将讲解如何下载并安装 Bootstrap，讨论 Bootstrap 文件结构，并通过一个实例演示它的用法。
当您下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构：
如上图所示，可以看到已编译的 CSS 和 JS（bootstrap.），以及已编译压缩的 CSS 和 JS（bootstrap.min.）。同时也包含了 Glyphicons 的字体，这是一个可选的 Bootstrap 主题。
<!DOCTYPE html>
<html><head><title>Bootstrap 模板</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入 Bootstrap --><link href=".min.css" rel="stylesheet"><!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 --><!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 --><!--[if lt IE 9]><script src=".7.0/html5shiv.js"></script><script src=".js/1.3.0/respond.min.js"></script><![endif]--></head><body><h1>Hello, world!</h1><!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --><script src=".js"></script><!-- 包括所有已编译的插件 --><script src="js/bootstrap.min.js"></script></body>
</html>
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
简单地说，网页设计中的网格用于组织内容，让网站易于浏览，并降低用户端的负载。
| 渐进增强 | 优雅降级 |
|---|---|
| 先满足最低级浏览器版本逐渐升级 | 先满足最高级的浏览器逐渐降级满足低级浏览器 |
Bootstrap 官方文档中有关网格系统的描述：
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12
列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
内容
基础的 CSS 是移动设备优先，媒体查询 是针对于平板电脑、台式电脑
响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：
下表总结了 Bootstrap 网格系统如何跨多个设备工作：
| 说明 | 超小设备手机（< 768px） | 大型设备台式电脑（≥ 1200px） | 中型设备台式电脑（≥ 992px） | 大型设备台式电脑（≥ 1200px） |
|---|---|---|---|---|
| 网格行为 | 一直是水平的 | 以折叠开始，断点以上是水平的 | 以折叠开始，断点以上是水平的 | 以折叠开始，断点以上是水平的 |
| 最大容器宽度 | None (auto) | 750px | 970px | 1170px |
| Class 前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列数量和 | 12 | 12 | 12 | 12 |
| 最大列宽 | Auto 60px | 78px | 95px | |
| 间隙宽度 | 30px（一个列的每边分别 15px） | 30px（一个列的每边分别 15px） | 30px（一个列的每边分别 15px） | 30px（一个列的每边分别 15px） |
| 可嵌套 | Yes | Yes | Yes | Yes |
| 偏移量 | Yes | Yes | Yes | Yes |
| 列排序 | Yes | Yes | Yes | Yes |
浏览器支持
| Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|
| 21 | 9 | 3.5 | 4.0 | 9 |
媒体类型在 CSS2 中是一个常见属性，可以通过媒体类型对不同设备指定不同样式。
Screen、All、Print 为最常见的三种媒体类型。
## 媒体特性
媒体查询中的大部分接受 min/max 前缀，用来表达其逻辑关系，表示应用大于等于或小于等于某个值的情况。没有特殊说明都支持 min/max。
语法：@media 媒体类型 and (媒体特性) {你的样式}
max-width 是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：
@media screen and (max-width:480px) {.ads {display:none;}
}
上面表示的是：当屏幕小于或等于 480px 时，页面中包含类样式 .ads 的元素都将被隐藏。
min-width 与 max-width 相反，指的是媒体类型大于或等于指定宽度时，样式生效。
@media screen and (min-width: 900px) {.wrapper {width: 980px;}
}
上面表示的是：当屏幕大于或等于 900px 时，页面中包含类样式 .wrapper 元素的宽度为 980px。
媒体查询可以使用关键词 and 将多个媒体特性结合在一起。也就是说，一个媒体查询中可以包含 0 到多个表达式，表达式又可以包含 0 到多个关键字，以及一种媒体类型。
当屏幕在 600px~900px 之间时，body 的背景色渲染为 #F5F5F5 ，如下所示：
@media screen and (min-width:600px) and (max-width:900px) {body {background-color:#F5F5F5;}
}
Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：
| 标签 | 描述 |
|---|---|
| < table > | 为表格添加基础样式 |
| < thead > | 表格标题行的容器元素（ |
| < tbody > | 表格主体中的表格行的容器元素（ |
| < tr > | 一组出现在单行上的表格单元格的容器元素（< td > 或 < th >） |
| < td > | 默认的表格单元格 |
| < th > | 特殊的表格单元格，用来标识列或行（ 取决于范围和位置 ）。必须在 < thead > 内使用 |
| < caption > | 关于表格存储内容的描述或总结 |
下表样式可用于表格中：
| 类 | 描述 |
|---|---|
| .table | 为任意 添加基本样式 (只有横向分隔线) |
| .table-striped | 在 < tbody > 内添加斑马线形式的条纹 ( IE8 不支持) |
| .table-bordered | 为所有表格的单元格添加边框 |
| .table-hover | 在 |
| .table-condensed | 让表格更加紧凑 |
所有的表格都应该有的特性
下表的类可用于表格的行或者单元格：
| 类 | 描述 |
|---|---|
| .active | 将悬停的颜色应用在行或者单元格上 |
| .success | 表示成功的操作 |
| .info | 表示信息变化的操作 |
| .warning | 表示一个警告的操作 |
| .danger | 表示一个危险的操作 |
如果您想要一个只带有内边距（padding）和水平分割的基本表，请添加 class .table，如下面实例所示：
<table class="table"><caption>基本的表格布局</caption><thead><tr><th>名称</th><th>城市</th></tr></thead><tbody><tr><td>Tanmay</td><td>Bangalore</td></tr><tr><td>Sachin</td><td>Mumbai</td></tr></tbody>
</table>
什么是字体图标？
Bootstrap 捆绑了 200 多种字体格式的字形，在 fonts 文件夹内可以找到字体图标，它包含了下列这些文件：
如需使用图标，只需要简单地使用下面的代码即可：
<span class="glyphicon glyphicon-search"></span>
FontAwesome：/
LineAwesome：
SocialIcons：.php
阿里巴巴矢量图标库：/
下一节Spring
本文发布于:2024-01-28 08:24:37，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/17064014816093.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
