1.Bootstrap基本模板:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> //用最新的IE内核来解析 <meta name="viewport" content="width=device-width, initial-scale=1">2. .page-header类用来写页面的页头,下面自带分割线//移动设备优先,根据屏幕自动缩放<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>Bootstrap 101 Template</title> <link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet"> <script src="bootstrap-3.3.5-dist/js/jquery-1.11.3.min.js"></script> <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--></head><body><h1>你好,世界!</h1></body></html>
3.响应式图片:通过为图片添加 .img-responsive
类可以让图片支持响应式布局。
如:
<img src="baochai.jpg" alt="宝钗" class="img-responsive">不同窗口大小下的运行效果:
4.图片形状:
.img-rounded:圆角图片
5. 使用了.img-circle:圆形图片
.img-thumbnail:带圆角的边框
示例代码:
<img src="baochai.jpg" alt="宝钗" class="img-responsive img-circle">运行效果:
.img-responsive
类的图片要想水平居中,用
.center-block
类,而不用
.text-center
。
如:
<img src="baochai.jpg" alt="宝钗" class="img-responsive img-circle center-block">
运行效果:
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
6. 用.list-unstyled类来清除li的样式
7.快速浮动:
.pull-left :左浮动
.pull-right:右浮动
8.清除浮动
通过为父元素添加 .clearfix
类可以很容易地清除浮动(float
)。
9.情景背景色
.bg-primary
.bg-success
10.辅助样式:
以上内容示例代码:
<h2 class="page-header">清除浮动</h2> <div class="clearfix bg-danger"> <ul class="list-unstyled"> <li class="pull-left"> <a href="#"><img src=" images/03.jpg" class="img-responsive"></a><br> <a href="#">女神</a> </li> <li class="pull-left"> <a href="#"><img src=" images/03.jpg" class="img-responsive"></a><br> <a href="#">女神</a> </li> <li class="pull-left" > <a href="#"><img src=" images/03.jpg" class="img-responsive"></a><br> <a href="#">女神</a> </li> <li class="pull-left"> <a href="#"><img src=" images/01.PNG" class="img-responsive"></a><br> <a href="#">女神</a> </li> <li class="pull-left" > <a href="#"><img src=" images/01.PNG" class="img-responsive"></a><br> <a href="#">女神</a> </li> <li class="pull-left" > <a href="#"><img src=" images/01.PNG" class="img-responsive"></a><br> <a href="#">女神</a> </li> </ul> </div>运行效果:
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
11.CSS组件
12.小三角符号
<span class="caret"></span>
里面不能放任何的东西
13.下拉列表示例代码:
<h2 class="page-header">下拉菜单</h2> <div class="dropdown"> <!-- class="dropdown"不能少,表明整个的这个div是一个下拉列表--> <!--data-toggle="dropdown"就相当于触发器--> <button class="btn bg-primary btn-lg" data-toggle="dropdown">轻松调频 <span class="caret"></span> <!--该span标签中不要放任何内容,但是要记得加class="caret"--> </button> <ul class="dropdown-menu"> <li><a href="#">Easy Morning</a></li> <!-- 内容放在<a></a>标签里面--> <li><a href="#">More to learn</a></li> <li><a href="#">China Drive</a></li> <li><a href="#">The Shuffle</a></li> </ul> </div>运行效果:
添加分割线:
<li class="divider"></li> <!--添加分割线--> <li class="bg-info"><a href="#">落日大道</a></li> <li class="bg-info"><a href="#">轻松咖啡馆</a></li> <li class="bg-info"><a href="#">岁月留声</a></li>
运行效果:
14.按钮组:
15.按钮工具栏:
把一组 <div class="btn-group">
组合进一个 <div class="btn-toolbar">
中就可以做成更复杂的组件。
示例代码:
<h2 class="page-header">按钮组</h2> <div class="btn-toolbar"> <!--btn-toolbar按钮工具栏--> <div class="btn-group btn-group-sm"> <button class="btn bg-warning">选择</button> <button class="btn bg-success">保存</button> <button class="btn bg-warning">透视</button> </div> <div class="btn-group"> <button class="btn bg-info">1</button> <button class="btn bg-info">2</button> <button class="btn bg-info">3</button> </div> <!--垂直按钮组,按钮垂直排列--> <div class="btn-group btn-group-lg btn-group-vertical"> <!--btn-group-vertical设置垂直按钮组,btn-group-lg按钮组的大小--> <button class="btn bg-danger">左</button> <button class="btn bg-primary">中</button> <button class="btn bg-danger">右</button> </div> </div>运行效果:
16.分裂式按钮下拉菜单
示例代码:
<h2 class="page-header">分裂式按钮下拉菜单</h2> <div class="btn-group btn-group-lg"> <button class="btn bg-danger">编程语言</button> <!--此时左边是一个普通的按钮--> <!--右边相当于是把小三角放在了一个单独的按钮里面了,触发器是放在这个按钮里面的,不是左边的按钮--> <button class="btn bg-danger dropdown-toggle" data-toggle="dropdown"> <!--注意: data-toggle="dropdown"是写在button里面,而不是三角span标签里面--> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Java</a></li> <li><a href="#">C#</a></li> <li><a href="#">PHP</a></li> </ul> </div>运行效果: