Bootstrap學習——起步

時間 2019-12-01

原文原文鏈接

一，前言css

我的不是專業從事前端開發，但在一個小公司裏工做，做爲有過這樣經歷的程序員都知道，開發一個網站或者是一個管理系統，程序員基本全部的事都包了，真是什麼都要懂一點啊。而我我的也不怎麼喜歡寫CSS和JavaScript代碼，但無奈總仍是要寫的。Bootstrap是在無心間看到的，響應式佈局也在很早之前就瞭解了，也寫過，能夠說寫一個好的響應式佈局的網頁會耗費不少的精力。Bootstrap用起來不錯，只不過要按着它的規則來寫，因此仍是要學習一下。畢竟平板、手機普及度已經超出PC機，考慮移動設備，仍是使用Bootstrap來用吧，否則寫幾個網站，費時費力。html

Bootstrap 中文官網 http://www.bootcss.com/前端

二，什麼是Bootstraphtml5

咱們看一下Bootstrap官網對其是怎麼說明的：Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式佈局、移動設備優先的 WEB 項目。jquery

固然在網站的下面更給出了你爲何要用Bootstrap的緣由：爲全部開發者、全部應用場景而設計。Bootstrap 讓前端開發更快速、簡單。全部開發者都能快速上手、全部設備均可以適配、全部項目都適用。git

因此，看看人家這說的，因此即便再怎麼不想寫前端，仍是來了解一下吧，畢竟響應式佈局是一種趨勢。其實再看看網站給出的成功實例，你也會發現使用Bootstrap開發的網站的確是不錯的。我還發現它給的網站，英文網都比較清爽、舒服並且顯得大氣，而中文網看着都有些小家子氣。可能由於這個框架是老外寫的，人家領悟了精髓。程序員

三，下載Bootstrapgithub

Bootstrap （當前版本 v3.3.4）提供如下3種方式幫你快速上手，你能夠選擇一個適合本身的下載web

（1）用於開發環境的Bootstrap，這個版本是編譯並壓縮後的 CSS、JavaScript 和字體文件。不包含文檔和源碼文件。bootstrap

（2）Bootstrap源碼，這個版本包括 Less、JavaScript 、CSS和字體文件的源碼，而且帶有文檔

（3）Sass 這個版本是 Bootstrap 從 Less 到 Sass 的源碼移植項目，用於快速地在 Rails、Compass 或只針對 Sass 的項目中引入。

對於我這樣不是專門從事前端開發的，我也不知道第三種方式是什麼意思，看樣子挺高大上的，建議下載第二個版本，最起碼人家有文檔啊。

對於第一種和第二種方式，咱們解壓縮後都會找到js,css,fonts文件夾，這幾個文件夾就包括了咱們開發過程當中要使用到的文件，在項目中引入就好。其實若是能夠熟練使用Bootstrap了，能夠不用下載了，能夠直接使用Bootstrap爲本身搭建的CDN加速服務，引用方式以下

Code<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- 可選的Bootstrap主題文件（通常不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- jQuery文件。務必在bootstrap.min.js 以前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

四，Bootstrap的使用

Bootstrap在文檔中給了一個最簡單的 Bootstrap 頁面。以下

Code<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <title>Bootstrap 101 Template</title>

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

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

示例中給出了Bootstrap的使用，而且給出了在IE版本低於9的狀況下要引入的文件

在某些狀況下，咱們不但願使用響應式佈局，那麼咱們就要禁用響應式佈局，文檔也給了幾種禁用響應式佈局的方式，以下：

（1）移除此 CSS 文檔中提到的設置瀏覽器視口（viewport）的標籤：<meta>。

（2）經過爲 .container 類設置一個 width 值從而覆蓋框架的默認 width 設置，例如 width: 970px !important; 。請確保這些設置所有放在默認的 Bootstrap CSS 文件的後面。注意，若是你把它放到媒體查詢中，也能夠略去!important 。

（3）若是使用了導航條，須要移除全部導航條的摺疊和展開行爲。

（4）對於柵格佈局，額外增長 .col-xs-* 類或替換掉 .col-md-* 和 .col-lg-*。不要擔憂，針對超小屏幕設備的柵格系統可以在全部分辨率的環境下展開。

針對 IE8 仍然須要額外引入 Respond.js 文件（因爲仍然利用了瀏覽器對媒體查詢（media query）的支持，所以還須要作處理）。這樣就禁用了 Bootstrap 對移動設備的響應式支持。

五，對瀏覽器的支持

對各個廠商的瀏覽器以及版本的支持能夠說是最TMD讓人頭疼的問題的，更可惡的是居然還有那麼多人用IE6。因此對瀏覽器的支持程度也是網站開發必需要考慮的，下面咱們來看看Bootstrap對瀏覽器的支持怎麼樣吧

在 Windows 平臺，Bootstrap支持 Internet Explorer 8-11。

Bootstrap 在 Chromium 和 Linux 版 Chrome、Linux 版 Firefox 和 Internet Explorer 7 上的表現也是很不錯的，雖然咱們不對其進行官方支持。

另外國內瀏覽器廠商通常都支持兼容模式（即 IE 內核）和高速模式（即 webkit 內核），不幸的是，全部國產瀏覽器都是默認使用兼容模式，這就形成因爲低版本 IE （IE8 及如下）內核讓基於 Bootstrap 構建的網站展示效果很糟糕的狀況。幸運的是，國內瀏覽器廠商逐漸意識到了這一點，某些廠商已經開始有所做爲了！

將下面的 <meta> 標籤加入到頁面中，可讓部分國產瀏覽器默認採用高速模式渲染頁面：

Code<meta name="renderer" content="webkit">

不過目前只有360瀏覽器支持這個標籤。

以上只是Bootstrap的初識，在其Bootstrap給的文檔中還有不少說明，在這裏就很少說了。

以上參考了Bootstrap的官方文檔，有什麼不對之處，請指出，謝謝。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。