DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 學做Bootstrap的第一個頁面
學做Bootstrap的第一個頁面
編輯：關於JavaScript     

本文實例分享了第一個Bootstrap頁面的實現代碼，供大家參考，具體內容如下

效果圖：

實現代碼：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" /><!--為了確保適當的繪制和觸屏縮放，需要在 <head> 之中添加 viewport 元數據標簽。-->
  <title></title>
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
   <script src="js/bootstrap.min.js"></script>
   <style>
    .masthead{
     padding: 110px 0px 110px;
     margin-bottom: 0px;
    }
    .masthead:after{
     content: '';
     display: block;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0; 
     background: url(img/bg1.png) repeat center center;
     opacity: 0.4;
    }
    .masthead h1{
     font-weight: 700;
     font-size: 700%;
    }
    .active{font-size: 120%;font-weight: bold;}
    .masthead-a{
     opacity: 0.5;
     color: white;
     font-size: medium;
    }
    .masthead-a:hover{
     color: white;
     opacity: 1;
    }
    .modal-header li i{opacity: 0.5;}
    .text-align{
     display: inline;
    }
    .img-ls{
     width: 23%;
     border: 1px solid hsl(0, 0%, 87%);
     margin-right: 2%;
     padding: 4px 0px;
     margin-bottom: 6%;
     min-height: 350px;
     max-height: 600px;
     float: left;
    }
    .img-ls img{
     width: 97%;
     height: auto;
    }
    .img-ls img:hover{
     cursor: pointer;
    }
    .footer{
     padding: 50px 50px;
    }
    .navbar-nav li{display: inline;}
   </style>
 </head>
 <body>
  <div class="navbar-inverse navbar-fixed-top">
  <!-- 定義個內部框架表現的基調,位置大小背景等 -->
    <div class="container">
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </button>
      <ul class="nav navbar-nav"><li><a href="#" class="active">Bootstrap中文網</a></li></ul>
     <div class="navbar-collapse collapse" role="navigation">
      <ul class="nav navbar-nav"> 
       <li><a href="#">Bootstrap2中文文檔</a></li>
       <li><a href="#">Bootstrap3中文文檔</a></li>
       <li><a href="#">Bootstrap 4.0 預覽</a></li>
       <li><a href="#">Less 教程</a></li>
       <li><a href="#">jQuery API</a></li>
       <li><a href="#">網站實例</a></li>
       <li><a href="#">前端高薪職位</a></li>
       <li><a href="#">關於</a></li>
      </ul>
     </div>
    </div>
  </div>
  <div class="jumbotron masthead">
    <div class="container">
     <h1>Bootstrap</h1>
     <h2>簡潔、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。</h2>
     <p><a class="btn btn-lg btn-primary" href="#">Bootstrap3中文文檔(v3.3.5)</a></p>
     <p><a href="#" class="masthead-a">Bootstrap2中文文檔(v2.3.2)</a></p>
    </div>
  </div>
  <div class="modal-header text-center">
   <div class="container">
    <ul>
     <li class="text-align">Bootstrap技術交流群：318630708 <i>|</i> </li>
     <li class="text-align">Bootstrap問答社區 <i>|</i> </li>
     <li class="text-align">新浪微博：@Bootstrap中文網</li>
    </ul>
   </div>
  </div>
  <div class="modal-header">
   <div class="container">
    <div class="page-header text-center">
     <h2>Bootstrap相關優質項目推薦</h2>
     <p>這些項目或者是對Bootstrap進行了有益的補充，或者是基於Bootstrap開發的</p>
    </div>
    <div class="img-ls col-lg-3 text-center">
     <img src="img/codeguide.png" />
     <h3>
      <a href="javascript:void(0)" class="btn btn-lg">Bootstrap 編碼規范<br/><small>by @mdo</small></a>
     </h3>
     <p class="modal-body">
      Bootstrap 編碼規范：編寫靈活、穩定、高質量的 HTML 和 CSS 代碼的規范。
     </p>
    </div>
    <div class="img-ls col-lg-3 text-center">
     <img src="img/jqueryapi.png" />
     <h3>
      <a href="javascript:void(0)" class="btn btn-lg">jQuery API <br/><small>中文手冊</small></a>
     </h3>
     <p class="modal-body">
      根據最新的 jQuery 1.11.x 和 2.1.x 版本翻譯的 jQuery API 中文文檔/手冊。
     </p>
    </div>
    <div class="img-ls col-lg-3 text-center">
     <img src="img/w3schools.png" />
     <h3>
      <a href="javascript:void(0)" class="btn btn-lg">w3schools<br/><small>原版國內鏡像</small></a>
     </h3>
     <p class="modal-body">
      w3schools.com 是最受歡迎的前端技術教程網站，但是國內用戶一直不能訪問，並且國內的中文翻譯版本十分陳舊。因此做了個鏡像，希望英文好的同學直接去看原版教程吧！
     </p>
    </div>
    <div class="img-ls col-lg-3 text-center">
     <img src="img/expo.png"/>
     <h3>
      <a href="javascript:void(0)" class="btn btn-lg">優站精選<br/><small>Bootstrap網站實例</small></a>
     </h3>
     <p class="modal-body">
      Bootstrap優站精選頻道收集了眾多基於 Bootstrap 構建、設計精美的、有創意的網站。
     </p>
    </div>
   </div>
  </div>
  <footer class="footer">
   <div class="container modal-header">
    <div class="col-lg-6">
     <img src="img/logo.png" />
     <h5>
      <p>本網站所列開源項目的中文版文檔全部由<a href="javascript:void(0)"><small>Bootstrap中文網</small></a>成員翻譯整理，並全部遵循 <a href="javascript:void(0)"><small>CC BY 3.0</small></a>協議發布。</p>
     </h5>
    </div>
    <div class="col-lg-6">
     <div class="col-xs-3">
      <h4>關於</h4>
      <h4>
       <ul class="list-unstyled">
        <li><a href="javascript:void(0)"><small>關於我們</small></a></li>
        <li><a href="javascript:void(0)"><small>廣告合作</small></a></li>
        <li><a href="javascript:void(0)"><small>友情鏈接</small></a></li>
        <li><a href="javascript:void(0)"><small>招聘</small></a></li>
       </ul>
      </h4>
     </div>
     <div class="col-xs-3">
      <h4>聯系方式</h4>
      <h4>
       <ul class="list-unstyled">
        <li><a href="javascript:void(0)"><small>新浪微博</small></a></li>
        <li><a href="javascript:void(0)"><small>電子郵件</small></a></li>
       </ul>
      </h4>
     </div>
      <div class="col-xs-3">
      <h4>旗下網站</h4>
      <h4>
       <ul class="list-unstyled">
        <li><a href="javascript:void(0)"><small>Laravel中文網</small></a></li>
        <li><a href="javascript:void(0)"><small>Ghost中國</small></a></li>
       </ul>
      </h4>
     </div>
      <div class="col-xs-3">
      <h4>贊助商</h4>
      <h4>
       <ul class="list-unstyled">
        <li><a href="javascript:void(0)"><small>UCloud</small></a></li>
        <li><a href="javascript:void(0)"><small>又拍雲</small></a></li>
       </ul>
      </h4>
     </div>
    </div>
   </div>
   <h4 class="text-center "><a href="javascript:void(0)"><small>京ICP備11008151號</small></a><small> | 京公網安備11010802014853</small></h4>
  </footer>
 </body>
