明輝手游網(wǎng)中心：是一個(gè)免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺(tái)！

響應(yīng)式布局的開(kāi)發(fā)圖文說(shuō)明教程案例

發(fā)表時(shí)間：2023-09-18 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)，而且隨著目前大屏幕移動(dòng)設(shè)備的普及，用"大勢(shì)所趨"來(lái)形容也不為過(guò)。隨著越來(lái)越多的設(shè)計(jì)師采用這個(gè)技術(shù)，我們不僅看到很多的創(chuàng)新，還看到了一些成形的模式。移動(dòng)web前言移動(dòng)web ： 移動(dòng)端手機(jī)瀏覽器或者微信里面瀏覽的網(wǎng)...

響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)，而且隨著目前大屏幕移動(dòng)設(shè)備的普及，用"大勢(shì)所趨"來(lái)形容也不為過(guò)。隨著越來(lái)越多的設(shè)計(jì)師采用這個(gè)技術(shù)，我們不僅看到很多的創(chuàng)新，還看到了一些成形的模式。

移動(dòng)web前言

  1. 移動(dòng)web ： 移動(dòng)端手機(jī)瀏覽器或者微信里面瀏覽的網(wǎng)頁(yè)

  2. 移動(dòng)APP ： 手機(jī)上需要下載安裝的應(yīng)用程序

1. 移動(dòng)web介紹

1.1 響應(yīng)式開(kāi)發(fā) 一套代碼運(yùn)行多個(gè)終端 優(yōu)點(diǎn):開(kāi)發(fā)快 維護(hù)快 適配好 缺點(diǎn)加載速度慢

1.2 純?cè)苿?dòng)web開(kāi)發(fā) 一套代碼運(yùn)行一個(gè)端 優(yōu)點(diǎn): 加載速度快 缺點(diǎn)開(kāi)發(fā)慢 維護(hù)慢 適配差

1.3 應(yīng)用場(chǎng)景 :

  1. 響應(yīng)式開(kāi)發(fā)用在一些新建的網(wǎng)站(PC和移動(dòng)同時(shí)出來(lái)) 對(duì)加載速度要求不是很高

  2. 純?cè)苿?dòng)web開(kāi)發(fā) 一般會(huì)用在一些已經(jīng)有PC端上線的網(wǎng)站 再次開(kāi)發(fā)移動(dòng)端 移動(dòng)端需要加載速度很快的網(wǎng)站

2. 響應(yīng)式開(kāi)發(fā)原理

2.1 CSS3的媒體查詢： 通過(guò)查詢屏幕的的寬度來(lái)指定某個(gè)寬度區(qū)間的網(wǎng)頁(yè)布局

2.2 常見(jiàn)設(shè)備的屏幕寬度

  1. 超小屏幕（手機(jī)） 768px以下

  2. 小屏設(shè)備（平板） 768px-992px

  3. 中等屏幕（舊式電腦） 992px-1200px

  4. 大屏設(shè)備（現(xiàn)代電腦） 1200px以上

2.3 媒體查詢的語(yǔ)法

    @media screen and (條件){
        //滿足條件執(zhí)行CSS代碼
    }

    and的前后必須有空格  條件通常只有兩個(gè) min-width max-width

    @media (條件){
        //滿足條件執(zhí)行CSS代碼
    }

    可以簡(jiǎn)寫(xiě)省略 screen and

2.4 媒體查詢的寫(xiě)法的順序和特性

2.4.1 條件判斷有兩種

min-width 屏幕寬度大于等于某個(gè)值生效 (最小寬度)

max-width 屏幕寬度小于等于某個(gè)值的時(shí)候生效 (最大寬度)

2.4.2 條件判斷的參考值通常有以下4個(gè)

  width > 1200  大屏幕 大屏PC設(shè)備
  992 < width < 1200  中屏幕 老式電腦
  768 < width < 992  小屏幕 平板設(shè)備
  width < 768 超小屏幕 手機(jī)

2.4.3 媒體查詢判斷的順序說(shuō)明

