文章目录
Bootstrap基础模板
要在引用bootstrap.js之前引用jquery.js
<!DOCTYPE html>
<html lang="en">
<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</title>
<link rel="stylesheet" href='css/bootstrap.min.css'>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。 我们提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
.container-fluid 类用于 100% 宽度, 占据全部视口(viewport) 的容器。
<div class="container-fluid">
...
</div>
代码示例:
<!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">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href='css/bootstrap.min.css'>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!--布局容器1:container 特点:居中,两端有留白 -->
<div class="container" style="border: 1px solid red;">
1111111111
</div>
<br>
<br>
<!--布局容器2:container-fluid 特点:100%宽度,占据全部视口(viewport)的容器,两端没有留白 -->
<div class="container-fluid" style="border: 1px solid red;">
2222222222
</div>
</body>
</html>
栅格系统
简介
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理:
- “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
- 通过“行(row)”在水平方向创建一组“列(column)”。
- 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
<div class="container" >
<div class="row">
<div class="col-md-4">4列</div>
<div class="col-md-4">4列</div>
<div class="col-md-4">4列</div>
</div>
</div>
- 类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
- 通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding。
- 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
- 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。 例如,三个等宽的列可以使用三个 .col-xs-4 来创建。
- 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
- 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-lg-* 不存在, 也影响大屏幕设备。
栅格参数
代码示例:
<!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">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href='css/bootstrap.min.css'>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-3 col-sm-2 col-xs-1" style="border: 1px solid red;">
0000000000000000
</div>
<div class="col-lg-4 col-md-3 col-sm-2 col-xs-1" style="border: 1px solid red;">
1111111111111111
</div>
<div class="col-lg-4 col-md-3 col-sm-8 col-xs-10" style="border: 1px solid red;">
2222222222222222
</div>
</div>
</div>
</body>
</html>
列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。
代码示例:
<!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">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href='css/bootstrap.min.css'>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!-- 要保证列与列偏移的总数不超过12,不然会导致断行|换行显示 -->
<div class="container">
<div class="row">
<div class="col-md-1" style="background-color: aqua;">1</div>
<div class="col-md-1 col-md-offset-1" style="background-color: red;">1</div>
<div class="col-md-1 col-md-offset-5" style="background-color: forestgreen;">1</div>
</div>
</div>
</body>
</html>
列排序
列排序其实就是改变列的方向,就是改变左右浮动,并没有设置浮动的距离。 在Bootstrap框架的网格系统中是通过添加类名 col-md-push-* 和 col-md-pull-* (其中星号代表移动的列组合数)。往前pull,往后push。
代码示例:
<!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">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href='css/bootstrap.min.css'>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<!-- 列排序其实就是改变列的方向,就是改变左右浮动,并没有设置浮动的距离。 -->
<!-- 列排序后,蓝色会在红色下面 -->
<div class="col-md-1 col-md-push-1" style="background-color:blue;">1</div>
<div class="col-md-1" style="background-color: red;">1</div>
<!-- 绿色往前移动col-md-2 -->
<div class="col-md-1 col-md-pull-2" style="background-color: forestgreen;">1</div>
</div>
</div>
</body>
</html>
列嵌套
Bootstrap框架的网格系统还支持列的嵌套,你可以在一个列中添加一个或者多个行(row)容器,然后在这个行容器中加入列。
代码示例:
<!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">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href='css/bootstrap.min.css'>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6" style="background-color: darkcyan;">
<div class="row">
<div class="col-md-1" style="background-color: violet;">1</div>
<div class="col-md-9" style="background-color: palegoldenrod;">9</div>
<div class="col-md-2" style="background-color: rosybrown;">2</div>
</div>
</div>
<div class="col-md-6" style="background-color: salmon;">6</div>
</div>
</div>
</body>
</html>
常用样式
排版
标题
Bootstrap和普通的HTML页面一样,定义标题都是使用标签 < h1 > 到 < h6 > ,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样。为了让非标题元素和标题使用相同的样式,还特意定义了h1-h6六个类名,同时后面可以紧跟着一行小的副标题< small></ small> 或使用 .small。
代码示例:
<!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">
<title>Bootstrap</title>
<link rel="stylesheet" href='css/bootstrap.min.css'>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!-- Bootstrap对h1到h6的标题效果进行了覆盖 -->
<!-- 提供了对应的类名,为非标签元素设置样式 .h1-.h6 -->
<!-- 副标题 small标签 或 .samll类名 -->
<h1>Bootstrap</h1>