App下載

前端中如何引入Bootstrap框架

猿友 2021-03-05 10:51:45 瀏覽數(shù) (12663)
反饋

Bootstrap 框架是最受歡迎的 HTML、CSS 和 JS 框架，用于開(kāi)發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的 WEB 項(xiàng)目。由于它簡(jiǎn)單易用，免費(fèi)開(kāi)源的特性，廣受前端開(kāi)發(fā)者的喜愛(ài)。這篇文章，我們介紹一下如何在前端開(kāi)發(fā)中引入 Bootstrap 框架。

第一步：

我們需要前往 Bootstrap 官網(wǎng)下載 Bootstrap 文件包。如果需要使用相關(guān) JS，還需要引 入jQuery 文件包。jQuery 文件包需要前往 jQuery 官網(wǎng)下載。jQuery 文件包引入方法就不在此詳述，具體請(qǐng)參考往期文章開(kāi)始使用jQuery。

33

第二步：

創(chuàng)建一個(gè) HTML 文件并引入 Bootstrap 框架。

<head>
	<title>編程獅(w3cschool.cn)</title>
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
	<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
</head>

第三步：

測(cè)試是否引入成功。此處以編寫(xiě)部分表單代碼為例。

<!DOCTYPE html>

<html lang="en">

<head>

	<title>編程獅(w3cschool.cn)</title>

	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>

	<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

	<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

	<!-- 表單 -->

	<form class="form-horizontal">

  <div class="form-group">

    <label for="inputEmail3" class="col-sm-2 control-label">郵箱</label>

    <div class="col-sm-10">

      <input type="email" class="form-control" id="inputEmail3" placeholder="請(qǐng)輸入郵箱">

    </div>

  </div>

  <div class="form-group">

    <label for="inputPassword3" class="col-sm-2 control-label">密碼</label>

    <div class="col-sm-10">

      <input type="password" class="form-control" id="inputPassword3" placeholder="請(qǐng)輸入密碼">

    </div>

  </div>

  <div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

      <div class="checkbox">

        <label>

          <input type="checkbox"> 記住我

        </label>

      </div>

    </div>

  </div>

  <div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

      <button type="submit" class="btn btn-default">登錄</button>

    </div>

  </div>

</form>

</body>

</html>

運(yùn)行后，成功顯示表單內(nèi)容。引入成功。

40

Bootstrap 框架對(duì)新手十分友好，可以快速上手開(kāi)發(fā)出一個(gè)網(wǎng)站。但它也存在不足之處，例如兼容性不強(qiáng)。總體來(lái)說(shuō)，Bootstrap 框架還是很值得學(xué)習(xí)。

上述就是如何引入 Bootstrap 框架的基本內(nèi)容。更多 Bootstrap 框架的使用請(qǐng)關(guān)注 W3Cschool 官網(wǎng)。

推薦課程：Bootstrap教程、Bootstrap3


Bootstrap 前端

1 人點(diǎn)贊