全局样式
Bootstrap中的排版-标题
标题（h1-h6 / .h1-.h6）
副标题（small）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<button class="btn btn-info">Hello</button>
</head>
<body>
<h1>
标题1 <small>小标题</small>
</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<span class="h3">内联标题3</span>
</body>
</html>
Bootstrap中的排版-文本
段落
p标签：默认14px，行高20px，底部外边距10px
Bootstrap中的排版-对齐
.text-left
.text-center
.text-right
Bootstrap中的排版-大小写
.text-lowercase
.text-uppercase
.text-capitalize
<p>
<mark>Bootstrap</mark>是美国<del>Twitter公司</del>的设计师<ins>Mark Otto</ins>和<u>Jacob</u>
Thornton合作<small>基于HTML、CSS、JavaScript </small>开发的<strong>简洁、直观、强悍的前端开发框架</strong>，使得 Web 开发更加快捷。 [1]
Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking
News都使用了该项目。 [2]
国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。 [3]</p>
<p class="text-lowercase">HEllo</p>
<p class="text-uppercase">HEllo</p>
Bootstrap中的排版-表格
带边框的表格:.table-bordered
条纹状表格： .table-striped
悬停变色： .table-hover
紧凑风格： .table-condensed
<!--
.table:默认表格样式，全屏
.striped:条纹状不同背景色
-->
<table class="table table-striped table-border table-hover">
<thead>
<tr>
<td>你好</td>
<td>你好</td>
<td>你好</td>
<td>你好</td>
</tr>
</thead>
<tbody>
<tr class="info">
<td>你好</td>
<td>你好</td>
<td>你好</td>
<td>你好</td>
</tr>
<tr class="success">
<td>你好</td>
<td>你好</td>
<td>你好</td>
<td>你好</td>
</tr>
<tr class="active">
<td>你好</td>
<td>你好</td>
<td>你好</td>
<td>你好</td>
</tr>
<tr class="waring">
<td>你好</td>
<td>你好</td>
<td>你好</td>
<td>你好</td>
</tr>
</tbody>
</table>
Bootstrap中的排版-表单
<!--
form-inline:元素水平排序
form-group：形成一个组件
placeholder：默认提示文本
input-lg:输入框变大
input-sm：变输入框小
添加提示颜色：1.has-error，2必须有control样式，如：control-label，form-control
-->
<from class="form-inline">
<div class="form-group has-error" >
<label class="control-label">这是一个输入框</label>
<input type="text" placeholder="这是一个输入框"
class="form-control input-sm" >
</div>
<div class="form-group ">
<label>这是一个输入框</label> <input type="text" placeholder="这是一个输入框"
class="form-control">
</div>
</from>
Bootstrap中的-按钮
<!--
active:按钮按下状态
btn-block：整行显示
disables="disabled"：禁用
-->
<button class="btn btn-default"> [默认]这是一个按钮</button>
<button class="btn btn-success btn-block"> [成功][整行]这是一个按钮</button>
<button class="btn btn-primary" disables="disabled"> [主要][禁用]这是一个按钮</button>
<button class="btn btn-info active"> [信息][按下状态]这是一个按钮</button>
<button class="btn btn-warning btn-sm "> [警告][变小]这是一个按钮</button>
<button class="btn btn-danger btn-lg"> [危险][加大]这是一个按钮 </button>
<a href="#" class="btn btn-danger" >a 标签按钮</a>
Bootstrap中的图片
圆角 .img-rounded
圆形 .img-circle
带有边框的圆角图形 .img-thumbnail
CSS三种引入方式：内联、页级、外联.
1.内联CSS
内联CSS也可称为行内CSS或者行级CSS，它直接在标签内部引入
2.页级CSS
页级CSS也可称为内部CSS，整体是放在head标签里边的，在style标签里边定义样式，作用范围和字面意思相同，仅限于本页面的元素；如果你写的代码超过了几百行，想想每次把代码页拉到最上边都很烦，所以它在可维护性方面较差
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
div {
width: 65px;
height: 20px;
border: 1px solid;
background: greenyellow;
}
</style>
</head>
- 外联CSS
外联CSS也可称为外部CSS，在实际的项目中通常使用此种方式，它只在页面中使用link或者@import引入即可，可维护性好；并且外联CSS是一个单独的文件，可以作用于多个页面，在修改的时候可以针对性地修改某一块区域，达到多个页面样式同时变更，相较于内联CSS和页级CSS，省去了到每个页面修改的步骤，提高了开发效率，同时一定程度提高了性能。
1007
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
