引言
- 掌握Boostrap的基本用法
- 学会前端的快速制作
- 学会页面渲染思想
Bootstrap 简介
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。它是一个 CSS/HTML 框架。Bootstrap 提供了优雅的 HTML 和 CSS规范。Bootstrap 一经推出后颇受欢迎，一直是 GitHub 上的热门开源项目。
为什么使用 Bootstrap？
- 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
- 浏览器支持：所有的主流浏览器都支持 Bootstrap。
- 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
- 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
- 它为开发人员创建接口提供了一个简洁统一的解决方案。
- 它包含了功能强大的内置组件，易于定制。
- 它还提供了基于 Web 的定制。
- 它是开源的。
Bootstrap 环境安装
- 下载 Bootstrap
您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。 - Bootstrap 包的内容
基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
CSS：Bootstrap 自带以下特性，全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
Bootstrap 网格系统
-
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
Bootstrap网格系统
-
Bootstrap 网格系统（Grid System）的工作原理网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：
行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
使用行来创建列的水平组。
内容应该放置在列内，且唯有列可以是行的直接子元素。
预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，
表示第一列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。
例如，要创建三个相等的列，则使用三个 .col-xs-4。
Bootstrap网格选项
基本的网格结构
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
- <div class="container">...</div> 元素被添加，确保居中和最大宽度。
媒体查询的用法
- 媒体查询简介
媒体查询是CSS3 的新特性
媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。
实例
如果文档宽度小于 300 像素则修改背景颜色(background-color):
@media screen and (max-width: 800px) {
body {
background-color:lightblue;
}
}
语法：@media [not] 媒体类型 and (媒体特性…) {你的样式}
EX : @media screen and (min-width:600px) and (max-width:900px){…..}
-
媒体查询的设备类型
媒体查询的设备类型
- 媒体查询的媒体特性
媒体特性也就是设备特性
1. 最大宽度max-width @media screen and (max-width:480px)
2. 最小宽度min-width @media screen and (min-width:900px)
3. 多个媒体特性使用 @media screen and (min-width:600px) and (max-width:900px)
4. 设备屏幕的输出宽度Device Width
<link rel="stylesheet" media="screen and (max-device-width:480px)"
href="iphone.css" />
5. not关键词 使用关键词“not”是用来排除某种制定的媒体类型 @media not print and (max-width: 1200px){样式代码}
6. only关键词, only用来指定某种特定的媒体类型
/*在不支持媒体查询的浏览器中解析到带only的媒体查询时，会将only视为媒体类型。（由于没有only这种媒体类型，因此将不会被应用）*/
media="only"
Bootstrap 表格
有了Bootstrap，只需写好html内容结构，加上Bootstrap写好的专用于表格的类样式即可实现精美的效果
表格样式
行列样式<tr><th><td>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 精简表格</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-striped">
<thead>
<tr>
<th>名称</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sachin</td>
</tr>
</tbody>
</table>
</body>
</html>
Bootstrap 字体图标
Bootstrap 捆绑了 200 多种字体格式的字形。
-
首先让我们先来理解一下什么是字体图标?
字体图标是在 Web 项目中使用的图标字体。虽然，Glyphicons Halflings 需要商业许可，但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。 -
获取字体图标
我们已经在 环境安装 章节下载了 Bootstrap 3.x 版本，并理解了它的目录结构。在 fonts 文件夹内可以找到字体图标，它包含了下列这些文件：
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css 文件上。
字体图标使用示例：
<span class="glyphicon glyphicon-user"></span> User
附A: 如何学习Bootstrap
| 基本样式 | 组件 | 插件 |
|---|---|---|
| 按钮 | 字体 | 模态窗口 |
| 表单 | 下拉菜单 | 可切换导航栏 |
| 表格 | 导航栏 | 提示工具 |
| 图片 | 分页 | 折叠 |
| 文本 | 标签 | 轮播 |
| 背景 | 徽章 | |
| 布局 | 超大屏幕 | |
| . | 副标题 | |
| . | 缩略图 | |
| . | 警告 | |
| . | 进度条 | |
| . | 面板 | |
| . | 嵌入效果 |
附B: 特效
面包屑导航
<ul class="breadcrumb">
<li><a href="#">First</a><li>
<li><a href="#">Second</a><li>
<li><a href="#">Third</a><li>
</ul>
进度条
<div class="container" style="margin-top: 50px">
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 10%;">
<span class="sr-only">10% 完成（危险）</span>
</div>
</div>
</div>
轮播图
<div id="myCarousel" class="carousel slide" style="width: 50%;margin:auto">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="https://www.runoob.com/wp-content/uploads/2014/07/slide1.png" alt="First slide">
</div>
<div class="item">
<img src="https://www.runoob.com/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
</div>
<div class="item">
<img src="https://www.runoob.com/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
模态框
<!-- 按钮触发模态框 -->
<button class="btn btn-success" style="margin-top: 50px;margin-left: 50px" data-toggle="modal" data-target="#myModal">
测试模态框
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模态框（Modal）标题
</h4>
</div>
<div class="modal-body">
在这里添加一些文本
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
网友评论