您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“Bootstrap框架怎么用”,內容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領大家一起研究并學習一下“Bootstrap框架怎么用”這篇文章吧。
Bootstrap 是一個用于快速開發 Web 應用程序和網站的前端框架。由 Twitter 的 Mark Otto 和 Jacob Thornton 合作開發的一套 HTML、CSS 和 JS 框架。Bootstrap 是基于 HTML5 和 CSS3 開發的,它在 jQuery 的基礎上進行了更為個性化和人性化的完善,形成一套自己獨有的網站風格,并兼容大部分 jQuery 插件。用過 HTML5 和 CSS3 的人都知道,現在一些高大上的網站都少不了 html5 和 css3。而Bootstrap 正式基于這些設計出來的,它為我們封裝好了現成的 CSS 樣式合集。供咱們直接引用。
Bootstrap 內置樣式非常漂亮,而且夠用。與其把網站搞得花里胡哨,不如一切從簡。Bootstrap 在 reset 瀏覽器樣式之余,又添加了類 Twitter 的頁面元素,咱們要做的只是使用,肆無忌憚地、放心地用,不用琢磨這個行高、計算那個寬度、讓不小心忘記定義的頁面元素尷尬地顯示在頁面上。因為這些Twitter 已經為咱們考慮設計好了, 而且出自 Twitter 之手,畢竟經受了億萬用戶的考驗,外加 Twitter 強大的設計團隊的支持,更讓這套框架顯得與眾不同。
當然 Bootstrap 的好處不止如此,不然 Bootstrap 也不會一經發布,就迅速紅遍大江南北。
移動設備優先:自 Bootstrap 3 起,框架包含了貫穿于整個庫的移動設備優先的樣式。
瀏覽器支持:所有的主流瀏覽器都支持 Bootstrap。
容易上手:只要具備 HTML 和 CSS 的基礎知識,就可以開始學習 Bootstrap。下面會給出具體了例子,演示如何快速使用Bootstrap。
響應式設計:Bootstrap 的響應式 CSS 能夠自適應于臺式機、平板電腦和手機。
最主要的一點原因,它不僅好,而且是開源的。
(關于響應式設計這塊是咱們web開發者將來所必所面對的,因為隨著各種移動設備的不斷發展,手機平板的盛行。這些移動設備大有成為主流之勢。所以咱們必須要跟上潮流,搞好PC網站的同時也必須要考慮讓網站適應其他終端。 )
這一部分主要說明一下 Bootstrap 的環境安裝,文件結構,并且通過一個 demo 演示如何使用 Bootstrap。
首先下載 Bootstrap 的最新版本: http://v3.bootcss.com/getting-started/#download Bootstrap 提供了兩種形式的壓縮包,在下載下來的壓縮包內可以看到以下目錄和文件,這些文件按照類別放到了不同的目錄內,并且提供了壓縮與未壓縮兩種版本。 下載壓縮包之后,將其解壓縮到任意目錄即可看到以下(壓縮版的)目錄結構: 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
上面展示的就是 Bootstrap 的基本文件結構:這里提供了編譯好的 CSS 和 JS (bootstrap.) 文件,還有經過壓縮的 CSS 和 JS (bootstrap.min.) 文件。同時還提供了 CSS 源碼映射表(bootstrap.*.map) ,可以在某些瀏覽器的開發工具中使用。同時還包含了來自 Glyphicons 的圖標字體,在附帶的 Bootstrap 主題中使用到了這些圖標。
關于壓縮版和未經壓縮版,使用的時候引用其中一個即可。
Demo
下面是使用了 Bootstrap 的 html 代碼,給按鈕添加了一些 Bootstrap 樣式。
<!DOCTYPE html> <html> <head> <title>Bootstrap 實例 - 按鈕選項</title> <!-- 添加對Bootstrap的引用 --> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <!-- 標準的按鈕 --> <button type="button" class="btn btn-default">默認按鈕</button> <!-- 提供額外的視覺效果,標識一組按鈕中的原始動作 --> <button type="button" class="btn btn-primary">原始按鈕</button> <!-- 表示一個成功的或積極的動作 --> <button type="button" class="btn btn-success">成功按鈕</button> <!-- 信息警告消息的上下文按鈕 --> <button type="button" class="btn btn-info">信息按鈕</button> <!-- 表示應謹慎采取的動作 --> <button type="button" class="btn btn-warning">警告按鈕</button> <!-- 表示一個危險的或潛在的負面動作 --> <button type="button" class="btn btn-danger">危險按鈕</button> <!-- 并不強調是一個按鈕,看起來像一個鏈接,但同時保持按鈕的行為 --> <button type="button" class="btn btn-link">鏈接按鈕</button> </body> </html>
可以看到上面的 html 代碼中沒有寫任何其他的 css 代碼,完全是引用 Bootstrap 的按鈕樣式。其中關鍵代碼部分: class=”btn btn-default” btn:繼承圓角灰色按鈕的默認外觀。 btn-default 是默認/標準按鈕的樣式。 要想更換其他的樣式就更好其他的類即可,比如 btn-danger 是危險按鈕。這些樣式都在 bootstrap.min.css 文件中寫好的一些樣式,大家可以打開文件瀏覽一下。
就這樣在不知不覺中就完成了對 Bootstrap 的使用,其他控件也都是不同的一些 class。在使用的時候注意經常查看官方文檔,收獲會很多。
另外,在引用 Bootstrap 的時候還需要特別注意一點:那就是 jquery.min.js 和 bootstrap.min.js 文件的引用順序, 因為 Bootstrap 的所有 JavaScript 插件都依賴 jQuery,因此 jQuery 必須在 Bootstrap 之前引入。
以上是“Bootstrap框架怎么用”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。