排版
标题:
- 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>