前端框架bootstrap(響應式佈局)入門

時間 2019-12-19

標籤前端框架 bootstrap 響應佈局入門欄目 Bootstarp 简体版

原文原文鏈接

　　Bootstrap,是基於HTML,CSS.javascript的前端框架javascript

　　該框架已經預約義了一套CSS樣式和與樣式相對應的js代碼(對應的樣式有對應的特效.)css

　　開發人員只須要編寫HTML結構,添加bootstrap固定的class樣式,就能夠輕鬆完成指定效果的實現.html

做用:前端

1.Bootstrap使得Web開發更加快捷,高效html5

2.Bootstrap支持響應式開發,解決了移動互聯網前端開發問題.java

　　簡單介紹一下:　　該框架是Twitter公司的設計師Mark Otto和jacob Thornton 合做開發.jquery

　　Bootstrap基礎入門使用的都是自帶CSS樣式,高級開發中須要使用HTML,CSS3.動態CSS語言Less進行自定義開發git

　　中文官網是:http://www.bootcss.com程序員

什麼是響應式佈局,響應式佈局可以解決的問題.github

　　響應式佈局:一個網站的展現可以兼容多個終端(手機,iPad,PC等),而不須要爲每個終端單獨作一個展現版本.

　　此概念專爲解決移動互聯網瀏覽而誕生的.

　　響應式佈局,使得網站僅適用一套樣式,就能夠在不一樣分辨率下展現出不一樣的溫馨效果,大大下降了網站開發維護成本.而且能帶給用戶更好的體驗性.

未使用響應式開發:

當分辨率爲通常PC屏幕(12寸)時,樣式顯示正常

　當屏幕尺寸變小的時候,分辨率變小至移動設備(12寸如下)時,按原先樣式就沒法正常顯示了,必須專門爲該屏幕調整樣式.

使用了響應式開發:

　　使用了響應式開發 PC大屏幕分辨率,自行改變爲PC適合的樣式.

BootStrap的環境搭建:

　　環境的下載:

　　中文官網地址：https://getbootstrap.com/能夠本身進行選擇版本.

您會看到兩個按鈕：

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

若是您使用的是未編譯的源代碼，您須要編譯 LESS 文件來生成可重用的 CSS 文件。對於編譯 LESS 文件，Bootstrap 官方只支持 Recess，這是 Twitter 的基於 less.js 的 CSS 提示。

我此次使用的是Bootstrap的預編譯版本

　　因爲文件是被編譯過和壓縮過的,在獨立的功能開發中,您沒必要每次都包含這些獨立的文件.

目錄結構爲:

內容結構

　　發佈版,及開始使用到的BootStrap內容結構

咱們會發現css和js文件中含有多個文件，咱們只須要把bootstrap.min.css和bootstrap.min.js兩個文件複製到項目文件對應目錄中。

在上面引入bootstrap.min.css這個文件,

在下面引入bootstrap.min.js

同時bootstrap中js插件依賴於jquery，所以jquery要在Bootstrap以前引用,

環境搭建完畢,就可使用bootstrap這個框架.

這裏有一個簡單的模板:

<!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個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <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:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起做用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

佈局容器:

　　BootStrap必須須要至少一個佈局容器,才能爲頁面內容進行封裝和方便的樣式控制,至關於一個畫板.

　　任意元素使用了佈局容器的樣式,都會稱爲一個佈局容器,建議使用div做爲佈局容器.

爲了展現效果明顯,咱們爲div加入了邊框樣式:style="border:1px solid red;"

示例:

    <!--定義一個bootstrap的容器-->
    <div class="container" style="border:1px solid red">
        1111111111
    </div>

效果爲:

     <div class="container-fluid" style="border:1px solid red">
        1111111111
    </div>

bootstarp的柵格系統

簡述柵格系統:

　　爲了方便雜佈局容器中進行網頁的佈局操做,BootStrap提供了一套專門用於響應式開發佈局的柵格系統.柵格系統將一行分爲12列,經過設定元素佔用的列數來佈局元素在頁面上的展現位置.

　　做用:可讓開發人員更加輕鬆進行網頁佈局,而且輕鬆進行響應式開發.

柵格系統的特色:

柵格的特色:

　　"行"必須包含在.container(固定高度)或.container-fluid(100%寬度)中

　　行使用的樣式.row 列使用的樣式col-*-*元素內容應當放置於"列(column)"內

　基本的書寫方式必須是:容器--行-列-內容

　　HTML表格:定義一個表格--行--單元格

　柵格參數:col--屏幕尺寸-佔用列數

　　列元素的書寫順序,決定佈局順序,先寫的列元素會被先佈局到行上.

　　列元素的佔用行數,定義列元素的大小.

爲了方便顯示元素大小,咱們爲展現元素都賦予了相同的樣式:border:1px solid red;height:100px

示例1:一個元素佔一行

    <div class="container">
        <div class="col-lg-12" style="border:1px solid red;height: 100px;">
            1111111
        </div>
    </div>

兩個元素佔一行

   <div class="container">

　　<div class="row">

        <div class="col-lg-6" style="border: 1px solid red; height: 100px;">1111</div>
        <div class="col-lg-6" style="border: 1px solid red; height: 100px;">2222</div>
    </div>

　　</div>

四個元素佔一行

    <div class="container">