1.如果使用min-width條件判斷的時(shí)候 條件判斷大小 要從小到大寫(xiě)

  /*min-width: 768px 當(dāng)屏幕的寬度大于等于768時(shí) 背景顏色為green */
  @media screen and (min-width: 768px){
      body{
          background-color: green;
      }
  }

  /*min-width: 992px 當(dāng)屏幕的寬度大于等于992時(shí) 背景顏色為blue*/
  @media screen and (min-width: 992px){
      body{
          background-color: blue;
      }
  }

  /*min-width: 1200px 當(dāng)寬度大于等于1200時(shí) 背景顏色為pink*/
  @media screen and (min-width: 1200px){
      body{
          background-color: pink;
      }
  }

2.如果使用max-width條件判斷到時(shí)候 條件判斷大小 要從大到小寫(xiě)

  /*max-width: 1200px:寬度在1200以下*/
  @media screen and (max-width: 1200px) {
      body {
          background-color: green;
      }
  }

  /*max-width: 992px:寬度在992以下*/
  @media screen and (max-width: 992px) {
      body {
          background-color: blue;
      }
  }

  /*max-width: 768px:寬度在768以下*/
  @media screen and (max-width: 768px) {
      body {
          background-color: pink;
      }
  }

2.3.4 寫(xiě)法的特性有兩個(gè)

  1. 向上兼容 只寫(xiě)了小的判斷, 大的判斷沒(méi)有寫(xiě), 但是在大屏幕下也會(huì)生效

  2. 向下覆蓋 同時(shí)寫(xiě)了小的判斷和大的判斷, 滿足大的條件會(huì)生效大的條件的樣式, 大的條件寫(xiě)在后面會(huì)把小的條件的樣式覆蓋

2.3.5 使用媒體查詢實(shí)現(xiàn)網(wǎng)頁(yè)布局

  1. 在大屏幕下顯示4列 中屏幕顯示3列 小屏幕顯示2列 超小屏幕顯示1列

      /*w 768~992  每一行放置兩個(gè)子元素  50%*/
  @media screen and (min-width: 768px){
      .box > p{
          width: 50%;
      }
  }
  /* w 992~1200 每一行放置三個(gè)子元素  33.33%*/
  @media screen and (min-width: 992px){
      .box > p{
          width: 33.33%;
      }
  }
  /*w >1200 每一行放置四個(gè)子元素 25%*/
  @media screen and (min-width: 1200px){
      .box > p{
          width: 25%;
      }
  }

  2. 原理就是通過(guò)媒體查詢判斷條件改變盒子的寬度

3. 響應(yīng)式開(kāi)發(fā)框架 Bootstrap介紹

  1. 特點(diǎn)：靈活簡(jiǎn)介，代碼優(yōu)雅，美觀大方

  2. 好處：Bootstrap 讓我們的Web開(kāi)發(fā)更簡(jiǎn)單，更快捷

  3. 版本：目前市面上使用最多的是3.x.x版本 除此之外還有2.3.2對(duì)IE8支持 現(xiàn)已有4.0.0的正式版

  4. 相關(guān)鏈接: 中文官網(wǎng) 使用Bootstrap構(gòu)建的網(wǎng)站

4. 庫(kù)和框架的區(qū)別

  1. jquery : 庫(kù) 便捷的DOM (你想實(shí)現(xiàn)什么功能就調(diào)用什么方法)(主導(dǎo)者是你 你調(diào)用庫(kù))

  2. Bootstrap : 框架 界面工具集 框架是他來(lái)控制你 (框架制定好了一系列規(guī)則 用戶按照規(guī)則進(jìn)行編寫(xiě))可以實(shí)現(xiàn)整個(gè)網(wǎng)站大多數(shù)功能

  3. 插件 : fullpage 功能比較單一 只是實(shí)現(xiàn)了網(wǎng)頁(yè)里面的某個(gè)或幾個(gè)功能

5. Bootstrap的基本使用

5.1 下載: 去Bootstrap官網(wǎng)中文官網(wǎng) 的起步里面下載生產(chǎn)環(huán)境的Bootstrap 解壓之后把整個(gè)文件夾放到項(xiàng)目里面來(lái) 也可以使用BootstrapCDN

5.2 引入Bootstrap

  1. 先引入Bootstrap的CSS(如果想要主題可以在引入帶主題的CSS)

  2. 再引入自己的CSS

  3. 先引入jquery(因?yàn)锽ootstrap依賴jquery)

  4. 再引入Bootstrap的JS

  5. 再引入自己的JS

