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

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

玩轉Bootstrap(基礎)

  • 當然表單除了這幾個元素之外,還有input、select、textarea等元素,在Bootstrap框架中,通過定制了一個類名`form-control`,也就是說,如果這幾個元素使用了類名“form-control”,將會實現一些設計上的定制效果。 1、寬度變成了100% 2、設置了一個淺灰色(#ccc)的邊框 3、具有4px的圓角 4、設置陰影效果,并且元素得到焦點之時,陰影和邊框效果會有所變化 5、設置了placeholder的顏色為#999
    查看全部
    0 采集 收起 來源:基礎表單

    2018-03-22

  • 表格--響應式表格 隨著各種手持設備的出現,要想讓你的Web頁面適合千羅萬像的設備瀏覽,響應式設計的呼聲越來越高。在Bootstrap中也為表格提供了響應式的效果,將其稱為響應式表格。 Bootstrap提供了一個容器,并且此容器設置類名“.table-responsive”,此容器就具有響應式效果,然后將<table class="table">置于這個容器當中,這樣表格也就具有響應式效果。 Bootstrap中響應式表格效果表現為:當你的瀏覽器可視區域小于768px時,表格底部會出現水平滾動條。當你的瀏覽器可視區域大于768px時,表格底部水平滾動條就會消失。
    查看全部
  • 表格--緊湊型表格 何謂緊湊型表格,簡單理解,就是單元格沒內距或者內距較其他表格的內距更小。換句話說,要實現緊湊型表格只需要重置表格單元格的內距padding的值。那么在Bootstrap中,通過類名“table-condensed”重置了單元格內距值。 緊湊型表格的運用,也只是需要在<table class="table">基礎上添加類名“table-condensed”: <table class="table table-condensed"> … </table>
    查看全部
  • 表格--鼠標懸浮高亮的表格 當鼠標懸停在表格的行上面有一個高亮的背景色,這樣的表格讓人看起來就是舒服,時刻告訴用戶正在閱讀表格哪一行的數據。Bootstrap的確沒有讓你失望,他也考慮到這種效果,其提供了一個“.table-hover”類名來實現這種表格效果。 鼠標懸停高亮的表格使用也簡單,僅需要<table class="table">元素上添加類名“table-hover”即可: <table class="table table-hover"> … </table>
    查看全部
  • 表格--帶邊框的表格 基礎表格僅讓表格部分地方有邊框,但有時候需要整個表格具有邊框效果。Bootstrap出于實際運用,也考慮這種表格效果,即所有單元格具有一條1px的邊框。 Bootstrap中帶邊框的表格使用方法和斑馬線表格的使用方法類似,只需要在基礎表格<table class="table">基礎上添加一個“.table-bordered”類名即可: <table class="table table-bordered"> … </table>
    查看全部
  • 表格--斑馬線表格 在Bootstrap中實現這種表格效果并不困難,只需要在<table class="table">的基礎上增加類名“.table-striped”即可: <table class="table table-striped"> … </table> 其效果與基礎表格相比,僅是在tbody隔行有一個淺灰色的背景色。其實現原理也非常的簡單,利用CSS3的結構性選擇器“:nth-child”來實現,所以對于IE8以及其以下瀏覽器,沒有背景條紋效果。
    查看全部
  • “.table”主要有三個作用: ? 給表格設置了margin-bottom:20px以及設置單元內距 ? 在thead底部設置了一個2px的淺灰實線 ? 每個單元格頂部設置了一個1px的淺灰實線
    查看全部
  • 表格--表格行的類 Bootstrap還為表格的行元素<tr>提供了五種不同的類名,每種類名控制了行的不同背景顏色,具體說明如下表所示: http://img1.sycdn.imooc.com//53ad213f0001b08807340508.jpg
    查看全部
  • 表格 Bootstrap為表格不同的樣式風格提供了不同的類名,主要包括: ? .table:基礎表格 ? .table-striped:斑馬線表格 ? .table-bordered:帶邊框的表格 ? .table-hover:鼠標懸停高亮的表格 ? .table-condensed:緊湊型表格 ? .table-responsive:響應式表格
    查看全部
    0 采集 收起 來源:表格

    2018-03-22

  • Bootstrap也考慮到這一點,你只需要在pre標簽上添加類名“.pre-scrollable”,就可以控制代碼塊區域最大高度為340px,一旦超出這個高度,就會在Y軸出現滾動條。
    查看全部
    0 采集 收起 來源:代碼(二)

    2018-03-22

  • 代碼(一) 本節內容相對來說比較簡單,一般在個人博客上使用的較為頻繁,用于顯示代碼的風格。在Bootstrap主要提供了三種代碼風格: 1、使用<code></code>來顯示單行內聯代碼 2、使用<pre></pre>來顯示多行塊代碼 3、使用<kbd></kbd>來顯示用戶輸入代碼
    查看全部
    0 采集 收起 來源:代碼(一)

    2018-03-22

  • 列表--水平定義列表 水平定義列表就像內聯列表一樣,Bootstrap可以給<dl>添加類名“.dl-horizontal”給定義列表實現水平顯示效果。
    查看全部
  • 列表--簡介 在HTML文檔中,列表結構主要有三種:有序列表、無序列表和定義列表。具體使用的標簽說明如下: 無序列表 <ul> <li>…</li> </ul> 有序列表 <ol> <li>…</li> </ol> 定義列表 <dl> <dt>…</dt> <dd>…</dd> </dl> Bootstrap根據平時的使用情形提供了六種形式的列表: ? 普通列表 ? 有序列表 ? 去點列表 ? 內聯列表 ? 描述列表 ? 水平描述列表
    查看全部
    0 采集 收起 來源:列表--簡介

    2018-03-22

  • 文本對齊風格 ? 左對齊,取值left ? 居中對齊,取值center ? 右對齊,取值right ? 兩端對齊,取值justify Bootstrap通過定義四個類名來控制文本的對齊風格: ? .text-left:左對齊 ? .text-center:居中對齊 ? .text-right:右對齊 ? .text-justify:兩端對齊
    查看全部
    0 采集 收起 來源:文本對齊風格

    2018-03-22

  • 強調文字 .text-muted:提示,使用淺灰色(#999) .text-primary:主要,使用藍色(#428bca) .text-success:成功,使用淺綠色(#3c763d) .text-info:通知信息,使用淺藍色(#31708f) .text-warning:警告,使用黃色(#8a6d3b) .text-danger:危險,使用褐色(##a94442)
    查看全部
    0 采集 收起 來源:強調相關的類

    2018-03-22

舉報

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

微信掃碼,參與3人拼團

微信客服

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

幫助反饋 APP下載

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

公眾號

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

友情提示:

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