<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>bootstrap组件</title> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"> <script src="jquery-3.2.1.js"></script> <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </head> <style> .glyphicon-asterisk{ color: green; font-size: 100px; } </style> <body> <span class="glyphicon glyphicon-asterisk"></span> <!-- 字体图标 --> <button class="btn btn-default"> <span class="glyphicon glyphicon-thumbs-up"></span> 这是一个按钮 </button> <!-- 下拉菜单 --> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">这是按钮 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <a href="http://www.baidu.com"> 百度 </a> </li> <li> <a href="http://www.baidu.com"> 百度 </a> </li> <li> <a href="http://www.baidu.com"> 百度 </a> </li> </ul> </div> <!-- 控件组 --> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control"> </div> <!-- 导航 --> <ul class="nav nav-tabs"> <li class="active"><a href="http://www.baidu.com">百度</a></li> <li><a href="http://www.baidu.com">百度</a></li> <li><a href="http://www.baidu.com">百度</a></li> </ul> <ul class="nav nav-pills"> <li class="active"><a href="http://www.baidu.com">百度</a></li> <li><a href="http://www.baidu.com">百度</a></li> <li><a href="http://www.baidu.com">百度</a></li> </ul> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="http://www.baidu.com">百度</a></li> <li><a href="http://www.baidu.com">百度</a></li> <li><a href="http://www.baidu.com">百度</a></li> </ul> <!-- 分页 --> <nav> <ul class="pager"> <li class="previous"> <a href="http://www.baidu.com">向左</a> </li> <li class="next"> <a href="http://www.baidu.com">向右</a> </li> </ul> <ul class="pagination pagination-lg"> <li> <a href="http://www.baidu.com">1</a> </li> <li> <a href="http://www.baidu.com">2</a> </li> <li> <a href="http://www.baidu.com">3</a> </li> <li> <a href="http://www.baidu.com">4</a> </li> <li> <a href="http://www.baidu.com">5</a> </li> </ul> </nav> <!-- 进度条 --> <div class="progress"> <div class="progress-bar" style="60%">60%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" style="60%">60%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" style="60%">60%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped" style="60%">60%</div> </div> <!-- 列表 --> <ul class="list-group"> <li class="list-group-item active"> 这是一个列表 <span class="badge">14</span> </li> <li class="list-group-item disabled"> 这是一个列表 <span class="badge">14</span> </li> <li class="list-group-item list-group-item-info"> 这是一个列表 <span class="badge">14</span> </li> </ul> <!-- 面板 --> <div class="panel panel-danger"> <div class="panel-heading">弹出层！</div> <div class="panel-body">内容</div> <div class="panel-footer">脚注</div> </div> <!-- 弹窗 --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 弹窗 </button> <!-- <button class="btn btn-danger btn-lg" data-toggle="modal" data-target="#danger"> 这是测试按钮 </button> <div id="danger">这是一个内容</div> --> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span>$times;</span><span class="sr-only">关闭弹窗</span></button> <h4 class="modal-title" id="myModalLabel">标题</h4> </div> <div class="modal-body"> 学习 </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button> </div> </div> </div> </div> </body> </html>