</html>

相信大家一定還沒過瘾吧，下面再為大家分享幾篇文章：

《值得分享和收藏的Bootstrap學習教程》 《Bootstrap學習教程》

以上就是本文的全部內容，希望對大家的學習有所幫助。

關於JavaScript
JS 有名函數表達式全面解析
Example #1: Function expression identifier leaks i
關於js裡的this關鍵字的理解
this關鍵字在c++，java中都提供了這個關鍵字，在剛開始學習時覺得有難度，但是只要理解了，用起
在b/s開發中經常用到的javascript技術
在b/s開發中經常用到的javascript技術 一、驗證類1、數字驗證內  1.1 整數

相關文章

JavaScript基礎知識JSON基礎正則表達式關於JavaScriptJavaScript技巧jQuery入門知識AJAX入門JavaScript綜合知識
小編推薦
jqGrid用法匯總(全經典) 百度坐標（BD09）、國測局坐標（火星坐標，GCJ02）、和WGS84坐標系之間的轉換 JavaScript字符串對象fromCharCode方法入門實例教程（用於把Unicode值轉換為字符串） javascript檢測flash插件是否被禁用的方法 用javascript將數據導入Excel示例代碼 深入淺析JavaScript中的constructor javascript模擬C#格式化字符串 JS實現點擊文字對應DIV層不停閃動效果的方法教程 javascript 正則表達式（一） AJAX使用了UpdatePanel後無法使用alert彈出腳本
熱門推薦
淺述節點的創建及常見功能的實現 js繼承的實現代碼 JavaScript與jQuery實現的閃爍輸入效果 js實現頁面a向頁面b傳參的方法 js圖片實時加載提供網頁打開速度 你必須知道的Javascript知識點之字面量和對應類型說明介紹 判斷可拖動div是否重合 重合多少 JS獲得圖片alt信息的方法教程 Javascript 自適應高度的Tab選項卡
大家都在看
vuejs在解析時出現閃爍的原因及防止閃爍的方法 干淨的組織有序的網頁內容布局的8種技術 Javascript計算兩個marker之間的距離(Google Map V3) 也寫一個Ajax.Request類附代碼 使用變量動態設置js的屬性名 jQuery中的val()示例應用 早該知道的7個JavaScript技巧 JavaScript仿flash遮罩動畫效果
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved