实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>复习</title> <link rel="stylesheet" href="lib/dist/css/bootstrap.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> 1.form中的静态控件 <form action=""> <div class="form-group"> <label class="col-sm-2 control-label">用户:</label> <div class="col-sm-10"> <!--用这个来代替 输入控件--> <p class="form-control-static">admin</p> </div> </div> </form> 2.表单控件的 禁用 disabled 和 只读 readonly <input type="text" readonly> <input type="checkbox" disabled> 3.按钮的几种样式，很简单就不写了 按钮有个激活样式 active <button type="button" class="btn btn-info active">激活</button> 4.图片 <img src="1.png" class="img-responsive"> 响应式图片 <img src="1.png" class="img-rounded"> 圆角图片 <img src="1.png" class="img-circle"> 椭圆形图片 <img src="1.png" class="img-thumbnail"> 相框图片 5.文字的样式用 .text-primary .text-success 等等 *6.浮动 <div class="pull-left">左浮动</div> <div class="pull-right">右浮动</div> 清除浮动 <div class="clearfix"></div> *7.定义字体图标时span标签中不能有内容 <span class="glyphicon glyphicon-envelope text-success"></span> *8.按钮式下拉菜单 涉及动画效果就需要js了，做之前首先检查一下bootstrap的js有没有导入 先要定义一个dropdown的容器盒子(别忘了)，然后放入button和ul后， 最后使用data-toggle="dropdown"将两者关联起来 <div class="dropdown dropup"> <button class="btn btn-default" data-toggle="dropdown">前端<span class="caret"></span></button> <ul class="dropdown-menu"> <li class="dropdown-header">HTML</li> <li>CSS</li> <li class="divider"></li> <li>JS</li> </ul> </div> 9.按钮组工具栏 <div class="btn-toolbar"> <div class="btn-group"> <button class="btn btn-success">按钮一</button> <button class="btn btn-default">按钮二</button> </div> <div class="btn-group"> <button class="btn btn-success">按钮三</button> <button class="btn btn-default">按钮四</button> </div> </div> </div> </div> </div> <script src="lib/jquery.js"></script> <script src="lib/dist/js/bootstrap.js"></script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
