首頁 >web前端 >html教學 >Bootstrap是什麼,有什麼特色?

Bootstrap是什麼,有什麼特色?

青灯夜游
青灯夜游原創
2018-09-19 16:14:2311679瀏覽

本章要跟大家介紹Bootstrap是什麼,有什麼特色?讓大家對Bootstrap框架有初步的認知。有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

一. Bootstrap 概述
Bootstrap 是由 Twitter 公司(全球最大的微博)的兩位技術工程師研發的一個基於
HTML、CSS、JavaScript 的開源框架。此框架程式碼簡潔、視覺優美,可用於快速、簡單地
建立基於 PC 及行動裝置的 Web 頁面需求。
2010 年 6 月,Twitter 內部的工程師為了解決前端開發任務中的協作統一問題。經歷
各種方案後,Bootstrap 最終被確定下來,並於 2011 年 8 月發布。經過很長時間的迭代升
級,由最初的 CSS 驅動專案發展成為內建許多 JavaScript 外掛程式和圖示的多功能 Web 前端
的開源框架。
Bootstrap 最重要的部分就是它的響應式佈局,透過這種佈局可以相容於 PC 端、PAD
以及手機行動端的頁面存取。
Bootstrap 下載及示範:
國內文件翻譯官網:http://www.bootcss.com

二. Bootstrap 特色
Bootstrap 非常流行,得益於它非常實用的功能和特點。主要核心功能特點如下:
(1).跨裝置、跨瀏覽器
可以相容於所有現代瀏覽器,包括比較詬病的 IE7、8。當然,本課程不再考慮 IE9 以下
瀏覽器。
(2).響應式佈局
不但可以支援 PC 端的各種解析度的顯示,還支援行動端 PAD、手機等螢幕的響應式切割
換顯示。
(3).提供的全面的元件
Bootstrap 提供了實用性很強的元件,包括:導航、標籤、工具列、按鈕等一系列群組
件,方便開發者呼叫。
(4).內建 jQuery 外掛
Bootstrap 提供了許多實用性的 jquery 插件,這些插件方便開發者實現 Web 中各種
常規特效。
(5).支援 HTML5、CSS3
HTML5 語意化標籤和 CSS3 屬性,都得到很好的支援。
(6).支援 LESS 動態樣式
LESS 使用變數、巢狀、操作混合編碼,編寫更快、更靈活的 CSS。它和 Bootstrap 能
很好的配合開發。

三. Bootstrap  結構

首先,想要了解 Boostrap 的文件結構,就需要在官網先把它下載到本機。 Bootstrap
下載網址如下:
Bootstrap 下載位址:http://v3.bootcss.com/ (選擇生產環境即可,v3.3.4)
解壓縮後,目錄呈現這樣的結構:
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min. css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons- halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
主要分為三大核心目錄:css(樣式)、js(腳本)、fonts(字體)。
1.css 目錄中有四個css 後綴的文件,其中包含min 字樣的,是壓縮版本,一般使用
這個;不包含的屬於沒有壓縮的,可以學習了解css 程式碼的檔案;而map 後綴的檔案則是
css 原始碼映射表,在一些特定的瀏覽器工具中使用。
2.js 目錄包含兩個文件,是未壓縮和壓縮的 js 文件。
3.fonts 目錄包含了不同後綴的字體檔案。

建立第一個bootstrap頁面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>bootstrap初体验</title>
    <link rel="stylesheet" href="css/bootstrap.css" />
    </head>
    <body>
        <button class="btn btn-default">bootstrap初体验之按钮</button>
    </body>
</html>

Bootstrap 將全域font-size 設定為14px,line-height 行高設定為1.428(即20px);01ffcd5d1a840d2341909ced6bafa76c段落元素被設定等於1/2 行高(即10px);顏色被設定為#333。

以上是Bootstrap是什麼,有什麼特色?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn