第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

玩轉(zhuǎn)Bootstrap（JS插件篇）

難度中級(jí)
時(shí)長(zhǎng) 6小時(shí)25分
學(xué)習(xí)人數(shù)
綜合評(píng)分9.17
138人評(píng)價(jià) 查看評(píng)價(jià)
9.5 內(nèi)容實(shí)用
9.0 簡(jiǎn)潔易懂
9.0 邏輯清晰

  • 在線自定義設(shè)置--Bootstrap組件

    在 Bootstrap 組件設(shè)置這一部分，提供了公共樣式（Common CSS），UI 組件(Components)和?JavaScript 組件(JavaScript components)三個(gè)部分，如下圖所示：

    每個(gè)部分都有對(duì)應(yīng)的列表清單，在自定義配置時(shí)候，可以根據(jù)自己需求進(jìn)行選擇，比如，我自己的 Bootstrap 框架中，不需要打印樣式、code、Glyphicons、等等，那么只需要不選中它們：


    查看全部

  • 自定義Bootstrap

    使用?Bootstrap 框架的不方便：

    很多時(shí)候在創(chuàng)建 Web 頁面或應(yīng)用的時(shí)，需要自己獨(dú)立的 UI 界面效果，此時(shí)僅僅使用 Bootstrap 框架并不能滿足我們自身 UI 的需求，也造成要寫很多的樣式代碼來覆蓋 Bootstrap 框架提供的樣式代碼。如此一來，這也失去使用 Bootstrap 框架的意義。

    很多同學(xué)會(huì)問，我要使用Bootstrap框架，而且還要讓其出來的 UI 界面效果能和滿足自己的UI設(shè)計(jì)效果。

    解決方法：

    在 Bootstrap 框架中提供多種方式來自定義 Bootstrap，讓 Bootstrap 框架適合自己的需求，接下來，簡(jiǎn)單的向大家介紹怎樣自定義 Bootstrap 框架。

    自定義Bootstrap框架主要有兩種方式來實(shí)現(xiàn)：

    1. 使用 CSS 預(yù)處理器語言

    2. 使用在線自定義設(shè)置

    1.使用?CSS?預(yù)處理器語言

    在學(xué)習(xí) Bootstrap 框架的使用時(shí)，可以看到 Bootstrap 框架中很多組件的 UI 效果都有對(duì)應(yīng)的 LESS 版本和 Sass 版本源碼。其實(shí)需要自定義 Bootstrap 框架，完全可以在這些組件的 LESS 或 Sass 源碼文件上進(jìn)行修改，然后將修改好的源碼重新編譯出 bootstrap.css 文件，從而實(shí)現(xiàn)適合自己的 UI 界面風(fēng)格。?

    使用 CSS 預(yù)處理器語言來重新定義 Bootstrap 框架有一個(gè)前提條件，那就是開發(fā)人員會(huì)使用 LESS 或 Sass 預(yù)處理器語言，否則要在此基礎(chǔ)上實(shí)現(xiàn) Bootstrap 框架自定義不是一件容易的事情。不過大家不用擔(dān)心，就算你不懂 LESS 或 Sass 也不用怕，可以通過在線自定義設(shè)置來實(shí)現(xiàn)自定義 Bootstrap 框架。

    2.使用在線自定義設(shè)置

    在Bootstrap框架的官網(wǎng)為大家提供了一個(gè)在線自定義 Bootstrap 框架的配置頁面?http://getbootstrap.com/customize/　，可以通過這里進(jìn)行配置。

    在線自定義設(shè)置主要包括三個(gè)部分：

    • Bootstrap 組件

    • Bootstrap 插件

    • Bootstrap 的 LESS 版本變量設(shè)置

    我們只需要根據(jù)自己的需求設(shè)置完成之后，點(diǎn)擊最底部的下載按鈕就可以得到自定義后的 Bootstrap 框架。


    查看全部
    0 采集 收起 來源：自定義Bootstrap

    2018-08-15

  • 固定定位--聲明式觸發(fā)固定定位

    Affix 插件可以對(duì)任何元素進(jìn)行固定定位，其中比較簡(jiǎn)單的方法，就是通過自定義屬性?data?來觸發(fā)。其主要包括兩個(gè)參數(shù)：

    1、data-spy：取值 affix，表示元素固定不變的。

    2、data-offset：整數(shù)值，比如 90，表示元素 top 和 bottom 的值都是 90px，其包括兩種方式：data-offset-top?和?data-offset-bottom。

    • data-offset-top?用來設(shè)置元素距離頂部的距離。比如 90，表示元素距離頂部 90px，當(dāng)用戶從頂部向下拖動(dòng)滾動(dòng)條，當(dāng)滾動(dòng)的距離大于 90px 時(shí)，affix 元素不再滾動(dòng)，就會(huì)固定在瀏覽器窗口頂部。

    • data-offset-bottom?剛好與 data-offset-top 相反。

    具體使用如下：

    <div?data-spy="affix"?data-offset="90">affix元素</div>

    分開設(shè)置 data-offset 值方式：

    <div?data-spy="affix"?data-offset-top="90"?data-offset-bottom="150">affix元素</div>

    我們來看一個(gè)簡(jiǎn)單的示例：

    <nav?class="navbar?navbar-default"?role="navigation">?????…?</nav>?<div?class="container">?????<div?class="row">?????????<div?class="col-md-3"?id="sidebarMenu">?????????????<ul?class="navnav-pills?nav-stacked"?data-spy="affix"?data-offset-top="20">??????????????????????…?????????????</ul>?????????</div>?????????<div?class="col-md-9">?????????????????…?????????</div>?????</div>?</div>

    注意，在 body 要聲明滾動(dòng)監(jiān)控!!!!!!!!!!

    <body data-spy="scroll" data-target="sidebarMenu">!!!!

    運(yùn)行效果如下：

    注意，請(qǐng)?jiān)趯捚聊Ｊ较虏榭葱Ч?。?jù)我測(cè)試下來，使用聲明式，就算設(shè)置了 data-offset-top 的值也會(huì)失效，需要在樣式中給 affix 設(shè)置一個(gè)top值!!!!!，與 data-offset-top 值相等。data-offset-bottom一樣。

    CSS 樣式中ul.nav-tabs.affix和 <ul>中 data-offset-top 沒有沖突嗎

    最新回答 /?筑夢(mèng)先生

    data-offset-top=125 當(dāng)頁面向上滾動(dòng)超過125時(shí) ul則不會(huì)跟著頁面繼續(xù)滾動(dòng)。nav-tabs.affix {top：30px} ?則是定義ul的頁面位置。前者是設(shè)置滾動(dòng)距離，后者是頁面top距離


    查看全部

  • 圖片輪播--JavaScript觸發(fā)方法

    默認(rèn)情況之下，如果 carousel 容器上定義了 data-ride="carousel" 屬性，頁面加載之后就會(huì)自動(dòng)加載輪播圖片切換效果。如果沒有定義 data-ride 屬性，可以通過 JavaScript 方法來觸發(fā)輪播圖片切換。具體使用方法如下：

    $(".carousel").carousel();

    也可以通過容器的 ID 來指定：

    $("#slidershow").carousel();

    在 carousel() 方法中可以設(shè)置具體的參數(shù)，如：

    屬性名稱

    類型

    默認(rèn)值

    描述

    interval

    number

    5000

    幻燈片輪換的等待時(shí)間（毫秒）。如果為false,輪播將不會(huì)自動(dòng)開始循環(huán)

    pause

    string

    hover

    默認(rèn)鼠標(biāo)懸停留在幻燈片區(qū)域即停止播放，離開即開始播放

    wrap

    布爾值

    true

    輪播是否持續(xù)循環(huán)

    使用時(shí)，在初始化插件的時(shí)候可以傳關(guān)相關(guān)的參數(shù)，如：

    $("#slidershow").carousel({????????interval:?3000?});

    實(shí)際上，當(dāng)我們給carousel()方法配置參數(shù)之后，輪播效果就能自動(dòng)切換。但 Bootstrap 框架中的 carousel 插件還給使用者提供了幾種特殊的調(diào)用方法，簡(jiǎn)單說明如下：

    • .carousel("cycle")：從左向右循環(huán)播放；

    • .carousel("pause")：停止循環(huán)播放；

    • .carousel("number")：循環(huán)到指定的幀，下標(biāo)從0開始，類似數(shù)組；

    • .carousel("prev")：返回到上一幀；

    • .carousel("next")：下一幀

    例如，前面的調(diào)用方法，向前和向后兩個(gè)按鈕還無法正常工作，其實(shí)可以通過 .carousel("prev") 和 .carousel("next") 方法讓他們能正常工作，代碼如下：

    $(function(){?????$("#slidershow").carousel({?????????interval:2000?????});??????});


    查看全部

  • 片輪播--聲明式觸輪播圖的播放（二）

    除了data-ride="carousel"、data-slide、data-slide-to 以外，輪播組件還支持其他三個(gè)自定義屬性：

    屬性名稱

    類型

    默認(rèn)值

    描述

    data-interval

    number

    5000

    幻燈片輪換的等待時(shí)間（毫秒）。如果為false,輪播將不會(huì)自動(dòng)開始循環(huán)

    data-pause

    string

    hover

    默認(rèn)鼠標(biāo)懸停留在幻燈片區(qū)域即停止播放，離開即開始播放

    data-wrap

    布爾值

    true

    輪播是否持續(xù)循環(huán)

    如下代碼實(shí)現(xiàn)“輪播不持續(xù)循環(huán)”和“輪播時(shí)間間隔為1秒”。

    <div?id="slidershow"?class="carousel"?data-ride="carousel"?data-wrap="false"?data-interval="1000">????......?</div>

    上面三個(gè)屬性可以在容器元素上定義，也可以在標(biāo)示符（或左右控制鏈接）上定義，但是后者定義的優(yōu)先級(jí)比較高。


    查看全部

  • 沒有實(shí)現(xiàn)。。

    查看全部

  • 圖片輪播--聲明式觸輪播圖的播放（一）

    觸發(fā)輪播圖的播放方法也有兩種，一種是聲明式，另外一種是JavaScript方式。首先來看聲明式方法。

    聲明式方法是通過定義 data 屬性來實(shí)現(xiàn)，data 屬性可以很容易地控制輪播的位置。其主要包括以下幾種：

    • data-ride 屬性：取值 carousel，并且將其定義在 carousel 上。

    • data-target 屬性：取值 carousel 定義的 ID 名或者其他樣式識(shí)別符，如前面示例所示，取值為“#slidershow”，并且將其定義在輪播圖計(jì)數(shù)器的每個(gè) li 上!!!!!!最重要這個(gè)，是用容器的div的id?。。?！

    • data-slide 屬性：取值包括 prev，next，prev表示向后滾動(dòng)，next 表示向前滾動(dòng)。該屬性值同樣定義在輪播圖控制器的 a 鏈接上，同時(shí)設(shè)置控制器 href 值為容器 carousel 的 ID 名或其他樣式識(shí)別符。

    • data-slide-to 屬性：用來傳遞某個(gè)幀的下標(biāo)，比如 data-slide-to="2"，可以直接跳轉(zhuǎn)到這個(gè)指定的幀（下標(biāo)從0開始計(jì)），同樣定義在輪播圖計(jì)數(shù)器的每個(gè) li 上。

    基于上例，設(shè)置了自定義的 data 屬性之后如下：

    <div?id="slidershow"?class="carousel"?data-ride="carousel">?<!--?設(shè)置圖片輪播的順序?-->?????<ol?class="carousel-indicators">?????????<li?class="active"?data-target="#slidershow"?data-slide-to="0"></li>?????????<li?data-target="#slidershow"?data-slide-to="1"></li>?????????<li?data-target="#slidershow"?data-slide-to="2"></li>?????????<li?data-target="#slidershow"?data-slide-to="3"></li>?????????<li?data-target="#slidershow"?data-slide-to="4"></li>?????????<li?data-target="#slidershow"?data-slide-to="5"></li>?????</ol>?????<!--?設(shè)置輪播圖片?-->?????<div?class="carousel-inner">?????…?????</div>?????<!--?設(shè)置輪播圖片控制器?-->?????<a?class="left?carousel-control"?href="#slidershow"?role="button"?data-slide="prev">?????????<span?class="glyphicon?glyphicon-chevron-left"></span>?????</a>?????<a?class="right?carousel-control"?href="#slidershow"?role="button"?data-slide="next">?????????<span?class="glyphicon?glyphicon-chevron-right"></span>?????</a>?</div>

    在這里需要注意可以為 #slidershow 層添加 slide 樣式，使用圖片與圖片切換效果有平滑感。

    <div?id="slidershow"?class="carousel?slide"?data-ride="carousel">???...?</div>

    這樣頁面一加載就會(huì)有輪播效果了且單擊向前向后按鈕也可以切換圖片了：

    <!-- data-ride="carousel" 屬性用于標(biāo)記輪播在頁面加載時(shí)就開始動(dòng)畫播放，無需使用初始化的js函數(shù) -->

    查看全部

  • 圖片輪播--輪播圖片的設(shè)計(jì)（三）

    第四步：設(shè)計(jì)輪播圖片控制器。很多時(shí)候輪播圖片還具有一個(gè)向前播放和向后播放的控制器。在 Carousel 中通過?carousel-control樣式配合 left 和 right 來實(shí)現(xiàn)。其中l(wèi)eft表示向前播放，right表示向后播放。其同樣放在carousel容器內(nèi)：

    <div?id="slidershow"?class="carousel">?????<!--?設(shè)置圖片輪播的順序?-->?????<ol?class="carousel-indicators">????????…?????</ol>?????<!--?設(shè)置輪播圖片?-->?????<div?class="carousel-inner">?????????…?????</div>?????<!--?設(shè)置輪播圖片控制器?-->????/div>

    這段代碼是放在inner的后面！

    通過兩個(gè) a 鏈接然后在內(nèi)部定義要顯示的小圖標(biāo)，一個(gè)是向前，一個(gè)是向后。

    這兩個(gè)圖標(biāo)都顯示在圖片容器的上面（z-index的值大于carousel-inner的）。

    最終的效果如下：

    上圖展示的就是 Bootstrap 框架中 Carousel 插件實(shí)現(xiàn)的圖片輪播的效果。只是上例展示的僅是設(shè)計(jì)效果，并不具備動(dòng)畫效果，接下來我們一起來看如何觸發(fā)其播放效果。

    ?


    查看全部

  • 圖片輪播--輪播圖片的設(shè)計(jì)（二）

    第三步：設(shè)計(jì)輪播圖片播放區(qū)。輪播圖整個(gè)效果中，播放區(qū)是最關(guān)鍵的一個(gè)區(qū)域，這個(gè)區(qū)域主要用來放置需要輪播的圖片。這個(gè)區(qū)域使用?carousel-inner?樣式來控制，而且其同樣放置在?carousel?容器內(nèi)，并且通過?item?容器來放置每張輪播的圖片：

    <div?id="slidershow"?class="carousel">?????<!--?設(shè)置圖片輪播的順序?-->???class=">?????????<li?class="active">1</li>?????????…?????</ol>?????<!--?設(shè)置輪播圖片?-->?????<div?class=>?????????<div?class=">?????????????<a?href="##"><img?src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"?alt=""></a>?????????</div>?????????<div?class="item">?????????????<a?href="##"><img?src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"?alt=""></a>?????????</div>?????????…?????????<div?class="item">?????????????<a?href="##"><img?src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg"?alt=""></a>?????????</div>?????</div>?</div>

    其主要通過 carousel-inner 來控制其樣式呈現(xiàn)。

    運(yùn)行效果如下：

    上面顯示的圖片區(qū)只實(shí)現(xiàn)了圖片播放，但很多輪播圖片效果，在每個(gè)圖片上還對(duì)應(yīng)有自己的標(biāo)題和描述內(nèi)容。其實(shí) Bootstrap 框架中的 Carousel 也提供類似的效果。只需要在 item 中圖片底部添加對(duì)應(yīng)的代碼：

    <div?id="slidershow"?class="carousel">?????<!--?設(shè)置圖片輪播的順序?-->?????<ol?class="carousel-indicators">?????????<li?class="active">1</li>?????…?????</ol>?????<!--?設(shè)置輪播圖片?-->?????<div?class="carousel-inner">?????????<div?class="item?active">?????????????<a?href="##"><img?src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"?alt=""></a>?????????????<!--?圖片對(duì)應(yīng)標(biāo)題和描述內(nèi)容?-->????????????class">???????????????????????</div>?????????</div>?????…?????</div>?</div>

    運(yùn)行效果如下：


    查看全部

  • 圖片輪播--輪播圖片的設(shè)計(jì)（一）

    一個(gè)輪播圖片主要包括三個(gè)部分：

    ? ?輪播的圖片

    ? ?輪播圖片的計(jì)數(shù)器

    ? ?輪播圖片的控制器

    復(fù)雜一點(diǎn)的輪播圖片，每個(gè)輪播區(qū)會(huì)帶有對(duì)應(yīng)的標(biāo)題和描述內(nèi)容。那么在 Bootstrap 框架中，輪播圖是如何設(shè)計(jì)的呢？

    第一步：設(shè)計(jì)輪播圖片的容器。在 Bootstrap 框架中采用 carousel 樣式，并且給這個(gè)容器定義一個(gè) ID 值，方便后面采用 data 屬性來聲明觸發(fā)。

    <div?id="slidershow"?class="carousel"></div>

    第二步：設(shè)計(jì)輪播圖片計(jì)數(shù)器。在容器 div.carousel 的內(nèi)部添加輪播圖片計(jì)算器，采用 carousel-indicators 樣式，其主要功能是顯示當(dāng)前圖片的播放順序(有幾張圖片就放置幾個(gè)li)，一般采用有順列表來制作：

    <div?id="slidershow"?class="carousel">?<!--?設(shè)置圖片輪播的順序?-->?????<ol?class="carousel-indicators">?????????<li?class="active">1</li>?????????<li>2</li>?????????<li>3</li>?????????<li>4</li>?????????<li>5</li>?????????...?????</ol></div>


    查看全部

  • 手風(fēng)琴--聲明式觸發(fā)手風(fēng)琴（三）

    第五步，激活手風(fēng)琴交互行為。要完成交互行為，需要在標(biāo)題鏈接中自定義兩個(gè)屬性，一個(gè)是data-toggle，并且取值為collapse；另一個(gè)是data-target，取值為各個(gè)面板內(nèi)容區(qū)的標(biāo)識(shí)符，比如說ID，在這個(gè)例子分別是#panel1、#panel2和#panel3：

    <div?class="panel?panel-accordion?panel-default">?????<div?class="panel-heading">?????????<h4?class="panel-title"><a?href="#panel1"?data-toggle="collapse"?data-target="#panel1">標(biāo)題一</a></h4>?????</div>?????<div?class="panel-collapse?collapse?in"?id="panel1">?????????<div?class="panel-body">折疊區(qū)內(nèi)容...</div>?????</div>?</div>

    到此，實(shí)現(xiàn)了單個(gè)面板的“顯示/隱藏”的切換。但離手風(fēng)琴效果還略有差距。

    注意：在這個(gè)案例中不加入data-target="#panel1"也可以，因?yàn)榍懊嬉呀?jīng)有了href="#panel1"，但如是button按鈕作為觸發(fā)器就必須使用data-target="#panel1"語句了。

    第六步，定義data-parent!!!!!屬性，實(shí)現(xiàn)點(diǎn)擊一個(gè)其中一個(gè)元素時(shí)，關(guān)閉所有的折疊區(qū)，再打開所單擊的區(qū)域（如果所單擊區(qū)域是展示的，則會(huì)關(guān)閉）。這個(gè)data-parent取值與手風(fēng)琴面板容器的標(biāo)識(shí)符相匹配，因?yàn)樯婕暗饺吭氐?，所以得與div這個(gè)大容器中id相匹配?。。?/strong>比如這個(gè)例子是指?#myAccordion：

    <div?class="panel-group"?id="">?????<div?class="panel?panel-accordion?panel-default">?????????<div?class="panel-heading">?????????????<h4?class="panel-title">?????????????????<a?href="#panel1"?data-toggle="collapse"?data-target="#panel1"?>標(biāo)題一</a>?????????????</h4>?????????</div>?…

    最終效果如下：

    通過示例，我們可以看出以下幾點(diǎn)：

    ??使用?panel?的?panel-title?做為觸元素，使用panel-body的父元素作為折疊區(qū)；???使用一個(gè)?panel-group?來包含多個(gè)?panel，從而實(shí)現(xiàn)手風(fēng)琴效果；???；???觸發(fā)元素需要指定?data-toggle，并且值為?collapse；???觸發(fā)元素都要指定?data-target屬性；???data-target屬性的值對(duì)應(yīng)?panel-body?的父元素的ID或者其他樣式標(biāo)識(shí)符。

    ?


    查看全部

  • 手風(fēng)琴--聲明式觸發(fā)手風(fēng)琴（二）

    第三步，為了把標(biāo)題和內(nèi)容區(qū)捆綁在一起，可以通過錨鏈接的方法，把標(biāo)題區(qū)域和面板區(qū)連在一起：

    <div?class="panel-group"?id="myAccordion">?????<div?class="panel?panel-accordion?panel-default">?????????<div?class="panel-heading">?????????????class="panel-title"></h4>?????????</div>?????????<div?class="panel-collapse"?id="panel1">?????????????<div?class="panel-body">折疊區(qū)內(nèi)容...</div>?????????</div>?????</div>?????<div?class="panel?panel-accordion?panel-default">?????????<div?class="panel-heading">?????????????<h4?class="panel-title"><a?href="#panel2">標(biāo)題二</a></h4>?????????</div>?????????<div?class="panel-collapse"?id="panel2">?????????????<div?class="panel-body">折疊區(qū)內(nèi)容...</div>?????????</div>?????</div>?????......?</div>


    第四步，控制面板內(nèi)容區(qū)是否可視。在Bootstrap框架中，如果你想讓內(nèi)容區(qū)域不可視，只需要在 panel-collapse 樣式上添加?collapse：

    <div?class="panel?panel-accordion?panel-default">?????<div?class="panel-heading">?????????<h4?class="panel-title"><a?href="#panel1">標(biāo)題一</a></h4>?????</div>?????<div?class="panel-collapse"?id="panel1">?????????<div?class="panel-body">折疊區(qū)內(nèi)容...</div>?????</div>?</div>

    此時(shí)你會(huì)看到效果如下圖所示：

    每個(gè)面板的內(nèi)容區(qū)都被隱藏起來了，變成不可視，但有時(shí)候希望默認(rèn)第一個(gè)面板內(nèi)容是可視的，需要怎么辦？其實(shí)Bootstrap作者早就為大家做了這方面的考慮，你只需要在collapse基礎(chǔ)上再追加?in樣式：

    <div?class="panel?panel-accordion?panel-default">?????<div?class="panel-heading">?????????<h4?class="panel-title"><a?href="#panel1">標(biāo)題一</a></h4>?????</div>?????<div?class="panel-collapse?"?id="panel1">?????????<div?class="panel-body">折疊區(qū)內(nèi)容...</div>?????</div>?</div>


    效果如下：


    查看全部

  • 手風(fēng)琴--聲明式觸發(fā)手風(fēng)琴（一）

    觸發(fā)手風(fēng)琴可以通過自定義的?data-toggle 屬性來觸發(fā)。其中data-toggle值設(shè)置為?collapse，data-target="#折疊區(qū)標(biāo)識(shí)符"。接下來我們來看一個(gè)簡(jiǎn)單的示例：（六步）
    第一步，設(shè)計(jì)一個(gè)面板組合，里面有三個(gè)折疊區(qū)：

    <div?class="panel-group"?id="myAccordion">?????<div?class="panel?panel-accordion?panel-default"></div>?????<div?class="panel?panel-accordion?panel-default"></div>?????<div?class="panel?panel-accordion?panel-default"></div>?</div>

    你將看到這樣的一個(gè)效果：

    第二步：給面板添加內(nèi)容，每個(gè)面板包括兩個(gè)部分，第一個(gè)是面板標(biāo)題?panel-heading，并且在這里面添加標(biāo)題?panel-title。第二個(gè)部分是面板內(nèi)容，也就是折疊區(qū)，使用?panel-collapse?樣式。

    <div?class="panel?panel-accordion?panel-default">?????<div?class="panel-heading">?????????<h4?class="panel-title">標(biāo)題一</h4>?????</div>?????<div?class="panel-collapse">?????????<div?class="panel-body">折疊區(qū)內(nèi)容...</div>?????</div>?</div>?…

    此時(shí)你將看到下圖這樣的效果：


    查看全部

  • 手風(fēng)琴--手風(fēng)琴結(jié)構(gòu)

    手風(fēng)琴最關(guān)鍵的部分，就是每個(gè)標(biāo)題對(duì)應(yīng)有一個(gè)內(nèi)容，在Bootstrap框架中將這兩個(gè)部分組合起來稱為一個(gè)panel頁板，如右邊效果所示，他就有三個(gè)panel面板，將這三個(gè)面板組合在一起，就是一個(gè)面板組合?panel-group，也就是手風(fēng)琴的結(jié)構(gòu)。如：

    <div?class="panel-group"?id="accordion">?????<div?class="panel?panel-default">?????????<div?class="panel-heading">?????????????<h4?class="panel-title"><a?data-toggle="collapse"?data-parent="#accordion"?href="#collapseOne">標(biāo)題一</a></h4>?????????</div>?????????<div?id="collapseOne"?class="panel-collapse?collapse?in">?????????????<div?class="panel-body">標(biāo)題一對(duì)應(yīng)的內(nèi)容</div>?????????</div>?????</div>?????<div?class="panel?panel-default">?????????<div?class="panel-heading">?????????????<h4?class="panel-title"><a?data-toggle="collapse"?data-parent="#accordion"?href="#collapseTwo">標(biāo)題二</a></h4>?????????</div>?????????<div?id="collapseTwo"?class="panel-collapse?collapse">?????????????<div?class="panel-body">標(biāo)題二對(duì)應(yīng)的內(nèi)容</div>?????????</div>?????</div>?????<div?class="panel?panel-default">?????????<div?class="panel-heading">?????????????<h4?class="panel-title"><a?data-toggle="collapse"?data-parent="#accordion"?href="#collapseThree">標(biāo)題三</a></h4>?????????</div>?????????<div?id="collapseThree"?class="panel-collapse?collapse">?????????????<div?class="panel-body">標(biāo)題三對(duì)應(yīng)的內(nèi)容</div>?????????</div>?????</div>?</div>

    簡(jiǎn)單點(diǎn)就是一個(gè)觸發(fā)器和一個(gè)折疊區(qū)：

    <button?type="button"?class="btn?btn-danger"?data-toggle="collapse"?data-target="#demo">觸發(fā)器</button>?<div?id="demo"?class="collapse?in">折疊區(qū)</div>

    ?


    查看全部

  • 按鈕插件--JavaScript用法

    除了上面介紹的屬性聲明使用方法之外，按鈕插件還可以通過調(diào)用button函數(shù)，然后給button函數(shù)傳入具體的參數(shù)，實(shí)現(xiàn)不同的效果。而其中有兩個(gè)參數(shù)是固定不變的，即toggle和reset。其他的都可以隨意定義：
    1、切換按鈕狀態(tài)（得到焦點(diǎn)）：

    $("#mybutton").button

    2、重新恢復(fù)按鈕：

    $("#mybutton").

    如下代碼：

    $(function()?{???????$("#mybutton").click(function(){??????????$(this)..delay(1000).{?????????????$(this?????});???????????????});?});

    3、任意參數(shù)：

    $("#mybutton").button("任意字符參數(shù)名")

    上面代碼作用：替換?data-任意字符參數(shù)名-text?的屬性值為“按鈕上顯示的文本值”。如下代碼：

    html:

    <button?type="button"?data-toggle="button"?class="btn?btn-primary"?id="mybutton"?data-complete-text="Loading?finished"?>確認(rèn)</button>

    js代碼：

    ?$(function()?{???????$("#mybutton").click(function(){??????????$(this).).delay(1000)(function()?{?????????????$(this));??????????});???????????????});??});


    查看全部
首頁上一頁1234567下一頁尾頁

舉報(bào)

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

微信掃碼，參與3人拼團(tuán)

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)
友情提示：

您好，此課程屬于遷移課程，您已購(gòu)買該課程，無需重復(fù)購(gòu)買，感謝您對(duì)慕課網(wǎng)的支持！