關於bootstrap的基本架構

時間 2019-11-08

標籤關於 bootstrap 基本架構欄目 Bootstarp 简体版

原文原文鏈接

1、bootstrap 的使用css

　　1.下載bootstrapjquery

　　　　能夠從 http://getbootstrap.com/ 上下載 Bootstrap 的最新版本。當您點擊這個連接時，您將看到以下所示的網頁web

會看到兩個按鈕：bootstrap

Download Bootstrap：下載 Bootstrap。點擊該按鈕，您能夠下載 Bootstrap CSS、JavaScript 和字體的預編譯的壓縮版本。不包含文檔和最初的源代碼文件。
Download Source：下載源代碼。點擊該按鈕，您能夠直接從 from 上獲得最新的 Bootstrap LESS 和 JavaScript 源代碼。

　　2.使用bootstrap瀏覽器

　　　　使用bootstrap的時候，只須要導入bootstrap的文件就好了，有兩種方法導入佈局

　　　　1.本地安裝測試

　　　　　　用<link>標籤調用css樣式字體

　　　　2.在線安裝ui

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
<!-- jQuery文件。務必在bootstrap.min.js 以前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

2、響應式設計spa

　　1.認識響應式設計

　　　　響應式設計可使網頁適應於不一樣的設備，在現階段，響應式web設計的實現途徑包括：彈性網格、液態佈局、使用css media query技術等。

　　2.設計流程

　　　　1.肯定須要兼容的設備類型，屏幕尺寸

　　　　2.製做線框原型並進行測試

　　　　3.視覺設計

　　　　4.腳本實現

　　3.設計響應式佈局結構

　　　　由於網頁會根據屏幕寬度自動調整佈局，因此，不能使用絕對寬度的佈局，也不能使用具備絕對寬度的元素。

　　　　1. 設置 Meta 標籤

　　　　　　大多數移動瀏覽器將HTML頁面放大爲寬的視圖（viewport）以符合屏幕分辨率。你可使用視圖的meta標籤來進行重置。下面的視圖標籤告訴瀏覽器，使用設備的寬度做爲視圖寬度並禁止初始的縮放。在<head>標籤里加入這個meta標籤。

　　　　2.經過媒介查詢來設置樣式media queries

　　　　　　media queries是響應式設計的核心，若要定義一個屏幕的寬度範圍以及自定義類樣式，能夠這樣寫：

@media  screen and (min-width: 100px) and (max-width: 640px) {
                .Myclass{
                    ...
                    ...
                }
            }

3、柵格系統

　　1.柵格系統工做原理

　　　　1.row(行)必須包含在.container中，以便爲其賦予合適的排列和內補

　　　　2.使用row在水平方向建立一組列（列寬總個數應爲12個）

　　　　3.網頁內容要放在列內，只有列能做爲行的直接子元素。下面的代碼就是不合理的

<div class="row">
                <h1>固定佈局</h1>
                <div class="col-md-4">列寬4個</div>
                <div class="col-md-8">列寬8格</div>
            </div>

　　　　4.能夠經過padding建立列之間的間隔

.col-1{
                padding-left: 15px;
                padding-right: 15px;
            }

　　　　5.柵格系統的列是經過制定1到12的值來指定範圍的，好比

<div class="row">
                <div class="col-md-4">列寬4個</div>
                <div class="col-md-8">列寬8格</div>
            </div>

　　2.固定柵格與流式柵格

　　　　使用.container 和 .container-fluid分別設計

<h1>固定佈局</h1>
        <div class="container" >
            <div class="row">
                <div class="col-md-4">列寬4個</div>
                <div class="col-md-8">列寬8格</div>
            </div>
        </div>
        <h1>流式佈局</h1>
        <div class="container-fluid" >
            <div class="row">
                <div class="col-md-4">4個</div>
                <div class="col-md-8">8格</div>
            </div>
        </div>

效果以下：

　3.列的基本操做

　　　1.列偏移

　　　　使用offset系列類實現該功能

<div class="row">
                <div class="col-md-4">列寬4個</div>
                <div class="col-md-6 col-md-offset-2">列寬6格 偏移2格</div>
        </div>
        <div class="row">
                <div class="col-md-4 col-md-offset-4">列寬4個  偏移4格</div>    
            </div>

　　2.列排序

　　　　列排序經過push 和 pull 兩個類實現，push向右偏移，pull表示向左偏移

<div class="row">
                <div class="col-md-4 col-md-push-8">左列，顯示在右側</div>
                <div class="col-md-6 col-md-pull-4">中間，在左側</div>
                <div class="col-md-2 col-md-pull-4">右列，在中間</div>
        </div>

相關標籤/搜索

每日一句

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