1. 程式人生 > >在HTML網頁中引入Bootstrap前端框架

在HTML網頁中引入Bootstrap前端框架

ble 需要 otto nta 在線 cal meta target initial

Bootstrap百度百科介紹:

Bootstrap,來自 Twitter,是目前很受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的,它簡潔靈活,使得 Web 開發更加快捷。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發,是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規範,它即是由動態CSS語言Less寫成。

這是優雅的分割線....................................

要想在HTML網頁中試用Bootstrap,至少需要引入三個文件

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

然後將所有使用Bootsrap樣式的代碼寫在如下DIV中,二者選一。

<div class="container">
//這裏寫你bootstrap樣式的代碼
</div>

<div class="container-fluid">
//這裏寫你bootstrap樣式的代碼
</div>

以下是本人編寫的一個例子網頁代碼

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <title>首頁</title>  
    <!-- 設置文檔編碼 -->  
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">  
    <!--  -->  
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">  
    <!-- 新 Bootstrap 核心 CSS 文件 -->  
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">  
    <!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->  
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>  
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->  
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>  
    <!-- CSS樣式 -->  
    <style type="text/css">  
        .container div{  
            text-align:center;  
        }  
    </style>  
</head>  
<body>  
    <div class="container">  
        <div ><h4>請選擇你要進行的操作</h4></div>  
        <br/>  
        <div ><button type="button" class="btn btn-primary btn-lg btn-block active" onclick="location=‘‘" >我要出租汽車</button></div>  
        <br/>  
        <div ><button type="button" class="btn btn-primary btn-lg btn-block" disabled="disabled" onclick="location=‘‘">我要租賃汽車</button></div>  
    </div>  
</body>  
</html>  

  註:

引入文件時,我是在線引入,為了方便不聯網的情況,我們可以先將這三個文件下載下來,然後在引入本地路徑的CSS文件和JS文件。至於如何獲得這三個文件,麻煩點的可以去Bootstrap的官網http://v3.bootcss.com/和JQuery

的官網http://jquery.com/下載相應的文件下來,這樣可以加深對Bootsrtap的了解;最簡單的就是直接訪問這三個網頁

http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css  
<span style="font-size:18px;"></span>  

http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js  

http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js  

在HTML網頁中引入Bootstrap前端框架