bootstrap基礎學習一篇

weixin_33896726發表於2016-02-26
boot

官網：http://www.bootcss.com/

這裡，主要講解bootstrap3。關於他的介紹就不用複述了。

1.示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <title>bootstrap-1</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrap-theme.css">
    <link rel="stylesheet" href="../css/bootstrap-theme.min.css">
</head>
<body>
<h1>你好，世界！</h1>  

    <script src="../js/bootstrap.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</body>
</html>

a.先要下載,對應版本的bootstrap檔案。

b.<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">

width 屬性控制裝置的寬度。假設您的網站將被帶有不同螢幕解析度的裝置瀏覽，那麼將它設定為 device-width 可以確保它能正確呈現在不同裝置上。

initial-scale=1.0 確保網頁載入時，以 1:1 的比例呈現，不會有任何的縮放。

在移動裝置瀏覽器上，通過為 viewport meta 標籤新增 user-scalable=no 可以禁用其縮放（zooming）功能。

通常情況下，maximum-scale=1.0 與 user-scalable=no 一起使用。這樣禁用縮放功能後，使用者只能滾動螢幕，就能讓您的網站看上去更像原生應用的感覺。

c.正確引用，css,js檔案。

2.響應式圖片 

<img src="../img/a.jpg" class="img-responsive" alt="響應式影象" />

老版本：我們必須定義圖片的width，height等。

我們現在看看 class=“img-responsive”的樣式

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}

 3.容器（container）

    <div class="container">
      ...
    </div>

看看class="container"的css樣式

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

 

相關文章