bootstrap實例

時間  2019-11-19
標籤 bootstrap 實例 欄目 Bootstarp 简体版
原文   原文鏈接 
<!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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程