首先把模板代码上上来:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" /> <!--判断IE9 用来支持HTML5 html5shiv.min.js-没有那个元素，就创建那个元素 respond.min.js支持响应式布局的 --> <!--[if lt IE 9]> <script src="js/html5shiv.min.js"></script> <script src="js/respond.min.js"></script> <![endif]--> <title>BootStrap基础入门</title> </head> <body style="background-color: #CCCCCC;"> <div class="container" style="background-color: #FFFFFF;"> </div> <script type="text/javascript" src="js/jquery.slim.min.js"></script> <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </body> </html>
图片样式
.img-responsive：直接为图片添加该样式，可以实现响应式图片。
.center-block：图片居中样式，而不能使用text-center样式。
图片形状样式：.img-rounded(圆角图片)、.img-circle(圆形图片)、.img-thumbnail(边框圆角)
<h2 class="page-header">图片样式应用</h2> <div> <img class="img-responsive img-thumbnail center-block" src="img/011.jpg" /> <p>文字文字文字文字文字文字文字文字文字文字文字文字</p> </div>
辅助类样式
文本颜色类：.text-muted(柔和的)、.text-primary、.text-success、.text-info、.text-warning、.text-danger
背景颜色类：.bg-primary、.bg-success、.bg-info、.bg-warning、.bg-danger
三角符号：
快速浮动类：.pull-left(左浮动)、.pull-right(右浮动)
清除浮动：为父元素添加 .clearfix 可以清除浮动。
让内容块网页居中：
<h2 class="page-header">清除浮动的应用</h2> <div class="clearfix" style="border: 1px solid red;width: 340px;"> <ul class="list-unstyled"> <li class="pull-left" style="padding: 10px;"> <div class="text-center"> <a href=""><img src="img/001.png" /></a><br /> <a href="">文字1</a> <span class="caret"></span> </div> </li> <li class="pull-left" style="padding: 10px;"> <div class="text-center"> <a href=""><img src="img/002.png" /></a><br /> <a href="">文字2</a> </div> </li> <li class="pull-left" style="padding: 10px;"> <div class="text-center"> <a href=""><img src="img/003.png" /></a><br /> <a href="">文字3</a> </div> </li> <li class="pull-left" style="padding: 10px;"> <div class="text-center"> <a href=""><img src="img/004.png" /></a><br /> <a href="">文字4</a> </div> </li> </ul> </div>
CSS组件
下拉菜单
.dropdown将下拉菜单触发器和下拉菜单包含在其中(下拉菜单父元素)。
data-toggle属性：下拉菜单触发器。取值为“dropdown”。
.dropdown-menu：给<ul>指定下拉菜单的样式。
.dropup：向上弹出的下拉菜单(下拉菜单父元素)。
下拉菜单对齐方式：.dropdown-menu-left和.dropdown-menu-right
.divider：为下拉菜单添加分隔线，用于将多个链接分组。
.disabled：禁用的菜单项。
<h2 class="page-header">下拉菜单的应用</h2> <div class="dropdown"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Java课 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <a href="">HTML</a> </li> <li> <a href="">CSS</a> </li> <li> <a href="">Java</a> </li> <li class="divider"></li> <li> <a href="">Maven</a> </li> <li> <a href="">MySQL</a> </li> <li> <a href="">Spring</a> </li> </ul> </div>
按钮组
.btn-group：按钮组(可以实现将一组按钮放在同一行)。
.btn-toolbar：按钮组工具栏(将多个按钮组放在其中)。
按钮组的尺寸：.btn-group-lg、.btn-group-sm、.btn-group-xs
.btn-group-vertical：垂直排列的按钮组。
<h2 class="page-header">按钮组的应用</h2> <div class="btn-toolbar"> <div class="btn-group btn-group-lg "> <button type="button" class="btn btn-default">按钮一</button> <button type="button" class="btn btn-default">按钮二</button> <button type="button" class="btn btn-default">按钮三</button> <button type="button" class="btn btn-default">按钮四</button> <button type="button" class="btn btn-default">按钮五</button> </div> <div class="btn-group"> <button type="button" class="btn btn-danger">按钮一</button> <button type="button" class="btn btn-danger">按钮二</button> </div> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-primary">按钮一</button> <button type="button" class="btn btn-primary">按钮二</button> </div> <div class="btn-group btn-group-xs btn-group-vertical"> <button type="button" class="btn btn-success">按钮一</button> <button type="button" class="btn btn-success">按钮二</button> <button type="button" class="btn btn-success">按钮三</button> </div> </div>
按钮式下拉菜单
<h2 class="page-header">按钮式下拉菜单的应用</h2> <div class="btn-group dropup"> <button type="button" class="btn btn-danger" data-toggle="dropdown"> 按钮 <span class="caret"></span> </button> <ul class="dropdown-menu" style="overflow: auto;height: 100px;"> <li> <a href="">按钮</a> </li> <li> <a href="">按钮</a> </li> <li> <a href="">按钮</a> </li> <li class="divider"></li> <li> <a href="">按钮</a> </li> <li> <a href="">按钮</a> </li> <li> <a href="">按钮</a> </li> <li> <a href="">按钮1</a> </li> <li> <a href="">按钮1</a> </li> <li> <a href="">按钮3</a> </li> <li> <a href="">按钮2</a> </li> </ul> <button type="button" class="btn btn-danger"> 按钮 </button> </div> <div class="btn-group dropup"> <button type="button" class="btn btn-default"> 按钮 </button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <a href="">按钮</a> </li> <li> <a href="">按钮</a> </li> <li> <a href="">按钮</a> </li> <li class="divider"></li> <li> <a href="">按钮</a> </li> </ul> </div>
在这里呢，如果我们下拉菜单很多，就可以用滚动条来解决！
用overflow: auto;，然后定义一个高度就好。
