bootstrap实例

<!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="width:60%">60%</div>

</div>
<div class="progress">
        <div class="progress-bar progress-bar-success" style="width:60%">60%</div>
    
    </div>
<div class="progress">
            <div class="progress-bar progress-bar-warning" style="width:60%">60%</div>      
</div>
<div class="progress">
        <div class="progress-bar progress-bar-danger progress-bar-striped" style="width: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>

 

posted @ 2018-03-23 17:11  勤奋的园  阅读(184)  评论(0编辑  收藏  举报