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

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

玩轉Bootstrap(基礎)

  • 列排序 列排序其實就是改變列的方向,就是改變左右浮動,并且設置浮動的距離。在Bootstrap框架的網格系統中是通過添加類名“col-md-push-*”和“col-md-pull-*” (其中星號代表移動的列組合數)。
    查看全部
    0 采集 收起 來源:列排序

    2018-03-22

  • 偏移 有的時候,我們不希望相鄰的兩個列緊靠在一起,但又不想使用margin或者其他的技術手段來。這個時候就可以使用列偏移(offset)功能來實現。使用列偏移也非常簡單,只需要在列元素上添加類名“col-md-offset-*”(其中星號代表要偏移的列組合數),那么具有這個類名的列就會向右偏移。例如,你在列元素上添加“col-md-offset-4”,表示該列向右移動4個列的寬度。
    查看全部
    0 采集 收起 來源:列偏移

    2018-03-22

  • 工作原理 Bootstrap框架的網格系統工作原理如下: 1、數據行(.row)必須包含在容器(.container)中,以便為其賦予合適的對齊方式和內距(padding)。 2、在行(.row)中可以添加列(.column),但列數之和不能超過平分的總列數。 3、具體內容應當放置在列容器(column)之內,而且只有列(column)才可以作為行容器(.row)的直接子元素 4、通過設置內距(padding)從而創建列與列之間的間距。然后通過為第一列和最后一列設置負值的外距(margin)來抵消內距(padding)的影響
    查看全部
    0 采集 收起 來源:工作原理

    2018-03-22

  • 實現原理 網格系統的實現原理非常簡單,僅僅是通過定義容器大小,平分12份(也有平分成24份或32份,但12份是最常見的),再調整內外邊距,最后結合媒體查詢,就制作出了強大的響應式網格系統。Bootstrap框架中的網格系統就是將容器平分成12份。
    查看全部
    0 采集 收起 來源:實現原理

    2018-03-22

  • ...
    查看全部
    0 采集 收起 來源:圖標(二)

    2018-03-22

  • 圖標(二) 在網頁中使用圖標也非常的簡單,在任何內聯元素上應用所對應的樣式即可: <span class="glyphicon glyphicon-search"></span> <span class="glyphicon glyphicon-asterisk"></span> <span class="glyphicon glyphicon-plus"></span> <span class="glyphicon glyphicon-cloud"></span>
    查看全部
    0 采集 收起 來源:圖標(二)

    2018-03-22

  • 自定義完字體之后,需要對icon設置一個默認樣式,在Bootstrap框架中是通過給元素添加“glyphicon”類名來實現,然后通過偽元素“:before”的“content”屬性調取對應的icon編碼:
    查看全部
    0 采集 收起 來源:圖標(一)

    2018-03-22

  • 圖像 圖像在網頁制作中也是常要用到的元素,在Bootstrap框架中對于圖像的樣式風格提供以下幾種風格: 1、img-responsive:響應式圖片,主要針對于響應式設計 2、img-rounded:圓角圖片 3、img-circle:圓形圖片 4、img-thumbnail:縮略圖片
    查看全部
    0 采集 收起 來源:圖像

    2018-03-22

  • 兩者的主要區別是: “.disabled”樣式不會禁止按鈕的默認行為,比如說提交和重置行為等。如果想要讓這樣的禁用按鈕也能禁止按鈕的默認行為,則需要通過JavaScript這樣的語言來處理。對于<a>標簽也存在類似問題,如果通過類名“.disable”來禁用按鈕,其鏈接行為是無法禁止。而在元素標簽中添加“disabled”屬性的方法是可以禁止元素的默認行為的。
    查看全部
  • 按鈕狀態——禁用狀態 和input等表單控件一樣,在Bootstrap框架的按鈕中也具有禁用狀態的設置。禁用狀態與其他狀態按鈕相比,就是背景顏色的透明度做了一定的處理,opcity的值從100%調整為65%。 在Bootstrap框架中,要禁用按鈕有兩種實現方式: 方法1:在標簽中添加disabled屬性 方法2:在元素標簽中添加類名“disabled” 兩者的主要區別是: “.disabled”樣式不會禁止按鈕的默認行為,比如說提交和重置行為等。如果想要讓這樣的禁用按鈕也能禁止按鈕的默認行為,則需要通過JavaScript這樣的語言來處理。對于<a>標簽也存在類似問題,如果通過類名“.dis
    查看全部
  • 按鈕狀態——活動狀態 Bootstrap框架針對按鈕的狀態做了一些特殊處理。在Bootstrap框架中針對按鈕的狀態效果主要分為兩種:活動狀態和禁用狀態。 Bootstrap按鈕的活動狀態主要包括按鈕的懸浮狀態(:hover),點擊狀態(:active)和焦點狀態(:focus)幾種。
    查看全部
  • 塊狀按鈕 從前面幾節的內容中,大家可能發現了,每個示例中的按鈕寬度都是依靠按鈕文本和padding的值來決定。但有時候在制作按鈕的時候需要按鈕寬度充滿整個父容器(width:100%),特別是在移動端的制作中。那么前面的方法我們都無法很好的實現,除非重新定義按鈕的寬度。其實在Bootstrap中并不需要這樣做,Bootstrap框架中提供了一個類名“btn-block”。按鈕使用這個類名就可以讓按鈕充滿整個容器,并且這個按鈕不會有任何的padding和margin值。在實際當中,常把這種按鈕稱為塊狀按鈕 使用方法和前面的類似,只需要在原按鈕類名上添加“.btn-block”類名
    查看全部
    0 采集 收起 來源:塊狀按鈕

    2018-03-22

  • 定制風格 在介紹按鈕開篇就說過,Web頁面可能會有不同的按鈕風格。那么在Bootstrap框架也考慮了。在Bootstrap框架中除了默認的按鈕風格之外,還有其他六種按鈕風格,每種風格的其實都一樣,不同之處就是按鈕的背景顏色、邊框顏色和文本顏色。 在Bootstrap框架中不同的按鈕風格都是通過不同的類名來實現,在使用過程中,開發者只需要選擇不同的類名即可: http://img1.sycdn.imooc.com//53b367bd0001d59c07530312.jpg http://img1.sycdn.imooc.com//53b367d10001846a08020810.jpg
    查看全部
    0 采集 收起 來源:定制風格

    2018-03-22

  • 多標簽支持 一般制作按鈕除了使用<button>標簽元素之外,還可以使用<input type="submit">和<a>標簽等。同樣,在Bootstrap框架中制作按鈕時,除了剛才所說的這些標簽元素之外,還可以使用在其他的標簽元素上,唯一需要注意的是,要在制作按鈕的標簽元素上添加類名“btn”。如果不添加是不會有任何按鈕效果。 注意:雖然在Bootstrap框架中使用任何標簽元素都可以實現按鈕風格,但個人并不建議這樣使用,為了避免瀏覽器兼容性問題,個人強烈建議使用button或a標簽來制作按鈕。
    查看全部
    0 采集 收起 來源:多標簽支持

    2018-03-22

  • 默認按鈕 Bootstrap框架首先通過基礎類名“.btn”定義了一個基礎的按鈕風格,然后通過“.btn-default”定義了一個默認的按鈕風格。默認按鈕的風格就是在基礎按鈕的風格的基礎上修改了按鈕的背景顏色、邊框顏色和文本顏色。
    查看全部
    0 采集 收起 來源:默認按鈕

    2018-03-22

舉報

0/150
提交
取消
課程須知
本教程適合具有一定前端基礎的人員,對HTML和CSS有一定的了解,對于定制Bootstrap的同學需要具備LESS和Sass基礎知識。
老師告訴你能學到什么?
1、了解Bootstrap框架 2、如何使用Bootstrap制作Web頁面或Web應用程序 3、如何定制個性化Bootstrap

微信掃碼,參與3人拼團

微信客服

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

幫助反饋 APP下載

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

公眾號

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

友情提示:

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