<!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個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
    <title>Bootstrap 101 Template</title>

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

    <!-- html5 shiv是為了讓低版本IE支持html5新標(biāo)簽  -->
    <!-- respond.js是為了讓低版本IE支持CSS3媒體查詢 -->
    <!-- 但是注意respond.js需要在服務(wù)器下運(yùn)行 就是localhost 不能再file下運(yùn)行不然無(wú)法工作 -->
    <!-- 條件注釋 IE版本小于IE9 條件成立就執(zhí)行下面的代碼  如果條件不成立就是注釋不執(zhí)行 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  
    <!-- bootstrap的JS插件依賴jquery 所以要先引入jquery -->
    <script src="lib/jquery/jquery.min.js"></script>
    <!-- 在引入Bootstrap的JS文件 -->
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

5.3 引包的順序

  1. 先引入第三方的框架

  2. 再引入自己的文件

  3. CSS放到head里面引入(有些特殊的JS文件對(duì)頁(yè)面渲染有作用的要放到head中)

  4. js放到body結(jié)束標(biāo)簽是上面引入

5.4 視口

  1. 視口: 瀏覽器的可視窗口 在PC端是會(huì)受到瀏覽器窗口變化而變化

  2. 視口在PC端是可視窗口(會(huì)變的) 在移動(dòng)端有一個(gè)固定的值 通常是默認(rèn)980

  3. 但是默認(rèn)移動(dòng)端的時(shí)候980會(huì)造成網(wǎng)頁(yè)的縮放或者出滾動(dòng)條

  4. 解決移動(dòng)端默認(rèn)視口會(huì)造成網(wǎng)頁(yè)縮放和滾動(dòng)條 設(shè)置meta標(biāo)簽設(shè)置默認(rèn)是視口的寬度等于設(shè)備的寬度<meta name="viewport" content="width=device-width">

  5. 視口的其他屬性 初始化縮放 initial-scale=1.0 是否允許用戶縮放 user-scalable=no 最大 maximum-scale=1.0 和最小縮放 minimum-scale=1.0

  6. meta:vp+tab 凡是寫(xiě)移動(dòng)端頁(yè)面一來(lái)就是加上視口

5.5 瀏覽器兼容模式

1.<meta http-equiv="X-UA-Compatible" content="IE=edge">

  1. http-equiv="X-UA-Compatible" 表示設(shè)置IE瀏覽器的兼容模式

  2. content="IE=edge" 表示讓IE瀏覽器用最新的渲染引擎渲染頁(yè)面

6. Bootstrap文檔

6.1 基礎(chǔ)CSS樣式

  • 概要 (常用)

    • 布局容器

  • 柵格系統(tǒng) (常用)

    • xs : 超小屏幕 手機(jī) (<768px)

    • sm : 小屏幕 平板 (≥768px)

    • md : 中等屏幕 桌面顯示器 (≥992px)

    • lg : 大屏幕 大桌面顯示器 (≥1200px)

  • 預(yù)置排版樣式

    • 統(tǒng)一預(yù)制標(biāo)簽樣式

    • 文本對(duì)齊 (常用)

    • 改變大小寫(xiě)

  • 代碼樣式

    • 頁(yè)面輸出代碼

  • 表格樣式

    • 各種表格樣式

  • 表單樣式

    • 各種表單組合的樣式

  • 按鈕樣式

    • 各種按鈕顏色 和 按鈕大小等樣式 (常用)

  • 圖片樣式

    • 圖片圓角的樣式

  • 輔助工具類

    • 內(nèi)容塊居中 (常用)

    • 快速浮動(dòng) 和 清除浮動(dòng) (常用)

    • 顯示隱藏 (常用)

  • 響應(yīng)式工具類 (常用)

    • hidden-xx : 在某種屏幕下隱藏

    • visible-xx : 在某種屏幕尺寸下顯示

  • 基礎(chǔ)CSS這塊只是將我們常用想一些元素的樣式做了美化,如果需要使用直接拿過(guò)來(lái)用就行了

