溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

bootstrap怎么使用

發(fā)布時(shí)間：2022-03-23 14:18:04 來源：億速云 閱讀：155 作者：iii 欄目：web開發(fā)

這篇文章主要介紹“bootstrap怎么使用”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“bootstrap怎么使用”文章能幫助大家解決問題。

響應(yīng)式開發(fā)

  1. 響應(yīng)式開發(fā)原理

    • 使用媒體查詢針對不同寬度的設(shè)備進(jìn)行布局和樣式的設(shè)置，從而適配不同設(shè)備的目的

      設(shè)備劃分 尺寸區(qū)間
      超小屏幕（手機(jī)） <768px
      小屏設(shè)備（平板） >=768px~<992px
      中等屏幕（桌面顯示器） >=992px~<1200px
      寬屏設(shè)備（大桌面顯示器） >=1200px

  2. 響應(yīng)式布局容器

    • 超小屏幕（手機(jī)/小于768px）：設(shè)置寬度為100%

    • 小屏幕（平板，大于等于768px）：設(shè)置寬度為750px

    • 中等屏幕（桌面顯示其，大于等于992px）：寬度設(shè)置為970px

    • 大屏幕（打桌面顯示器，大于等于1200px）：寬度設(shè)置為1170px

    • 響應(yīng)式需要一個(gè)父級作為布局容器，來配合子級元素來實(shí)現(xiàn)變化的效果

    • 【原理】在不同屏幕下，通過媒體查詢來改變這個(gè)布局容器的大小，在改變里面子元素的排列方式和大小，從而實(shí)現(xiàn)不同屏幕下，看到不同的頁面布局和樣式變化

    • 響應(yīng)式尺寸劃分

  3. Bootstrap簡介

    • 標(biāo)準(zhǔn)化的html+css編碼規(guī)范

    • 提供一套簡潔、直觀、強(qiáng)悍的組件

    • 有自己的生態(tài)圈，不斷的更新迭代

    • 讓開發(fā)更簡單，提高開發(fā)效率

    • Bootstrap來自Twitter，是目前最受歡迎的前端框架。Bootstrap是基于HTML、CSS和JAVASCRIPT,他的簡介靈活，使得Web開發(fā)更加快捷

  4. bootstrap使用

    • 創(chuàng)建文件夾結(jié)構(gòu)

    • 創(chuàng)建html骨架結(jié)構(gòu)

      <!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
     <!--要求當(dāng)前網(wǎng)頁使用IE瀏覽器最高版本的內(nèi)核渲染-->
    <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="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
    <!-- 警告：通過 file:// 協(xié)議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時(shí) Respond.js 不起作用 -->
    <!--[if lt IE 9]>
 <!--解決ie9以下瀏覽器對html5新增標(biāo)簽的不識(shí)別，并導(dǎo)致CSS不起作用的問題-->
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
       <!--解決ie9一下瀏覽器對css3 Media Query的不識(shí)別-->
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h2>你好，世界！</h2>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

    • 引入相關(guān)樣式文件

    • 書寫內(nèi)容

  5. bootstrap布局容器

    • 流式布局容器 百分比寬度

    • 占據(jù)全部視口（vieport）的容器

    • 適合于單獨(dú)做移動(dòng)端開發(fā)

    • 響應(yīng)式布局的容器 固定寬度

    • 大屏（>=1200px）寬度定位1170px

    • 中屏（>=992px）寬度定位970px

    • 小屏（>=768px）寬度定位750px

    • 超小屏（100%）

    • Bootstrap需要為頁面內(nèi)容和柵格系統(tǒng)包裹一個(gè).container容器，Bootstrap預(yù)定義好的類

    • .container類

    • .contaimer-fluidlei

  6. 柵格系統(tǒng)簡介

    • 柵格系統(tǒng)英文為“grid systems”,也有人翻譯為“網(wǎng)格系統(tǒng)”，他是指將頁面布局劃分為等寬的列，然后通過列數(shù)的定義來模塊化頁面布局

    • Bootstrap提供了一套響應(yīng)式/移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或者視口尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列

    • Bootstrap里面container寬度是固定的，但是不同屏幕下，container的寬度不同，我們再把container劃分為12等分

  7. 柵格化選項(xiàng)參數(shù)

    • 行（row）必須放在container布局容器里面

    • 實(shí)現(xiàn)列的平均劃分 需要給列添加類前綴

    • xs-extra small:超??；sm-small:?。籱d-medium:中等；lg-large:大

    • 列（column）大于12，多余的“列（column）”所在的元素將被作為一個(gè)整體另起一行排列

    • 每一列默認(rèn)有左右15像素的padding

    • 可以同時(shí)為一列制定多個(gè)設(shè)備的雷鳴，以便劃分不同分?jǐn)?shù)，例如class=“col-md-4 col-sm-6”

    • 柵格化系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局，頁面內(nèi)容就可以放入這些創(chuàng)建好的布局中。

        超小屏幕（手機(jī)）<768px 小屏設(shè)備（平板）>=768px 中等屏幕（桌面顯示器）>=992px 寬屏設(shè)備（大桌面顯示器）>=1200px
      .container最大寬度 自動(dòng)（100%） 750px 970px 1170px
      類前綴 .col-xs- .col-sm- .col-md- .col-lg-
      列（column）數(shù)        

  8. 柵格列嵌套

    • 柵格系統(tǒng)內(nèi)置的柵格系統(tǒng)將內(nèi)容再次嵌套。簡單理解就是一個(gè)列內(nèi)再分成若干份小列?？梢酝ㄟ^添加一個(gè)新的.row元素和一系列.col-sm-*元素到已經(jīng)存在的.col-sm-*元素內(nèi)

    • 列嵌套最好加1個(gè)row這樣可以取消父元素的padding值 而且高度自動(dòng)和父級一樣高

    • <div class="col-sm-4">
    <div class="row">
        <div class="col-sm-6">a</div>
        <div class="col-sm-6">a</div>
    </div>

</div>

  9. 柵格列偏移

    • 使用.col-md-offset-* 類可以將列向右側(cè)偏移。這些類實(shí)際是通過使用* 選擇器為當(dāng)前元素增加了左側(cè)的邊距

  10. 柵格列排序

    • 通過使用.col-md-push-* 和.col-md-pull-* 類就可以很容易的改變列（column）的順序

  11. 響應(yīng)式工具

    • 為了加快對移動(dòng)設(shè)備友好的頁面開發(fā)工作，利用媒體查詢功能，并使用這些工具可以方便的針對不同設(shè)備展示或隱藏頁面內(nèi)容

      類名 超小屏 小屏 中屏 大屏
      .hidden-xs 隱藏 可見 可見 可見
      .hidden-sm 可見 隱藏 可見 可見
      .hidden-md 可見 可見 隱藏 可見
      .hidden-lg 可見 可見 可見 隱藏

關(guān)于“bootstrap怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手