Bootstrap如何使用

發(fā)布時間：2021-08-13 10:10:58 來源：億速云閱讀：133 作者：小新欄目：web開發(fā)

小編給大家分享一下Bootstrap如何使用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

一、Bootstrap簡介

Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap是基于 HTML5、CSS3和Javascriopt開發(fā)的，它在 jQuery的基礎(chǔ)上進(jìn)行了更為個性化和人性化的完善，形成一套自己獨有的網(wǎng)站風(fēng)格，并兼容大部分jQuery插件，為實現(xiàn)快速開發(fā)提供了一套前端工具包，包括豐富的布局、柵格、豐富的Web組件和jQuery插件等，并能通過Less進(jìn)行樣式定制。

二、Hello Bootstrap

1.建立項目目錄結(jié)構(gòu)，新建app、css、font、img和js目錄，其中app存放angular相關(guān)子模板和控制器。向css目錄中拷貝入ie10-viewport-bug-workaround.css，向js目錄中拷貝入ie8-responsive-file-warning.js、ie-emulation-modes-warning.js和ie10-viewport-bug-workaround.js，這幾個文件是讓bootstrap在ie瀏覽器中針對ie的兼容性做的優(yōu)化。

Bootstrap如何使用 ?

2.新建index.html頁面，在中引入bootstrap.css及兼容ie的css：

Bootstrap如何使用

3.在底部依次引入jquery.js、bootstrap.js及兼容ie的js：

Bootstrap如何使用 ?

4.編寫頁面內(nèi)容，先在標(biāo)簽下加入<div class="container"></div>,然后在其中插入具體頁面代碼，本例包括頂部導(dǎo)航和一個，完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="Mac.Manon">
  <link rel="icon" href="../../favicon.ico">
  <title>Hello Bootstrap</title>
  <!-- 引入Bootstrap樣式 -->
  <link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
  <!--對IE特定版本的兼容性處理 開始-->
  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
  <!-- Just for debugging purposes. Don‘t actually copy these 2 lines! -->
  <!--[if lt IE 9]><script src="js/ie8-responsive-file-warning.js"></script><![endif]-->
  <script src="js/ie-emulation-modes-warning.js"></script>
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
  <!--對IE特定版本的兼容性處理 結(jié)束-->
  <!-- 本模版專用相關(guān)樣式 -->
  <link href="css/navbar.css" rel="stylesheet">
</head>
<body>
<!--container容器 開始-->
<div class="container">
  <!-- 導(dǎo)航 開始 -->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Buyinplay</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
          <li><a href="../navbar-static-top/">Static top</a></li>
          <li><a href="../navbar-fixed-top/">Fixed top</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
  </nav>
  <!--導(dǎo)航 結(jié)束-->
  <!-- 正文 開始 -->
  <div class="jumbotron">
    <h2>Hello Bootstrap !</h2>
    <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
    <p>
      <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View detail docs &raquo;</a>
    </p>
  </div>
  <!--正文 結(jié)束-->
</div>
<!--container容器 結(jié)束-->
<!--引用js資源 開始-->
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<!--引用js資源 結(jié)束-->
</body>
</html>

效果如下：

Bootstrap如何使用

以上是“Bootstrap如何使用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

Bootstrap如何使用

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