一.静态,只读,禁用等
实例
<!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"> <link rel="stylesheet" href="../lib/dist/css/bootstrap.css"> <title>静态,只读,禁用等</title> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <form class="form-horizontal"> <h3 class="text-center">编辑用户</h3> <div class="form-group"> <label class="col-sm-2 control-label">用户:</label> <div class="col-sm-10"> <!--<input type="text" class="form-control" placeholder="UserName">--> <!--静态控件--> <p class="form-control-static">admin</p> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">身份:</label> <div class="col-sm-8"> <!--只读控件--> <input type="text" class="form-control" placeholder="超级管理员" value="超级管理员" readonly> </div> </div> <div class="form-group"> <div class="checkbox col-sm-8 col-sm-offset-2"> <input type="checkbox" disabled> 更改 </div> </div> <div class="col-sm-8 col-sm-offset-2"> <button class="btn btn-primary btn-lg btn-block">保存</button> </div> </form> </div> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
二.按钮预定义样式
实例
<!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"> <link rel="stylesheet" href="../lib/dist/css/bootstrap.css"> <title>按钮预定义样式</title> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-8"> <h3>1.可以用作按钮的元素:button,input:button,a</h3> <button type="button" class="btn btn-info" role="button">button按钮</button> <input type="button" class="btn btn-default" role="button" value="input按钮"> <a href="http://www.php.cn" class="btn btn-primary">a标签按钮</a> <h3>2.按钮的预定义样式</h3> <button type="button" class="btn btn-default" role="button">default默认灰</button> <button type="button" class="btn btn-primary" role="button">primary首选蓝</button> <button type="button" class="btn btn-success" role="button">success成功绿</button> <button type="button" class="btn btn-info" role="button">info提示浅蓝</button> <button type="button" class="btn btn-warning" role="button">waring警告橙黄色</button> <button type="button" class="btn btn-danger" role="button">danger危险红</button> <button type="button" class="btn btn-link" role="link">Link链接</button> <h3>3.预定义的按钮大小</h3> <button type="button" class="btn btn-default btn-lg" role="button">大按钮</button> <button type="button" class="btn btn-primary" role="button">默认大小按钮</button> <button type="button" class="btn btn-success btn-sm" role="button">小按钮</button> <button type="button" class="btn btn-success btn-xs" role="button">极小按钮</button> <h3>4.按钮状态: 激活</h3> <button type="button" class="btn btn-info">未激活</button> <button type="button" class="btn btn-info active">激活</button> <h3>5.按钮状态:禁用</h3> <button type="button" class="btn btn-primary btn-lg">启用</button> <button type="button" class="btn btn-primary btn-lg disabled">禁用</button> <a href="http://www.php.cn" class="btn btn-warning disabled">php中文网</a> </div> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
三.图片样式的设置
实例
<!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"> <link rel="stylesheet" href="../lib/dist/css/bootstrap.css"> <title>图片</title> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <h3>1.响应式图片: 随屏幕大小可以自动缩放</h3> <!--center-block: 块居中--> <img src="images/1.jpg" alt="汽车" class="img-responsive center-block" width="500"> <h3>2.图片的基本类样式</h3> <img src="images/1.jpg" alt="" class="img-rounded" width="400"> <img src="images/1.jpg" alt="" class="img-circle" width="400"> <!--给图片添加边框--> <img src="images/1.jpg" alt="" class="img-thumbnail" width="400"> </div> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
四.文字的前景色与背景色
实例
<!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"> <link rel="stylesheet" href="../lib/dist/css/bootstrap.css"> <title>前景色与背景色</title> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <h3>1.前景色: 文本</h3> <!--正常状态 --> <p class="text-muted">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p> <p class="text-primary">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p> <p class="text-info">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p> <p class="text-success">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p> <p class="text-warning">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p> <p class="text-danger">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p> <h3>2.背景色</h3> <p class="bg-primary">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p> <p class="bg-info">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p> <p class="bg-success">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p> <p class="bg-warning">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p> <p class="bg-danger">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p> <button type="button" class="close" aria-label="close">x</button> <hr> <span class="caret"></span> <hr> <div class="pull-right" >我是左边的内容</div> <div class="pull-left" >我是右边的内容</div> <!--清除浮动--> <!--<div style="clear:both"></div>--> <div class="clearfix"></div> </div> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
五.图标字体的使用
实例
<!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"> <link rel="stylesheet" href="../lib/dist/css/bootstrap.css"> <title>字体图标</title> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <h2 class="text-center">用户登录</h2> <form action="" class="form-horizontal"> <div class="form-group"> <label for="email" class="control-label col-sm-2 col-sm-offset-2"> <span class="glyphicon glyphicon-envelope text-success" style="font-size: 2rem"></span> </label> <div class="col-sm-4"> <input type="text" class="form-control" id="email"> </div> </div> <div class="form-group"> <label for="email" class="control-label col-sm-2 col-sm-offset-2"> <span class="glyphicon glyphicon-user text-info" style="font-size: 2rem"></span> </label> <div class="col-sm-4"> <input type="text" class="form-control" id="user"> </div> </div> </form> </div> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
六.下拉菜单的使用
实例
<!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"> <link rel="stylesheet" href="../lib/dist/css/bootstrap.css"> <script src="../lib/jquery.js"></script> <script src="../lib/dist/js/bootstrap.js"></script> <title>下拉菜单</title> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <h2 class="text-center">下拉菜单</h2> <div class="dropdown col-md-offset-3"> <button type="button" class="btn btn-primary" data-toggle="dropdown"> 下拉菜单测试 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li class="dropdown-header">儿科</li> <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> </ul> </div> </div> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
七.按钮组的使用
实例
<!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"> <link rel="stylesheet" href="../lib/dist/css/bootstrap.css"> <script src="../lib/jquery.js"></script> <script src="../lib/dist/js/bootstrap.js"></script> <title>按钮工具条和按钮组</title> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <div class="btn-toolbar"> <div class="btn-group btn-group-vertical btn-group-sm"> <button type="button" class="btn btn-default">编辑</button> <button type="button" class="btn btn-primary">删除</button> <button type="button" class="btn btn-info">撤消</button> </div> <div class="btn-group btn-group-horizontal btn-group-lg"> <button type="button" class="btn btn-info">复制</button> <button type="button" class="btn btn-success">粘贴</button> <button type="button" class="btn btn-warning">剪切</button> </div> <div class="btn-group btn-group-horizontal btn-group-lg"> <button type="button" class="btn btn-info">生活百科</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li class="dropdown-header">儿科</li> <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> </ul> </div> </div> </div> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例