Bootstrap 概覽

時間 2020-05-28

原文原文鏈接

目錄
一、移動設備
二、響應式圖片
三、Normalize
四、Containerscss

一、移動設備
在Bootstrap 3中，咱們重寫了整個框架，使其一開始就是對移動設備友好的。此次不是簡單的增長一些可選的針對移動設備的樣式，而是直接融合進了框架的內核中。也就是說，Bootstrap是移動設備優先的。針對移動設備的樣式融合進了框架的每一個角落，而不是一個單一的文件。瀏覽器

爲了確保適當的繪製和觸屏縮放，須要在<head>之中添加viewport元數據標籤。框架

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在移動設備瀏覽器上，經過爲viewport meta標籤添加user-scalable=no能夠禁用其縮放（zooming）功能。這樣禁用縮放功能後，用戶只能滾動屏幕，就能讓你的網站看上去更像原生應用的感受。注意，這種方式咱們並不推薦全部網站使用，仍是要看你本身的狀況而定！less

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

二、響應式圖片
經過添加.img-responsive class可讓Bootstrap 3中的圖片對響應式佈局的支持更友好。其實質是爲圖片賦予了max-width: 100%; 和height: auto;屬性，可讓圖片按比例縮放，不超過其父元素的尺寸。佈局

<img src="<%=path %>/demo/niusb/sprite.png" class="img-responsive" />

三、Normalize
Normalize.css的目的是讓HTML元素在不一樣瀏覽器裏的展示形式一致。網站

四、Containers
用.container包裹頁面上的內容即可實現居中對齊。在不一樣的媒體查詢閾值範圍內都爲container設置了width，用以匹配柵格系統。
注意，因爲設置了padding 和固定寬度，.container不能嵌套。url

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

若是，您認爲閱讀這篇博客讓您有些收穫，不妨點擊一下右下角的【推薦】。
若是，您但願更容易地發現個人新博客，不妨點擊一下左下角的【關注我】。
若是，您對個人博客所講述的內容有興趣，請繼續關注個人後續博客，我是【Ruthless】。spa

本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。scala

相關標籤/搜索

每日一句

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