　　　<div class="row">

        <div class="col-lg-3" style="border: 1px solid red;height: 100px;">333333</div>
        <div class="col-lg-3" style="border: 1px solid red;height: 100px;">333333</div>
        <div class="col-lg-3" style="border: 1px solid red;height: 100px;">333333</div>
        <div class="col-lg-3" style="border: 1px solid red;height: 100px;">333333</div>
    </div>
    </div>

注意:

　　一個row下,若是設置的col列數總和小於等於12那麼該row下元素在一行排列

　　一個row下,若是設置的col列數總和大於12,那麼超出的元素會另起一行排列

　　行和列能夠進行無限嵌套,嵌套方式必須爲列--行--列--行

　　一個row元素下,有12列

柵格屏幕尺寸設置

屏幕尺寸簡述:

　　large:lg ----大屏幕,通常PC尺寸

　　medium:md ----中等屏幕,小PC尺寸

　　small:sm ----小屏幕 iPad尺寸

　　x small :xs ----超小屏幕,智能手機尺寸.

爲了方便顯示元素大小,咱們爲展現元素都賦予了相一樣式,:border:1px solid red;height:100px

<div class="container">
<div class="row">
<div class="col-lg-2 col-md-4 col-sm-12" style="border:1px solid red;height:100px;">
11111
</div>
<div class="col-lg-2 col-md-4 col-sm-12" style="border:1px solid red;height:100px;">
22222
</div>
<div class="col-lg-2 col-md-4 col-sm-12" style="border:1px solid red;height:100px;">
33333
</div>
</div>
</div>

大屏幕下:

中屏幕下:

小屏幕下:

注意:

　　若設置了某個屏幕尺寸的樣式,那麼比該尺寸大的屏幕,會沿用該設置,比該尺寸小的屏幕,會默認一個元素佔12列的設置.

　　例如:設置了col-md-4,那麼至關於也設置了col-lg-4,其餘屏幕尺寸均默認爲col-sm-12,col-xs-12;

列偏移

一般狀況下咱們須要將元素居中顯示,須要左邊空出必定的空白區域,這裏咱們就可使用列偏移來達到效果.

響應式工具:

爲針對性地在移動頁面上展現和隱藏不一樣的內容,bootStrap提供了響應式工具,可讓開發人員經過這個工具決定,在何種屏幕尺寸下,隱藏或者顯示某些元素.

bootStrap經常使用的組件

這裏是網址:能夠在這個上面進行查找:https://v3.bootcss.com/css/

列表

bootstrap一樣提供了實用的列表樣式供開發人員使用

　　全局CSS樣式---排版--列表

  <div class="list-inline">
        <li>傳智播客</li>
        <li>黑馬程序員</li>
        <li>博學谷</li>
    </div>

按鈕

BootStrap提供了豐富的按鈕樣式供開發人員使用,任何HTML元素加上一下樣式都會變成對應按鈕.

BootStrap已經提供了完整的導航條實例,一般狀況下,咱們僅須要簡單修改便可使用.

組件 ---導航條

反色的導航條

　　經過添加.navbar-inverse類能夠改變導航條的外觀.

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首頁<span class="sr-only">(current)</span></a></li>
<li ><a href="#">家電數碼</a></li>
<li ><a href="#">電腦辦公</a></li>
</ul>
</div>
</nav>

效果

表單的導航條

　　將表單放置於.navbar-form以內能夠呈現很好的垂直對齊,並在較窄的視口(viewport)中呈現摺疊狀態.使用對齊選項能夠規定其在導航條上出現的位置.

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default hidden-xs">Submit</button>
</form>
<div/>
</nav>

解釋:視口(viewport):即瀏覽器上網頁的可視區域

視口做用:用於移動設備將大型頁面進行比例縮放顯示.

輪播圖:

BootStrap已經提供了完整的輪播圖實例,一般狀況下,咱們僅需進行簡單修改便可使用

輪播圖DIV的定時換圖屬性:data-interval="毫秒值"

注意:

多個輪播圖必須修改輪播圖的ID

　javascript插件==Carousel

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>

<a class="left carousel-control" href="#carousel-example-generic" role="button" data-
slide="prev">

Previous
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-
slide="next">

Next
</a>
</div>

排版對齊方式

BootStarp提供了統一的排版方式設置,方便開發人員對內容版式進行調整

　　　　全局CSS樣式--排版---對齊

會將元素內全部的內容都進行排版設置

<div class="text-center">
<img src="img/xxx.png" />
</div>

表單元素

BootStrap一樣提供了豐富的表單控件供開發人員來選擇

　　全局CSS樣式--表單

效果

表單名和表單輸入項共用一行

效果

校驗狀態--出錯的樣式

效果

分頁條

Bootstrap爲咱們還準備了分頁條的樣式組件

組件--分頁

<nav>
<!-- 分頁條總體列表 -->
<ul class="pagination">
<!-- 上一頁 -->
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
效果：
示例2：上一頁 被禁用；索引頁 第一頁被選中
</a>
</li>
<!-- 索引頁 -->
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<!-- 下一頁 -->
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>

效果

上一頁被禁用,索引頁,第一頁被選中

<nav>
<!-- 分頁條總體列表 -->
<ul class="pagination">
<!-- 上一頁 被禁用 -->
<li class="disabled">
<a aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<!-- 索引頁 第一頁被選中 -->
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<!-- 下一頁 -->
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>