bootstrap學(xué)習(xí)記錄

小技巧

  • 如果是input標(biāo)簽，則一般放在label標(biāo)簽內(nèi)
  • checkbox表示多選框，radio表示單選框

基本知識(shí)

  • container-fluid和container是bootstrap中的兩種不同類(lèi)型的外層容器，
    .container屬性用于固定寬度并支持響應(yīng)式布局的容器
    _.container-fluid屬性用于100%寬度，占據(jù)全部視口的容器
  • bootsrap中有一個(gè)class屬性交租well，它的作用是為設(shè)定的列創(chuàng)造出一種視覺(jué)上的深度感

按鈕

  • btn屬性：凡是按鈕均需要添加btn屬性
  • btn-block屬性：表示該按鈕為塊級(jí)元素
  • btn-primary屬性：表示該按鈕的顏色為應(yīng)用的主要顏色
  • btn-info屬性：添加了該屬性的按鈕顏色為淺藍(lán)色，表示用戶可能會(huì)采取的操作
  • btn-danger屬性：紅色按鈕，表示該操作具有“破壞性”。
  • btn-default屬性：按鈕默認(rèn)屬性

bootstrap的響應(yīng)式網(wǎng)格布局

在bootstrap中對(duì)四種屏幕寬度進(jìn)行媒體查詢(xún)，

