亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

玩轉Bootstrap(JS插件篇)

  • 在bootstrap中聲明式觸發方法一般依賴于data-xxx 屬性。比如data-toggle="" 或者 data-dismiss=""
    查看全部
  • 總結一下到目前為止我所掌握的有關button的樣式有:button class="btn btn-default"(默認)、button class="close" data-dismiass="modal"(要關閉的組件)、button class="btn btn-default dropdown-toggle" data-toggle="dropdown(要切換的組件)"【<span cls="caret">】這里的也可以替換成a標簽、
    查看全部
  • 要想在網頁上加上modal彈出框,最外邊包裹的是modal、其次是modal-dialog、最后真正的內容是放在modal-content。而modal-content中又包括三個部分:彈出框頭部modal-header(主要用于放置標題和關閉按鈕)、彈出框主體modal-body(用于放置內容)、彈出框底部modal-footer(主要用于放置操作按鈕)
    查看全部
  • loading狀態信息觸發方式不能用聲明方式觸發。
    查看全部
  • class="close"保證X按鈕在右側顯示 data-dismiss="alert"保證可以關閉警告框
    查看全部
  • 彈出框--提示框和彈出框的異同: 從之前的學習可知,彈出框中HTML自定義的 data 屬性和提示框中的自定義的 data 屬性基本相同,只不過在其基礎上增加了一個 data-content 屬性,用來設置彈出框的內容。其實兩插件也有略微的不同: 提示框 tooltip 的默認觸發事件是 hover 和 focus,而彈出框 popover 是 click 提示框 tooltip 只有一個內容(title),而彈出框不僅可以設置標題(title)還可以設置內容(content) 提示框tooltip的模板: <div class="tooltip" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"></div> </div> 彈出框popover的模板: <div class="popover" role="tooltip"> <div class="arrow"></div> <h3 class="popover-title"></h3> <div class="popover-content"></div> </div>
    查看全部
  • 彈出框--觸發彈出框的方法: $(function(){ $('#myPopover').popover({ title:"我是彈出框的標題", content:"我是彈出框的內容", placement:"top" }); });
    查看全部
  • 在制作提示框(tooltip)時,可以使用<button>或者<a>標簽元素,而且通過 data- 屬性來聲明提示框的信息,如下所示: <button type="button" class="btnbtn-default" data-toggle="tooltip" data-placement="left" data-original-title="我是一個提示框tooltip"> 鼠標移上來 </button> 而彈出框Popover和提示框tooltip相比,就多了一個content內容,那么在此使用 data-content 來定義彈出框中的內容。同樣可以使用<button>或者<a>標簽來制作,如下: <button type="button" class="btnbtn-default" data-container="body" data-placement="bottom" data-toggle="popover" data-original-title="Bootstrap彈出框標題" data-content="Bootstrap彈出框的內容" > 猛擊我吧 </button>
    查看全部
  • Bootstrap框架中的tooltip的插件提供了四種不同的風格: 在Bootstrap框架中的提示框,結構非常簡單,常常使用的是按鈕<button>標簽或者鏈接<a>標簽來制作。不管是使用按鈕還是鏈接來制作提示框,他們都有一個共性: 通過 title 屬性的值來定義提示信息(也可以使用自定義屬性 data-original-title 來設置提示信息)。 通過 data-placement 自定義屬性來控制提示信息框的位置,根據四種不同的位置,data-placement具有四個值:top、right、bottom和left,分別表示提示框出現的位置在頂部、右邊、底部和左邊。 還有一個最重要的參數不可缺少,data-toggle="tooltip"。 用button或者a標簽做提示框。 須加3個屬性: data-toggle="tooltip" data-placement="left" data-original-title="提示框居左">
    查看全部
    0 采集 收起 來源:提示框--結構

    2018-03-22

  • 選項卡--為選擇卡添加fade樣式: 為了讓面板的隱藏與顯示在切換的過程效果更流暢,可以在面板中添加類名 fade,讓其產生漸入的效果。
    查看全部
  • 選項卡--觸發切換效果 同樣的,選項卡也定義data屬性來觸發切換效果。當然前提你也要先加載bootstrap.js或者是tab.js。聲明式觸發選項卡需要滿足以下幾點要求: 1、選項卡導航鏈接中要設置 data-toggle="tab" 2、并且設置 data-target="對應內容面板的選擇符(一般是ID)"; 如果是鏈接的話,還可以通過 href="對應內容面板的選擇符(一般是ID)" 主要起的作用是用戶點擊的時候能找到該選擇符所對應的面板內容 tab-pane。 3、面板內容統一放在 tab-content 容器中,而且每個內容面板 tab-pane 都需要設置一個獨立的選擇符(最好是ID)與選項卡中的 data-target 或 href 的值匹配。
    查看全部
  • tab欄: ul class類名:nav-tabs; role="tablist" li a role="tab" data-toggle="tab" href="#id名" 與tablist切換相對應的內容 最大容器 class="tab-content" 對應容器的 class="tab-pane" id=""
    查看全部
    0 采集 收起 來源:選項卡(Tabs)

    2018-03-22

  • 滾動監控器--JavaScript方法觸發滾動監控器: 在Bootstrap框架中,使用JavaScript方法觸發滾動監控器相對來說較為簡單,只需要指定兩個容器的名稱即可。比如下面的結構: <div class="scrollspy" id="scrollspy">//給需要滾動的內容的最大容器添加類名稱即可。 … </div>
    查看全部
  • 代碼如下顯示
    查看全部
  • 代碼如下顯示
    查看全部

舉報

0/150
提交
取消
課程須知
本課程適合具有一定前端基礎的人員,對HTML和CSS有一定的了解,對于定制Bootstrap的同學需要具備LESS和Sass基礎知識。
老師告訴你能學到什么?
1、使用JS自由控制Bootstrap中提供的組件。

微信掃碼,參與3人拼團

微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

友情提示:

您好,此課程屬于遷移課程,您已購買該課程,無需重復購買,感謝您對慕課網的支持!