免費開發模板Bootstrap介紹

Bootstrap 是一個提供快速開發 Web應用程式和網站的前端框架,它已經為不同設備做了很多適配的工作,您只要按它的要求編寫html與css就可以自動適應不同設計,就是我們常常說的responsive webdesign或者自適應網頁設計。

在現代 Web 開發中,有一些所有的 Web 項目中都需要的功能,或者稱為組件/模塊。
Bootstrap 為您提供了所有這些基本的組件 – 網格(Grid)、排版(Typography)、(表格)Tables、(表單)Forms、(按鈕)Buttons 和 (自適應)Responsiveness。
此外,還有大量其他能夠復用的前端組件,比如(下拉框)Dropdowns、(導航欄)Navigation、(模態彈出框)Modals、(字模)Typehead、(分頁)Pagination、(輪播圖片)Carousal、(麵包屑)Breadcrumb、(標籤塊)Tab、(縮略圖)Thumbnails、(大標題)Headers 等等。
有了這些,你可以搭建一個 Web 項目,並讓它運行地更快速更輕鬆。
此外,由於整個框架是基於模塊的,您可以通過您自己的 CSS 位,甚至是項目開始後的一個大整改,來進行自定義。

上述說明太官方,一般人不好理解,我來簡化一下:
Bootstrap是一個做網頁設計的框架(目前最流行的WEB前端框架之一),就是說你只需要寫HTML標籤調用它的類(class)你就可以很快速的做一個精美實用的網頁,你不用擔心不同設備的兼容問題,提供了很多樣式供你選擇!
比如你需要做一個網站的文本顯示,你自己寫的話你需要寫很多代碼,但是如果你使用bootstrap框架來寫的話,只需要寫好HTML標籤然後調用類名就可以了!
代碼展示如下:

<!DOCTYPE html>
<html>

<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 charset="utf-8">
    <title>Bootstrap 入門實例</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="starter-template">
            <h1>網頁設計範例</h1>
            <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text
                and a mostly barebones HTML document.</p>
        </div>
        <small>本行內容是在標籤內</small><br>
        <strong>本行內容是在標籤內</strong><br>
        <em>本行內容是在標籤內,並呈現為斜體</em><br>
        <p class="text-left">向左對齊文本</p>
        <p class="text-center">居中對齊文本</p>
        <p class="text-right">向右對齊文本</p>
        <p class="text-muted">本行內容是減弱的</p>
        <p class="text-primary">本行內容帶有一個 primary class</p>
        <p class="text-success">本行內容帶有一個 success class</p>
        <p class="text-info">本行內容帶有一個 info class</p>
        <p class="text-warning">本行內容帶有一個 warning class</p>
        <p class="text-danger">本行內容帶有一個 danger class</p>
    </div>
</body>

</html>

作用:
用它提供的樣式和組件快速寫網站
你只需要引用一些定義好的類,也就是class名字,就可以創建出已經有非常漂亮的樣式的網頁,而且支持自適應,是一個很不錯的框架。
簡而言之:你只需要瞭解相關的class、標籤名稱等所代表的意思,然後在構建頁面的時候,導入bootstrap的JS、css等,它就會去表現相應的效果出來。

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *