051_Bootstrap 框架

時間 2019-11-13

標籤 bootstrap 框架欄目 Bootstarp 简体版

原文原文鏈接

一，Bootstrap介紹 css

Bootstrap是Twitter開源的基於HTML、CSS、JavaScript的前端框架。html

它是爲實現快速開發Web應用程序而設計的一套前端工具包。前端

它支持響應式佈局，而且在V3版本以後堅持移動設備優先。python

二，爲何要使用Bootstrap？npm

在Bootstrap出現以前：bootstrap

命名：重複、複雜、無心義（想個名字費勁）瀏覽器

樣式：重複、冗餘、不規範、不和諧前端框架

頁面：錯亂、不規範、不和諧框架

在使用Bootstrap以後：各類命名都統一而且規範化。頁面風格統一，畫面和諧。ide

三，Bootstrap下載

官方地址：https://getbootstrap.com

中文地址：https://www.bootcss.com

咱們使用V3版本的Bootstrap，咱們下載的是用於生產環境的Bootstrap。

四，Bootstrap環境搭建

下載後解壓的文件目錄結構：

bootstrap-3.3.7-dist/
├── css  // CSS文件
│   ├── bootstrap-theme.css  // Bootstrap主題樣式文件
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css  // 主題相關樣式壓縮文件
│   ├── bootstrap-theme.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css  // 核心CSS樣式壓縮文件
│   └── bootstrap.min.css.map
├── fonts  // 字體文件
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons-halflings-regular.woff2
└── js  // JS文件
    ├── bootstrap.js
    ├── bootstrap.min.js  // 核心JS壓縮文件
    └── npm.js

處理依賴

　　因爲Bootstrap的某些組件依賴於jQuery，因此請確保下載對應版本的jQuery文件，來保證Bootstrap相關組件運行正常。

五，Bootstrap 概覽

概覽：https://v3.bootcss.com/css/

1，HTML5 文檔類型

　　使用 Bootstrap 須要將頁面設置爲 HTML5 文檔類型。

　　在項目中的每一頁都要參照下面的格式進行設置。

<!DOCTYPE html>
<html lang="zh-CN">
  ...
</html>

2，移動設備優先

　　Bootstrap 將對移動的設備樣式融合進了框架，而不是增長一個文件。因此，Bootstrap是移動設備優先

　　2.1，自動適當的適應移動設備

　　　　自動適當的繪製和觸屏縮放須要在 <head> 中添加 viewport 元數據標籤

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

　　2.2，在移動設備上禁用其縮放(zooming)功能

　　　　經過爲視口（viewport）設置 meta 屬性爲 user-scalable=no 能夠禁用其縮放(zooming)功能

　　　　更具本身的狀況而定！！禁用縮放功能後，用戶只能滾動屏幕，讓網頁看上去更像原生應用的感受。

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

3，網頁樣式重置（normalize.css）

　　各類不一樣的瀏覽器的有些默認樣式不一樣，對網頁產生影響

　　3.1，之前手寫重置

　　　　在 <head> 中加入

<style>
	*{
		margin:0;
	}
</style

　　3.2，這裏用 normalize.css

　　　　介紹：爲了加強跨瀏覽器表現的一致性，咱們使用了 Normalize.css，這是由 Nicolas Gallagher 和 Jonathan Neal 維護的一個CSS 重置樣式庫。

　　　　使用：在 BootCDN 網，搜索 normalize 複製 link 標籤放入<head> 中；搜索：https://www.bootcdn.cn/normalize/

4，佈局容器

　　介紹：Bootstrap 須要爲頁面內容和柵格系統包裹一個 .container 容器。咱們提供了兩個做此用處的類。注意，因爲 padding（盒子的屬性） 等屬性的緣由，這兩種容器類不能互相嵌套。

　　4.1，.container 類用於固定寬度並支持響應式佈局的容器(效果：網頁兩邊留必定空間)

<div class="container">
     須要此效果的標籤都放入這裏
</div>

4.2，.container-fluid 類用於 100% 寬度，佔據所有視口（viewport）的容器。(效果：網頁兩邊不留空間，有盒子內邊距)

<div class="container-fluid">
    須要此效果的標籤
</div>

5，柵格系統

介紹：Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。它包含了易於使用的預約義類，還有強大的mixin 用於生成更具語義的佈局。

　　即：將一行最多分爲12列的佈局

使用：「行(row)」必須是包含在.container （固定寬度）或 .container-fluid （100% 寬度）中，以便爲其賦予合適的排列（aligment）和內補（padding）。

　　5.1，簡單的劃分列

<div class="container">
    <div class="row">
        <div class="col-md-1">佔1列</div>
        <div class="col-md-10">佔10列</div>
        <div class="col-md-1">佔1列</div>
    </div>
</div>

　　5.2，移動端與pc端分開設置不一樣排列

<div class="container">
    <div class="row">
        <div class="col-md-1 col-xs-4">PC佔1列,移動4列</div>
        <div class="col-md-10 col-xs-4">PC佔10列,移動4列</div>
        <div class="col-md-1 col-xs-4">PC佔1列,移動4列</div>
    </div>
</div>

6，媒體查詢

　　同過 @media 查詢所在媒體的屏幕大小

　　6.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">
    <title>媒體查詢</title>
    <style>
        .c {
            height: 100px;
            width: 100px;
        }
        .c1 {
            background-color: red;
        }

/*當打開網頁的設備是一個顯示器設備，
而且顯示器的寬度小於400px時，
使用下面的樣式覆蓋*/
        @media screen and (max-width: 400px) {
            .c1 {
                background-color: green;
            }
        }
    </style>

</head>
<body>
<div class="c c1"></div>
</body>
<html>

View Code

　　6.2，柵格系統的分割列的分界點

　　　　在柵格系統中，咱們在 Less 文件中使用如下媒體查詢（media query）來建立關鍵的分界點閾值。

/* 超小屏幕（手機，小於 768px） */
/* 沒有任何媒體查詢相關的代碼，由於這在 Bootstrap 中是默認的（還記得 Bootstrap 是移動設備優先的嗎？） */

/* 小屏幕（平板，大於等於 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面顯示器，大於等於 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面顯示器，大於等於 1200px） */
@media (min-width: @screen-lg-min) { ... }

　　咱們偶爾也會在媒體查詢代碼中包含 max-width 從而將 CSS 的影響限制在更小範圍的屏幕大小以內。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

　　min ：最小屏幕大小 max ：最大屏幕大小

　　6.3，經過下表能夠詳細查看 Bootstrap 的柵格系統是如何在多種屏幕設備上工做的。

	超小屏幕手機 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面顯示器 (≥992px)	大屏幕大桌面顯示器 (≥1200px)
柵格系統行爲	老是水平排列	開始是堆疊在一塊兒的，當大於這些閾值時將變爲水平排列C
`.container` 最大寬度	None （自動）	750px	970px	1170px
類前綴	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）數	12
最大列（column）寬	自動	~62px	~81px	~97px
槽（gutter）寬	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

1. 【架構框架】IoC框架
2. 開源框架：JFinal框架
3. js 框架及uI框架
4. web框架---Django框架
5. MTV框架和MVC框架
6. 框架集與框架.
7. SSM框架與SSH框架
8. MVVM框架與MVC框架
9. Java框架之MyBatis框架
10. pythonweb框架django框架1
更多相關文章...
• Docker 架構 - Docker教程
• SSH框架（Struts2+Spring+Hibernate）搭建整合詳細步驟 - Spring教程
• 適用於PHP初學者的學習線路和建議
• 常用的分佈式事務解決方案

相關標籤/搜索

每日一句

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