6.2 預(yù)制界面組件

  • 導(dǎo)航 (常用)

  • 導(dǎo)航條 (常用)

  • 面包屑導(dǎo)航

  • 下拉菜單 (常用)

  • 按鈕式下拉菜單

  • 按鈕組

  • 輸入框組

  • 警告框

  • 頁(yè)頭

  • 分頁(yè)

  • 列表組 (常用)

  • 面板 (常用)

  • 媒體對(duì)象 (常用)

  • 進(jìn)度條

  • Glyphicons字體圖標(biāo) (常用)

  • 標(biāo)簽

  • 徽章

  • 縮略圖

  • 大屏幕

  • 嵌入內(nèi)容

  • 內(nèi)嵌

  • 將我們?nèi)粘Ｊ褂玫囊恍┕δ軌K例如下拉菜單,提前寫(xiě)好,我們使用時(shí)直接找到對(duì)應(yīng)的demo然后拿回來(lái)做相應(yīng)調(diào)整就行了

6.3 Javascript 插件

  • 模態(tài)對(duì)話框 (常用)

  • 下拉菜單 (常用)

  • 滾動(dòng)監(jiān)聽(tīng) (常用)

  • 標(biāo)簽頁(yè) (常用)

  • 工具提示

  • 彈出框

  • 警告框

  • 按鈕

  • 折疊面板 (常用)

  • 輪播圖 (常用)

  • 吸頂效果 (常用)

    • data-spy="affix"

    • data-offset-top="什么位置出現(xiàn)"

    • data-offset-bottom="什么位置消失"

6.4 Javascript插件依賴情況

  • jQuery

    Bootstrap 框架中的所有JS組件都依賴jquery實(shí)現(xiàn)

7. 項(xiàng)目搭建

7.1 搭建Bootstrap頁(yè)面骨架及項(xiàng)目目錄結(jié)構(gòu)

├─ /project/ ··················· 項(xiàng)目所在目錄
└─┬─ /css/ ······················· 自己的CSS文件
  ├─ /font/ ······················ 使用到的字體文件
  ├─ /img/ ······················· 使用到的圖片文件
  ├─ /js/ ························ 自己寫(xiě)的JS腳步
  ├─ /lib/ ······················· 從第三方下載回來(lái)的庫(kù)【只用不改】
  ├─ /favicon.ico ················ 站點(diǎn)圖標(biāo)
  └─ /index.html ················· 入口文件

7.1.1 約定編碼規(guī)范

1. HTML約定

  1. 在head中引入必要的CSS文件,優(yōu)先引入第三方的CSS,方便我們自己的樣式覆蓋

  2. 在body末尾引入必要的JS文件,優(yōu)先引入第三方的JS文件,注意JS文件之間的依賴關(guān)系

比如Bootstrap.js 依賴jquery,那就應(yīng)該先引入jquery.js 然后引用Bootstrap.js

2. CSS約定

  1. 除了公共級(jí)別的樣式,其余樣式全部由模塊前綴

  2. 盡量使用直接子代選擇器 少用間接子代選擇器避免誤殺

7.2 創(chuàng)建主頁(yè) 引入相應(yīng)的文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="lib/bootstrap/bootstrap.css">
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <script src="lib/jquery/jquery.js"></script>
  <script src="lib/bootstrap/bootstrap.js"></script>
  <script src="index.js"></script>
</body>
</html>

7.3 在我們默認(rèn)樣式表中講默認(rèn)字體設(shè)置為

body{
  font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
}

7.4 完成頁(yè)面空結(jié)構(gòu)

先劃分好頁(yè)面的大容器,然后具體看每一個(gè)容器的單獨(dú)情況
  <!--  頭部區(qū)域 -->
  <header></header>
  <!-- /頭部區(qū)域 -->
  <!--  廣告輪播 -->
  <section></section>
  <!-- /廣告輪播 -->
  <!--  立即預(yù)約 -->
  <section></section>
  <!-- /立即預(yù)約 -->
  <!--  產(chǎn)品介紹 -->
  <section></section>
  <!-- /產(chǎn)品介紹 -->
  <!--  新聞資訊 -->
  <section></section>
  <!-- /新聞資訊 -->
  <!--  合作伙伴 -->
  <section></section>
  <!-- /合作伙伴 -->
  <!-- 腳注區(qū)域 -->
  <footer></footer>
  <!-- /腳注區(qū)域 -->

