【Bootstrap】学习笔记(二)——CSS布局

排版

标题:

  • 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>

你可能感兴趣的