布局容器类样式：.container 和 .container-flued
.container 固定宽度而且具有响应式。
.container-flued 自由宽度（100%宽度）
这2个class是直接在body标签下建立一个div标签，class等于这2个中的一个。
然后其他内容全部写在这个div标签中即可！
<!DOCTYPE html>
<html>
<head>
<title>BootStrap基础入门</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="bootstrap3/css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.slim.min.js" ></script>
<script type="text/javascript" src="bootstrap3/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container">
<h1>相信未来，线上义演</h1>
<p>明天会更好明天会更好明天会更好明天会更好明天会更好明天会更好明天会更好明天会更好明天会更好明天会更好明天会更
好明天会更好明天会更好明天会更好明天会更好明天会更好</p>
</div>
</body>
</html>
再看.container-fluid：
只修改了这里，其他地方不变
<div class="container-fluid">
也就是说，container-fluid这个是和页面两边是没有间隔的。而container是有一定间隔的，而且左右两边的间隔相等。
标题样式<h1>~<h6>
<h1>~<h6>样式重写了，基本上做到了兼容性。
<h1>标题H1</h1>
<font class="h1">标题H1</font>
文本对齐样式：.text-left、.text-center、.text-right、.text-justify
.text-left：文本左对齐
.text-right：右对齐
.text-center：居中对齐
.text-justify：两端对齐
<div class="text-left">左对齐:明天会更好明天会更好明天会更好明天会更好</div>
<div class="text-right">右对齐:明天会更好明天会更好明天会更好明天会更好</div>
<div class="text-center">居中对齐:明天会更好明天会更好明天会更好明天会更好</div>
<div class="text-justify">两端对齐:明天会更好明天会更好明天会更好明天会更好</div>
列表样式：
.list-unstyled(无符号)：去掉前面的符号。
.list-inline(行内块)
普通的列表样式：首先是前面有一定的空隙，不是和文本同间隔的。
另外的就是有小圆点，当然，你可以改这个符号。
在BootStrap中，我们只需要在ul上加一个class就可以解决这个问题。
扫一扫
538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
