排版
标题：
- h1~h6标签
- 样式类：h1~h6
- 小标题：标题内嵌.small；字号更小，颜色更小
段落：
- p标签：字体14px 行高1.428 1/2行高的底部外边距（10px）
- 中心内容：.lead样式类；更大更粗行高更高的段落文本
mark标签
用于突出高亮文本
文本
小号文本
small标签可以设置文本为父元素字体大小的85%
段落文本小号文本
del和s标签
删除线
- del：删除的文本
- s：不太准确或不相关的无用文本
删除的文本
不太准确或不相关的无用文本
ins和u标签
下划线
- ins：额外插入的文本
- u：专有名词
额外插入的文本
专有名词
strong和em标签
强调文本
- strong：加粗
- em：斜体
加粗强调文本
斜体强调文本
b和i标签
- b：高亮显示单词或短语，不带有任何着重意味
- i：用于发言、技术词汇
高亮显示单词或短语，不带有任何着重意味
用于发言、技术词汇
文本对齐方法
| 样式类 | 作用 |
|---|---|
| .text-left | 左对齐 |
| .text-right | 右对齐 |
| .text-center | 居中 |
| .text-justify | 两端对齐 |
| .text-nowrap | 不换行 |
字母大小写
| 样式类 | 作用 |
|---|---|
| .text-lowercase | 大写->小写 |
| .text-uppercase | 小写->大写 |
| .text-capitalize | 首字母大写 |
缩略语
abbr标签：较浅的虚线下边框，鼠标悬停变成问号指针，显示出完整title文本
abbr
地址
address标签：显示联系信息
表格
- .table：基本表格样式
- .table-striped：每一行增加斑马条纹样式
- .table-bordered：增加边框
- .table-hover：鼠标悬停状态响应
- .table-condensed：表格更加紧凑
- 五种状态类：
.active：表示当前活动的信息，应用鼠标悬停颜色。
.success：表示一个成功的或积极的动作，应用绿色。
.info：表示普通中立行为，应用蓝色。
.warning：表示一个需要注意的警告，应用黄色。
.danger：表示一个危险的或潜在的负面动作，应用红色。 - .table-responsive：响应式表格
按钮
基本样式类：
btn
预定义样式类：
| 样式类 | 说明 |
|---|---|
| btn-default | 默认 |
| btn-primary | 提供额外视觉效果，表示一组按钮中的原始动作 |
| btn-success | 成功或积极的动作 |
| btn-info | 警告消息的上下文按钮 |
| btn-warning | 谨慎 |
| btn-danger | 危险 |
| btn-link | 并不强调是一个按钮，看起来更像是一个链接，但同时保持按钮的行为。 |
按钮尺寸：
| 样式类 | 说明 |
|---|---|
| btn-lg | 大按钮 |
| btn-sm | 小按钮 |
| btn-xs | 超小按钮 |
块级按钮：
btn-block
将按钮拉伸至父元素100%宽度，同时变为块级元素。
按钮激活：
active样式类
底色更深、边框颜色更深、向内投射阴影。
按钮禁用：
disabled属性
颜色会变淡50%，并失去渐变，呈现出无法单击的效果
图像
img-responsive：响应式布局
改变图片形状：
| 样式类 | 内容 | 说明 |
|---|---|---|
| img-rounded | 添加border-radius:6px | 获得图像圆角 |
| img-circle | 添加border-radius:500px | 让整个图像变成圆形 |
| img-thumbnail | 添加一些内边距（padding）和一个灰色的边框 | 使图像呈现缩略图样式 |
辅助类
情景文本颜色：
| 样式类 | 说明 |
|---|---|
| text-muted | 柔和文本：浅灰色 |
| text-primary | 主要文本：蓝色 |
| text-success | 成功文本：绿色 |
| text-info | 信息文本：浅蓝色 |
| text-warning | 警告文本：黄色 |
| text-danger | 危险文本：褐色 |
情景文本背景色：
| 样式类 | 说明 |
|---|---|
| bg-primary | 主要背景：蓝色 |
| bg-success | 成功背景：绿色 |
| bg-info | 信息背景：浅蓝色 |
| bg-warning | 警告背景：红色 |
| bg-danger | 危险背景：褐色 |
关闭按钮：
button元素添加close样式类
三角符号（下拉菜单）：
空的span添加caret样式类
快速浮动：
pull-left 向左浮动
pull-right 向右浮动
块级居中显示：.center-block
清除浮动： .clearfix
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>个人简历</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
body{
font-family: "microsoft yahei",arial,sans-serif;
}
.cvheader{
border-bottom: 1px solid #DFDFDF;
padding-top: 30px;
padding-bottom: 20px;
}
.cvheader h1{
margin:0;
}
.address{
background-color: #efb73e;
color: #fff;
padding: 50px;
}
.cvbody{
padding-top: 50px;
}
.cbox{
margin-bottom: 30px;
color: #FFFFFF;
padding: 50px;
}
.green{
background: #2ecc71;
}
.orange{
background: orange;
}
.red{
background-color: #dd4814;
}
.bbox{
border: 1px solid #DFDFDF;
border-radius: 5px;
margin-bottom: 30px;
padding: 50px;
}
.footer{
margin: 30px 0 30px ;
padding: 50px;
background-color: #ccc;
color: #fff;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="container">
<div class="row cvheader">
<!-- 标题 -->
<div class="col-lg-7 col-md-7 col-xs-12">
<h1 class="text-primary">Name</h1>
<p><span class="glyphicon glyphicon-paperclip">some introduction</span></p>
</div>
<!-- 联系方式 -->
<div class="col-lg-3 col-md-3 col-xs-12">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-4">
<p class="address text-center"id="contact">联系</p>
</div>
<div class="col-lg-8 col-md-8 col-xs-8">
<p><span class="glyphicon glyphicon-envelope"> xxxxxxx@yyy.com</span></p>
<p><span class="glyphicon glyphicon-earphone"> 13900000000</span></p>
<p><span class="glyphicon glyphicon-road"> xx省yy市zz区</span></p>
</div>
</div>
</div>
<!-- 头像图片 -->
<div class="col-lg-2 col-md-2 col-xs-12">
<p>
<img src="img/)@%25%5DQ41P$@(1R2~UUP%5BB%60DB.jpg" >
</p>
</div>
</div>
</div>
<!-- 主体区域 -->
<div class="container">
<!-- 左栏 -->
<div class="row cvbody">
<div class="row">
<!-- 个人介绍 -->
<div class="cbox green">
<h4>个人介绍</h4>
<p>
Lorem ipsum...
</p>
</div>
<div class="cbox red">
<h4>个人技能</h4>
<p>
<ul class="list-unstyled">
<li>HTML/CSS/JS</li>
<li>java/J2EE</li>
<li>mysql</li>
<li>Photoshop</li>
</ul>
</p>
</div>
<div class="cbox orange">
<h4>语言水平</h4>
<p><span class="clearfix"></span></p>
</div>
</div>
</div>
<!-- 中间空白列 -->
<div class="col-lg-1 col-md-1 col-xs-12"></div>
<!-- 右栏 -->
<div class="col-lg-5 col-md-5 col-xs-12">
<div class="row">
<div class="bbox">
<h4>教育背景</h4>
<p>Lorem ipsum</p>
</div>
<div class="bbox">
<h4>工作经验</h4>
<p>Lorem ipsum</p>
</div>
<div class="bbox">
<h4>个人爱好</h4>
<p><span class="glyphicon glyphicon-plane"></span> AAA</p>
<p><span class="glyphicon glyphicon-cutlery"></span> AAA</p>
<p><span class="glyphicon glyphicon-music"></span> AAA</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="footer text-center">关注-微博</div>
</div>
</div>
</body>
</html>
353
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
