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

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

玩轉Bootstrap(基礎)

  • 去序號列表(也可以是ol)

    ?<ul class="list-unstyled">

    ? ? ? ? <li>不帶項目符號</li>

    ? ? ? ? <li>不帶項目符號</li>

    ? ? ? ? </ul>


    查看全部
  • html的三種列表

    <ul>

    ? ? <li>無序列表信息1</li>

    ? ? <li>無序列表信息2</li>

    ? ? <li>無序列表信息3</li>

    </ul>

    <ol>

    ? ? <li>有序列表信息1</li>

    ? ? <li>有序列表信息2</li>

    ? ? <li>有序列表信息3</li>

    </ol>

    <dl>

    ? ? <dt>定義列表標題</dt>

    ? ? <dd>定義列表信息1</dd>

    ? ? <dd>定義列表信息2</dd>

    </dl>


    查看全部
    0 采集 收起 來源:列表--簡介

    2021-01-07

  • bootstrap中水平對齊的樣式

    <p?class="text-left">我居左</p>
    <p?class="text-center">我居中</p>
    <p?class="text-right">我居右</p>
    <p?class="text-justify">我兩端對齊</p>


    查看全部
    0 采集 收起 來源:文本對齊風格

    2021-01-07

  • 沒看明白
    查看全部
  • ???.table:基礎表格

    ?????.table-striped:斑馬線表格

    ?????.table-bordered:帶邊框的表格

    ?????.table-hover:鼠標懸停高亮的表格

    ?????.table-condensed:緊湊型表格

    ?????.table-responsive:響應式表格


    查看全部
    0 采集 收起 來源:表格

    2020-11-20

  • 基本用法 ? ? ? ? ? ? ? ?? ? ? ? ? ?

    網格系統用來布局,其實就是列的組合。Bootstrap框架的網格系統中有四種基本的用法。由于Bootstrap框架在不同屏幕尺寸使用了不同的網格樣式,在這一節中所涉及到的示例,我們都以中屏(970px)為例進行介紹,其他屏幕的使用也類似這一種。關于屏幕尺寸如下圖:

    1、列組合

    列組合簡單理解就是更改數字來合并列(原則:列總和數不能超12),有點類似于表格的colspan屬性


    實現列組合方式非常簡單,只涉及兩個CSS兩個特性:浮動寬度百分比

    查看全部
    0 采集 收起 來源:基本用法

    2020-08-01

  • (.column),但列數之和不能超過平分的總列數,比如12。如:

    <div?class="container">
    <div?class="row">
    ??<div?class="col-md-4"></div>
    ??<div?class="col-md-8"></div>

    3、具體內容應當放置在列容器(column)之內,而且只有列(column)才可以作為行容器(.row)的直接子元素

    4、通過設置內距(padding)從而創建列與列之間的間距。然后通過為第一列和最后一列設置負值的外距(margin)來抵消內距(padding)的影響

    查看全部
    0 采集 收起 來源:工作原理

    2020-08-01

  • 圖像在網頁制作中也是常要用到的元素,在Bootstrap框架中對于圖像的樣式風格提供以下幾種風格:

    1、img-responsive:響應式圖片,主要針對于響應式設計
    2、img-rounded:圓角圖片
    3、img-circle:圓形圖片
    4、img-thumbnail:縮略圖片

    使用方法:

    使用方法非常簡單,只需要在<img>標簽上添加對應的類名,

    設置圖片大?。?/p>

    由于樣式沒有對圖片做大小上的樣式限制,所以在實際使用的時候,需要通過其他的方式來處理圖片大小。比如說控制圖片容器大小。(注意不可以通過css樣式直接修改img圖片的大小,這樣操作就不響應了)

    注意:

    對于圓角圖片和圓形圖片效果,因為是使用了CSS3的圓角樣式來實現的,所以注意對于IE8以及其以下版本不支持,是沒有圓角效果的。

    Bootstrap框架為了大家更好的維護圖像的樣式,同樣將這部分樣式獨立出來:
    1、LESS版本,可以查閱scaffolding.less
    2、Sass版本,可以查閱_scaffolding.scss
    大家可以修改其中之一,重新編譯就可以得到自己需要的圖片樣式效果。


    查看全部
    0 采集 收起 來源:圖像

    2020-07-30

  • 按鈕狀態——禁用狀態

    和input等表單控件一樣,在Bootstrap框架的按鈕中也具有禁用狀態的設置。禁用狀態與其他狀態按鈕相比,就是背景顏色的透明度做了一定的處理,opcity的值從100%調整為65%。

    在Bootstrap框架中,要禁用按鈕有兩種實現方式:

    方法1:在標簽中添加disabled屬性

    方法2:在元素標簽中添加類名“disabled”

    兩者的主要區別是:

    “.disabled”樣式不會禁止按鈕的默認行為,比如說提交和重置行為等。如果想要讓這樣的禁用按鈕也能禁止按鈕的默認行為,則需要通過JavaScript這樣的語言來處理。對于<a>標簽也存在類似問題,如果通過類名“.disable”來禁用按鈕,其鏈接行為是無法禁止。而在元素標簽中添加“disabled”屬性的方法是可以禁止元素的默認行為的。


    查看全部
  • Bootstrap框架針對按鈕的狀態做了一些特殊處理。在Bootstrap框架中針對按鈕的狀態效果主要分為兩種:活動狀態和禁用狀態。

    Bootstrap按鈕的活動狀態主要包括按鈕的懸浮狀態(:hover),點擊狀態(:active)和焦點狀態(:focus)幾種。
    /


    查看全部
  • Bootstrap框架中提供了一個類名“btn-block”。按鈕使用這個類名就可以讓按鈕充滿整個容器,并且這個按鈕不會有任何的padding和margin值。在實際當中,常把這種按鈕稱為塊狀按鈕。

    查看全部
    0 采集 收起 來源:塊狀按鈕

    2020-07-30

  • 在Bootstrap框架中不同的按鈕風格都是通過不同的類名來實現,在使用過程中,開發者只需要選擇不同的類名即可:

    使用起來就很簡單,就像前面介紹的默認按鈕一樣的使用方法,只需要在基礎按鈕“.btn”基礎上追加對應的類名,就可以得到需要的按鈕風格。

    查看全部
    0 采集 收起 來源:定制風格

    2020-07-30

  • 多標簽支持

    一般制作按鈕除了使用<button>標簽元素之外,還可以使用<input type="submit">和<a>標簽等。同樣,在Bootstrap框架中制作按鈕時,除了剛才所說的這些標簽元素之外,還可以使用在其他的標簽元素上,唯一需要注意的是,要在制作按鈕的標簽元素上添加類名“btn”。如果不添加是不會有任何按鈕效果


    查看全部
    0 采集 收起 來源:多標簽支持

    2020-07-30

  • 默認按鈕

    Bootstrap框架首先通過基礎類名“.btn”定義了一個基礎的按鈕風格,然后通過“.btn-default”定義了一個默認的按鈕風格。默認按鈕的風格就是在基礎按鈕的風格的基礎上修改了按鈕的背景顏色、邊框顏色和文本顏色


    查看全部
    0 采集 收起 來源:默認按鈕

    2020-07-30

  • 表單控件狀態(驗證狀態)

    在制作表單時,不免要做表單驗證。同樣也需要提供驗證狀態樣式,在Bootstrap框架中同樣提供這幾種效果。
    1、.has-warning:警告狀態(黃色)
    2、.has-error:錯誤狀態(紅色)
    3、.has-success:成功狀態(綠色)
    使用的時候只需要在form-group容器上對應添加狀態類名。


    查看全部

舉報

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

微信掃碼,參與3人拼團

微信客服

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

幫助反饋 APP下載

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

公眾號

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

友情提示:

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