<!-- ### 7.5 構(gòu)建頂部通欄

    <p class="topbar hidden-xs hidden-sm">
        <p class="container">
            <p class="row">
                <p class="col-md-2 text-center">
                    <i class="icon-mobilephone"></i> 手機(jī)微金所 <i class="glyphicon glyphicon-chevron-down"></i>
                </p>
                <p class="col-md-5 text-center"> <i class="icon-telephone"></i> 4006-89-4006（服務(wù)時(shí)間：9:00-21:00）
                </p>
                <p class="col-md-2 text-center">常見(jiàn)問(wèn)題 財(cái)富登錄</p>
                <p class="col-md-3 text-center">
                    <a href="" class="btn btn-danger">免費(fèi)注冊(cè)</a>
                    <a href="" class="btn btn-link">登錄</a>
                </p>
            </p>
        </p>
    </p>

7.5.1 container 類 (版心)

  • 用于定義一個(gè)固定寬度且居中的版心

      <!DOCTYPE html>
  <html lang="en">

  <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style>
      html,
      body {
          margin: 0;
          padding: 0;
      }

      .container {
          height: 200px;
          width: 100%;
          background-color: #f40;
          margin: 0 auto;
      }

      @media (min-width:768px) {
          .container {
              width: 750px;
          }
      }

      @media (min-width:992px) {
          .container {
              width: 970px;
          }
      }

      @media (min-width:1200px) {
          .container {
              width: 1170px;
          }
      }
      </style>
  </head>

  <body>
      <p class="container">
      </p>
      </script>
  </body>

  </html>

8. 柵格系統(tǒng)

<p class="row">
  <p class="col-md-2">
  </p>
  <p class="col-md-5">
  </p>
  <p class="col-md-2">
  </p>
  <p class="col-md-3">
  </p>
</p>

1. row類

<p class="row">
</p>

2. col-**-* 類

<p class="col-md-3">
</p>

  • col-xs-[列數(shù)]：在超小屏幕下展示幾份

  • col-sm-[列數(shù)]：在小屏幕下展示幾份

  • col-md-[列數(shù)]：在中等屏幕下展示幾份

  • col-lg-[列數(shù)]：在大屏幕下展示幾份

  • xs : 超小屏幕 手機(jī) (<768px)

  • sm : 小屏幕 平板 (≥768px)

  • md : 中等屏幕 桌面顯示器 (≥992px)

  • lg : 大屏幕 大桌面顯示器 (≥1200px)

此處頂部通欄已經(jīng)被劃分為四列
text-center的作用就是讓內(nèi)部?jī)?nèi)容居中顯示

9.字體圖標(biāo)

1. 字體圖標(biāo)生成網(wǎng)站

@font-face {
    font-family: 'itcast';
    src: url('../fonts/MiFie-Web-Font.eot') format('embedded-opentype'), url('../fonts/MiFie-Web-Font.svg') format('svg'), url('../fonts/MiFie-Web-Font.ttf') format('truetype'), url('../fonts/MiFie-Web-Font.woff') format('woff');
}

[class^="icon-"],
[class*=" icon-"] {
    /*注意上面選擇器中間的空格
我們使用的名為itcast的字體就是最上面的@font-face的方式聲明*/
    /*當(dāng)字體名字之間有空格的都要用引號(hào)引起來(lái) ,如果沒(méi)有空格的話可以不用引號(hào)*/
    font-family: itcast;
}

2. 字體格式

  • eot : embedded-opentype

  • svg : svg

  • ttf : truetype

  • woff : woff

3. 字體圖標(biāo)生成步驟

  1. 進(jìn)入 https://icomoon.io/ 網(wǎng)站

  2. 點(diǎn)擊右上角 icomoonApp

  3. 點(diǎn)擊左上角 import icons

  4. 選中所有導(dǎo)入的圖標(biāo)

  5. 點(diǎn)擊右下角 generate font

  6. 點(diǎn)擊左上角 preferences 設(shè)置字體名稱 和 類名前綴

  7. 點(diǎn)擊download

  8. 解壓生成好的壓縮包 里面有demo.html

  9. 打開(kāi)demo.html能夠查看圖標(biāo)對(duì)應(yīng)類名

  10. 使用 的時(shí)候 把 fonts文件夾放到項(xiàng)目 并且引入style.css（這里面就定義了那些圖標(biāo)的類名）