/* 超小屏幕（手機(jī)，小于 768px） /
/ 沒(méi)有任何媒體查詢(xún)相關(guān)的代碼，因?yàn)檫@在 Bootstrap 中是默認(rèn)的（還記得 Bootstrap 是移動(dòng)設(shè)備優(yōu)先的嗎？） /
/ 小屏幕（平板，大于等于 768px） /
@media (min-width: @screen-sm-min) { ... }
/ 中等屏幕（桌面顯示器，大于等于 992px） /
@media (min-width: @screen-md-min) { ... }
/ 大屏幕（大桌面顯示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

  • 用途：可輕松實(shí)現(xiàn)將多個(gè)元素放入一行并指定各個(gè)元素的相對(duì)寬度的需求。
  • 注意：bootstrap的網(wǎng)格一行默認(rèn)是由12個(gè)小單元格組成,一行中的元素通過(guò)一個(gè)帶有row屬性的div元素包裹，其內(nèi)部的子元素通過(guò)添加col-md-*來(lái)指定寬度，*表示數(shù)字，md表示該頁(yè)面在中等屏幕的設(shè)備上顯示，該值可以根據(jù)實(shí)際設(shè)備的屏幕大小調(diào)整
  • 使用：實(shí)例：用于手機(jī)、平板、桌面
Paste_Image.png

代碼如下：

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8 column-1">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4 column-2">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

以上代碼中以column1為例說(shuō)明：當(dāng)為超小屏幕時(shí)，column-1占用12列，當(dāng)為小屏幕時(shí)，column-1占用6列，當(dāng)為中等屏幕時(shí)占用8列，這樣便實(shí)現(xiàn)了根據(jù)屏幕的大小來(lái)調(diào)整寬度

Font Awesome 圖標(biāo)庫(kù)

  • 一般通過(guò)i標(biāo)簽添加，如為一個(gè)按鈕添加一個(gè)圖標(biāo)：
    <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
  • 圖標(biāo)類(lèi)型
    刪除意義的圖標(biāo)： <i class = "fa fa-trash></i>"
    點(diǎn)贊意義的圖標(biāo)： <i class = "fa fa-thumbs-up"></i>
    提交意義的圖標(biāo)： <i class = "fa fa-paper-plane"></i>

表單控件

  • 輸入框input：在bootstrap中使用input是也必須添加type類(lèi)型，如果沒(méi)有指定type類(lèi)型，將無(wú)法得到正確的樣式；同時(shí)，為了讓控件在各種表單風(fēng)格中樣式不出錯(cuò)，需要添加類(lèi)名"form-control"
    如： <input type="text" class="form-control" placeholder="Enter User Name">
  • 下拉選擇框select控件：
  • 文本域textarea控件:

導(dǎo)航元素

  • 表格導(dǎo)航菜單：
    <ul class="nav nav-tabs"></ul>
  • 膠囊式導(dǎo)航：
    <ul class="nav nav-pills"></ul>
  • 垂直的膠囊導(dǎo)航：
    <ul class="nav nav-pills nav-stacked"></ul>
  • 兩端對(duì)齊的導(dǎo)航：
    <ul class="nav nav-tabs nav-justified"></ul>
    主要起作用的的是nav-justified類(lèi)名
  • 使導(dǎo)航菜單中的一個(gè)鏈接項(xiàng)禁用:hover狀態(tài)，對(duì)該項(xiàng)添加disabled類(lèi)
    <ul class="nav nav-tabs">
    <li><a href="#">WEB</a></li>
    <li><a href="#">IOS</a></li>
    <li class="disabled"><a href="#">JAVA</a></li>
    <li><a href="#">Andrion</a></li>
    </ul>
  • 帶有下拉菜單的膠囊
    <h3>導(dǎo)航下拉菜單：</h3>
    <ul class="nav nav-pills">
    <li class = "active"><a href="#">HOME</a></li>
    <li><a href="#">JAVA</a></li>
    <li><a href="#">IOS</a></li>
    <li class="dropdown"> //該 li 標(biāo)簽是下拉菜單的實(shí)現(xiàn)
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
    WEB <span class="caret"></span></a>
    <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JAVASCRIPT</a></li>
    <li class="divider"></li>
    <li><a href="#">JQUERY</a></li>
    </ul>
    </li>
    <li><a href="#">ANDRION</a></li>
    </ul>

導(dǎo)航欄

  • 默認(rèn)的導(dǎo)航欄
    創(chuàng)建一個(gè)默認(rèn)的導(dǎo)航欄的步驟如下：

    1. 向<nav>標(biāo)簽添加 class.navbar、navbar-default屬性，并添加 role="navigation，role屬性有利于增加可訪問(wèn)性
    2. 向<div>元素添加class.navbar-header，內(nèi)部包含帶有class.navbar-brand的a元素，會(huì)讓文本看起來(lái)大一號(hào)
      代碼如下：
      <h3>默認(rèn)的導(dǎo)航欄</h3>
      <nav class="navbar navbar-default" role="navigation">
      <div class="container-fluid">
      <div class="navbar-header">
      <a href="#" class="navbar-brand">Brand</a>
      </div>
      <div>
      <ul class="nav navbar-nav">
      <li class="active"><a href="#">IOS</a></li>
      <li><a href="#">SVN</a></li>
      <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">JAVA
      <b class="caret"></b></a>
      <ul class="dropdown-menu">
      <li><a href="#">jmeter</a></li>
      <li><a href="#">EJB</a></li>
      <li><a href="#">Jasper Report</a></li>
      <li class="divider"></li>
      <li><a href="#">分離的鏈接</a></li>
      <li class="divider"></li>
      <li><a href="#">另一個(gè)分離的鏈接</a></li>
      </ul>
      </li>
      </ul>
      </div>
      </div>
      </nav>

  • 響應(yīng)式的導(dǎo)航欄

    1. 為了給導(dǎo)航欄添加響應(yīng)式特性，要折疊的內(nèi)容必須包裹在帶有class.collapse、 .navbar-collapse的<div>中
    2. 折疊起來(lái)的導(dǎo)航欄實(shí)際上是一個(gè)帶有class.navbar-toggle以及兩個(gè)data-元素的按鈕
    3. 默認(rèn)的導(dǎo)航與響應(yīng)式導(dǎo)航主要在與1和2兩點(diǎn)中
      代碼如下：
      <h3>響應(yīng)式的導(dǎo)航欄</h3>
      <nav class="navbar navbar-default" role="navigation">
      <div class="container-fluid">
      <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
      <span class="sr-only">切換導(dǎo)航</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">菜鳥(niǎo)教程</a>
      </div>
      <div class="collapse navbar-collapse" id="example-navbar-collapse">
      <ul class="nav navbar-nav">
      <li class="active"><a href="#">IOS</a></li>
      <li><a href="#">SVN</a></li>
      <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      Java <b class="caret"></b>
      </a>
      <ul class="dropdown-menu">
      <li><a href="#">jmeter</a></li>
      <li><a href="#">EJB</a></li>
      <li><a href="#">Jasper Report</a></li>
      <li class="divider"></li>
      <li><a href="#">分離的鏈接</a></li>
      <li class="divider"></li>
      <li><a href="#">另一個(gè)分離的鏈接</a></li>
      </ul>
      </li>
      </ul>
      </div>
      </div>
      </nav>

  • bootstrap中的圖標(biāo)
    添加方法：
    <ul class="nav navbar-nav navbar-right">
    <li><a href="#"><span class="glyphicon glyphicon-user"></span> 注冊(cè)</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登錄</a></li>
    </ul>

    1. 添加**class.glyphicon **， class.glyphicon-user和class.glyphicon-log-in表示需要使用ICON圖標(biāo)名，具體可以查看各個(gè)圖標(biāo)對(duì)應(yīng)的類(lèi)名，網(wǎng)址：bootstrap圖標(biāo)

  • 導(dǎo)航欄的定位

    1. 將導(dǎo)航欄固定在頂部：給nav標(biāo)簽添加class.navbar-fixed-top

      注意：為了防止導(dǎo)航欄與頁(yè)面主題中的其他內(nèi)容的頂部相交錯(cuò)，請(qǐng)向<body>標(biāo)簽添加至少50像素的內(nèi)邊距 （padding），內(nèi)邊距的值可以根據(jù)需要進(jìn)行調(diào)整

    2. 將導(dǎo)航欄固定在底部：給nav標(biāo)簽添加class.navbar-fixed-bottom

    3. 使導(dǎo)航欄隨著頁(yè)面一起滾動(dòng)：給nav標(biāo)簽添加.navbar-static-top，使用該class，不要求向<body>添加內(nèi)邊距

  • 倒置的導(dǎo)航欄
    創(chuàng)建一個(gè)帶有黑色背景白色文本的倒置的導(dǎo)航欄，只需要簡(jiǎn)單的向.navbar class添加.navbar-inverse class即可

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容