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

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

玩轉Bootstrap(JS插件篇)

  • 每個面板的內容區都被隱藏起來了,變成不可視,但有時候希望默認第一個面板內容是可視的,需要怎么辦?其實Bootstrap作者早就為大家做了這方面的考慮,你只需要在collapse基礎上再追加 in 樣式
    查看全部
  • collapse in設置面板初始化狀態為展開狀態
    查看全部
  • 簡單點就是一個觸發器和一個折疊區: <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">觸發器</button> <div id="demo" class="collapse in">折疊區</div>
    查看全部
  • 在Bootstrap框架中將這兩個部分組合起來稱為一個panel頁板,如右邊效果所示,他就有三個panel面板,將這三個面板組合在一起,就是一個面板組合 panel-group,也就是手風琴的結構。
    查看全部
  • 各部分層級關系:panel-group>>panel|panel|...|panel>>panel-heading(panel-title)|panel-collapse(panel-body)
    查看全部
  • 把“手風琴”看作是面板的集合組:div class="panel-group"
    查看全部
  • 注意,這里自定義屬性是 data-toggle="button",而不是 data-toggle="buttons"。
    查看全部
  • 使用 data-toggle 屬性還可以激活按鈕的行為狀態,實現在激活和未激活之間進行狀態切換。例如,下面代碼可以激活按鈕行為特性,單擊時將按鈕激活,再單擊可以讓按鈕恢復到默認狀態: <button type="button" data-toggle="button" class="btn btn-primary">確認</button>
    查看全部
  • 也是通過在按鈕組上自定義data-toggle="buttons"來實現。唯一不同的是,將input[type="radio"]換成input[type="checkbox"]
    查看全部
  • 使用這種效果的時候,無需借助JavaScript代碼來觸發,因為默認Bootstrap就已經為用戶初始化好了。
    查看全部
  • <button class="btnbtn-primary" data-loading-text="正在加載中,請稍等..." type="button" id="loaddingBtn">加載</button> 通過data-loading-text屬性定義加載的文本信息,然后通過JavaScript給按鈕綁定一個事件,并給按鈕添加一個button("loading")方法來激活按鈕的加載狀態行為。如下所示: $(function(){ $("#loaddingBtn").click(function () { $(this).button("loading"); }); }); 【注意】:無法直接通過聲明式觸發此效果。
    查看全部
  • 關閉按鈕不在 div.alert 容器內時,只要給關閉元素定義了data-target屬性(如果是鏈接元素還可以通過href屬性),而且屬性值與div.alert容器的id一致,關閉元素放在容器外也可以關閉警告框。 <div class="alert alert-warning" role="alert" id="myAlert"> <h4>謹防被騙</h4> <p>請確認您轉賬的信息是你的親朋好友,不要輕意相信不認識的人...</p> </div> <button type="button" data-target="#myAlert" class="btn btn-danger" data-dismiss="alert">關閉</button>
    查看全部
  • 點擊X會關閉整個警告框。 其實關閉按鈕,不一定非要用X號,也可以是普通的按鈕元素或者鏈接元素,只需要保證關閉元素帶有自定義屬性data-dismiss="alert"即可。
    查看全部
  • 和提示框一樣不能直接通過HTML的自定義data屬性來觸發。需要依賴于JavaScript腳本。 最簡單的觸發方式如下: 【html代碼:】 <button type="button" class="btn btn-default" data-toggle="popover" data-placement="left" title="提示框居左" data-content="我是彈出框的內容"> 猛擊我吧 </button> 【js代碼:】 $(function(){ $('[data-toggle="popover"]').popover(); });
    查看全部
  • 彈出框除了有標題 title 以外還增加了內容 content 部分。
    查看全部

舉報

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

微信掃碼,參與3人拼團

微信客服

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

幫助反饋 APP下載

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

公眾號

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

友情提示:

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