bootstrap簡單使用佈局、柵格系統、modal標籤頁等經常使用組件入門

時間  2019-11-18
標籤 bootstrap 簡單 使用 佈局 柵格 系統 modal 標籤 經常 組件 入門 欄目 Bootstarp 简体版
原文   原文鏈接 
<!DOCTYPE html>
<html>
<head>
    <title>bootstrap</title>
    <!-- 引入bootstrap的css樣式庫 -->
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- 引入第三方庫 -->
    <link rel="stylesheet" type="text/css" href="animate.css">
</head>
<body>

<!-- 按鈕控件 -->
<!-- <button class="btn btn-success">提交</button>
<button class="btn btn-info">提交</button>
<button class="btn btn-warning">提交</button>
<button class="btn btn-danger">提交</button>
<button class="btn btn-default">提交</button>
<button class="btn btn-primary">提交</button>

<div class='bg-primary'>bootstrap_css_js</div>

<div class='glyphicon glyphicon-music' style="color:red"></div>
 -->
<!-- 分頁組件 -->
<!-- <nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav> -->

<!-- 柵格系統 用來佈局 -->
<div class="container">
    <div class="row">
      <div class="col-md-8"><p style="background: gray">.col-md-8</p></div>
      <div class="col-md-4"><p style="background: gray">.col-md-4</p></div>
    </div>

    <div class="row">
      <div class="col-md-4"><p style="background: gray">.col-md-4</p></div>
      <div class="col-md-8"><p style="background: gray">.col-md-8</p></div>
    </div>

    <div class="row">
        <div class="col-md-4"><p style="background: pink">pink1</p></div>
        <div class="col-md-4"><p style="background: pink">pink2</p></div>
        <div class="col-md-4"><p style="background: pink">pink3</p></div>
    </div>

<!-- 表格控件 -->
<table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>用戶名</th>
                <th>密碼</th>
            </tr>
        </thead>
        
        <tbody>
            <tr>
                <td>username</td>
                <td>password</td>
            </tr>

            <tr class='success'>
                <td>username</td>
                <td>password</td>
            </tr>

            <tr class='info'>
                <td>username</td>
                <td>password</td>
            </tr>

            <tr class='warning'>
                <td>username</td>
                <td>password</td>
            </tr>
        </tbody>
</table>


<!-- 字體顏色 -->

<p class="text-muted">字體顏色字體顏色字體顏色字體顏色字體顏色字體顏色</p>
<p class="text-primary">字體顏色字體顏色字體顏色字體顏色字體顏色字體顏色</p>
<p class="text-success">字體顏色字體顏色字體顏色字體顏色字體顏色字體顏色</p>
<p class="text-info">字體顏色字體顏色字體顏色字體顏色字體顏色字體顏色</p>
<p class="text-warning">字體顏色字體顏色字體顏色字體顏色字體顏色字體顏色</p>
<p class="text-danger">字體顏色字體顏色字體顏色字體顏色字體顏色字體顏色</p>

<!-- 按鈕樣式，a標籤一樣適用 -->
<!-- <button class="btn btn-success">success</button> -->

<a href="http://www.baidu.com" target="_blank" class="btn btn-success">success</a>

<!-- 背景色 -->

<p class="bg-primary">背景色背景色背景色背景色背景色背景色背景色背景色背景色</p>
<p class="bg-success">背景色背景色背景色背景色背景色背景色背景色背景色背景色</p>
<p class="bg-info">背景色背景色背景色背景色背景色背景色背景色背景色背景色</p>
<p class="bg-warning">背景色背景色背景色背景色背景色背景色背景色背景色背景色</p>
<p class="bg-danger">背景色背景色背景色背景色背景色背景色背景色背景色背景色</p>

<!-- 圖片懶加載，首屏不所有顯示，往下拖動才顯示圖片，項目地址：
https://github.com/darkwing/LazyLoad -->

<!-- <img data-src="https://www.baidu.com/img/bd_logo1.png" src="https://www.baidu.com/img/bd_logo1.png" /> -->

<p class="glyphicon glyphicon-apple" style="color: green"></p>

<!-- 圖標組件，專業的網站 https://fontawesome.com/ -->


<!-- 進度條-->
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

<h2>第三方css動畫效果庫Animate.css</h2>

<button class="btn btn-success animated flash">button</button>

</div>
</body>
</html>

 bootstrap結合javascript展現標籤頁和彈出框的示例：javascript

<!DOCTYPE html>
<html>
<head>
  <title>javascript</title>
  <meta charset="utf-8">
  
  <script type="text/javascript" src="static/jquery-3.3.1.min.js"></script>
  <script src="static/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="static/bootstrap.min.css">
</head>
<body>
<div class="container">
  <div id="jinfo" class="alert alert-success">jquery</div>
  <div id="btn1" class="btn btn-info">按鈕</div>

  <!-- 標籤頁 -->
  <div>
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
      <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
      <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
      <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
    </ul>

  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">company home page</div>
    <div role="tabpanel" class="tab-pane" id="profile">profile page</div>
    <div role="tabpanel" class="tab-pane" id="messages">3</div>
    <div role="tabpanel" class="tab-pane" id="settings">4</div>
  </div>
  </div>


  <!-- 彈出框model -->
  <!-- Button trigger modal -->
  <!-- <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#chinasoft">
    Launch demo modal
  </button> -->

  <!-- Modal -->
  <div class="modal fade" id="chinasoft" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          彈出框model文字內容
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

  <button class="btn btn-success" id="showmodal">彈出modal</button>

</div>

<script type="text/javascript">
  $('#btn1').on('click', function(){
    $('#jinfo').hide(1000).show(1000);
  })

  //展現modal彈出框
  $('#showmodal').on('click', function(){
    $('#chinasoft').modal('show');
  })
  
</script>
</body>
</html>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程