4. 字體圖標(biāo)的使用步驟

  1. 得下載或者生成或者去借(去別的網(wǎng)站拿)一個(gè)字體文件

  2. 使用@font-face定義一個(gè)字體名稱

    1. 先指定字體的名稱font-family:"字體名稱";

    2. 引入這個(gè)字體名稱對(duì)應(yīng)的字體文件 如果不考慮兼容只引入ttf src:url(路徑.ttf) format("truetype")

  3. 定義一個(gè)圖標(biāo)的類名來(lái)使用圖標(biāo)

    1. 先使用圖標(biāo)對(duì)應(yīng)的字體名稱font-family:"字體名稱";

    2. 指定圖標(biāo)的編碼放到類名的偽元素的content里面 content: "e945";

    3. 清除默認(rèn)的斜體

  4. 在頁(yè)面使用定義好的圖標(biāo)的類名就可以了

總結(jié)

  1. 移動(dòng)web ： 移動(dòng)端瀏覽器顯示的網(wǎng)頁(yè)

  2. 移動(dòng)web的兩種開(kāi)發(fā)方式

    1. 響應(yīng)式開(kāi)發(fā)方式：一套代碼運(yùn)行多個(gè)終端 開(kāi)發(fā)快維護(hù)快加載慢 適配好 用在一些新建的網(wǎng)站對(duì)速度要求不高的

    2. 純?cè)苿?dòng)web開(kāi)發(fā) ：分別寫(xiě)兩套代碼 開(kāi)發(fā)慢維護(hù)慢加載快 適配差 用在一些已經(jīng)上線的了PC再次開(kāi)發(fā)移動(dòng)web 對(duì)加載速度要求高的網(wǎng)頁(yè)

  3. 響應(yīng)式開(kāi)發(fā)原理

    1. CSS3媒體查詢實(shí)現(xiàn)

    2. 媒體查詢語(yǔ)法

        @meida screen and (){

    sreen and 可以省略 如果不省略 and前后要有空格

  }

    3. 媒體查詢的條件判斷和順序說(shuō)明

      1. 媒體查詢有兩個(gè)條件判斷 min-width: 屏幕寬度大于等于某個(gè)值成立 條件判斷要從小到大寫(xiě)
2. max-width：屏幕寬度小于等于某個(gè)值成立 條件判斷要從大到小寫(xiě)

    4. 媒體查詢的特性

      1. 向上兼容 ： 沒(méi)有寫(xiě)大的判斷 也能生效小屏幕的判斷
2. 向下覆蓋 ： 同時(shí)寫(xiě)了小和大屏幕的判斷 大屏幕在后面會(huì)覆蓋小屏幕的樣式

  4. 響應(yīng)式開(kāi)發(fā)框架Bootstrap： 靈活簡(jiǎn)介 代碼優(yōu)雅 美觀大方

  5. 使用Bootstrap框架

    1. 下載

    2. 引入bootstrap

        1. 先引入bootstrap.css
  2. 引入jquery
  3. 引入bootstrap.js

  6. 視口 : 瀏覽器可視窗口移動(dòng)端設(shè)置視口和設(shè)備一樣寬

  7. 布局容器 .container : 固定寬度且居中 .container-fluid 寬度100%

  8. 柵格系統(tǒng)


    1. 柵格系統(tǒng)的4個(gè)檔次
      col-xs w<768
      col-sm 768<w<992
      col-md 992<w<1200
      col-lg w>1200

    2. 柵格系統(tǒng)默認(rèn)一行分為12列
      分成4列 col-xx-3
      分理3列 col-xx-4
      分理2列 col-xx-6
      分理1列 col-xx-12

    3. 搭建項(xiàng)目 fonts css/font.css img lib

    4. 創(chuàng)建Index.html 引包 先引入第三方 再引入自己的

    5. 創(chuàng)建頁(yè)面的骨架

    6. 搭建頂部通欄 .container>.row>col-md-2col-md-5col-md-2col-md-3

    7. 字體圖標(biāo)

      1. bootstrap官方圖標(biāo) 組件->字體圖標(biāo) 拷貝圖標(biāo)類名即可

      2. 自己生成字體圖標(biāo) icomoon.io網(wǎng)站生成

      3. 引入生成好的字體圖標(biāo)樣式文件同時(shí)字體文件要放在旁邊

相關(guān)推薦：

詳解前端響應(yīng)式布局、響應(yīng)式圖片，與自制柵格系統(tǒng)

CSS3怎么做出響應(yīng)式布局

如何實(shí)現(xiàn)響應(yīng)式布局

以上就是響應(yīng)式布局的開(kāi)發(fā)教程實(shí)例的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。