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

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

玩轉Bootstrap(基礎)

  • 無序列表

    無序列表和有序列表使用方式和我們平時使用的一樣(無序列表使用ul,有序列表使用ol標簽),在樣式方面,Bootstrap只是在此基礎上做了一些細微的優化。

    列表嵌套

    在Bootstrap中列表也是可以嵌套的。



    查看全部
  • Bootstrap根據平時的使用情形提供了六種形式的列表:

    ? ????普通列表

    ? ????有序列表

    ? ????去點列表

    ? ????內聯列表

    ? ????描述列表

    ? ????水平描述列表


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

    2020-03-10

  • Bootstrap通過定義四個類名來控制文本的對齊風格:

    ??????.text-left:左對齊

    ??????.text-center:居中對齊

    ??????.text-right:右對齊

    ??????.text-justify:兩端對齊


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

    2020-03-10

  • 這些強調類都是通過顏色來表示強調,具本說明如下:

    • .text-muted:提示,使用淺灰色(#999)

    • .text-primary:主要,使用藍色(#428bca)

    • .text-success:成功,使用淺綠色(#3c763d)

    • .text-info:通知信息,使用淺藍色(#31708f)

    • .text-warning:警告,使用黃色(#8a6d3b)

    • .text-danger:危險,使用褐色(#a94442)


    查看全部
    0 采集 收起 來源:強調相關的類

    2020-03-10

  • 斜體類似于加粗一樣,除了可以給元素設置樣式font-style值為italic實現之外,在Bootstrap中還可以通過使用標簽<em>或<i>來實現。

    查看全部
    0 采集 收起 來源:斜體

    2020-03-10

  • 在Bootstrap中,可以使用<b>和<strong>標簽讓文本直接加粗。

    查看全部
    0 采集 收起 來源:粗體

    2020-03-10

  • 如果想讓一個段落p突出顯示,可以通過添加類名“.lead”實現,其作用就是增大文本字號,加粗文本,而且對行高和margin也做相應的處理。

    <p>我是普通文本,我的樣子長成這樣我是普通文本,我的樣子長成這樣我是普通文本,</p>
    <p?class="lead">我是特意要突出的文本,我的樣子成這樣。我是特意要突出的文本,我的樣子長成這樣。</p>

    Bootstrap還通過元素標簽:<small>、<strong>、<em>和<cite>給文本做突出樣式處理


    查看全部
    0 采集 收起 來源:強調內容

    2020-03-10

  • 在Bootstrap中為文本設置了一個全局的文本樣式(這里所說的文本是指正文文本):

    1、全局文本字號為14px(font-size)。

    2、行高為1.42857143(line-height),大約是20px(大家看到一串的小數或許會有疑惑,其實他是通過LESS編譯器計算出來的,當然Sass也有這樣的功能)。

    3、顏色為深灰色(#333);

    4、字體為"Helvetica Neue", Helvetica, Arial, sans-serif;(font-family).該設置都定義在<body>元素上,由于這幾個屬性都是繼承屬性,所以Web頁面中文本(包括段落p元素)如無重置都會具有這些樣式效果。

    默認情況之下,p元素具有一個上下外邊距,并且保持一個行高的高度


    查看全部
  • 使用了<small>標簽來制作副標題。這個副標題具有其自己的一些獨特樣式:

    1、行高都是1,而且font-weight設置了normal變成了常規效果(不加粗),同時顏色被設置為灰色(#999)。
    2、由于<small>內的文本字體在h1~h3內,其大小都設置為當前字號的65%;而在h4~h6內的字號都設置為當前字號的75%;
    詳細代碼請參閱bootstrap.css文件中第407行~第443行。


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

    2020-03-10

  • 53acce330001429807730337.jpg

    Bootstrap標題樣式進行了以下顯著的優化重置:

    1、重新設置了margin-top和margin-bottom的值, ?h1~h3重置后的值都是20px;h4~h6重置后的值都是10px。
    2、所有標題的行高都是1.1(也就是font-size的1.1倍),而且文本顏色和字體都繼承父元素的顏色和字體。
    3、固定不同級別標題字體大小,h1=36px,h2=30px,h3=24px,h4=18px,h5=14px和h6=12px。


    查看全部
    0 采集 收起 來源:標題(一)

    2020-03-10

  • Bootstrap框架在這一部分做了一定的變更,不再一味追求歸零,而是更注重重置可能產生問題的樣式(如,body,form的margin等),保留和堅持部分瀏覽器的基礎樣式,解決部分潛在的問題,提升一些細節的體驗,具體說明如下:

    • 移除body的margin聲明

    • 設置body的背景色為白色

    • 為排版設置了基本的字體、字號和行高

    • 設置全局鏈接顏色,且當鏈接處于懸浮“:hover”狀態時才會顯示下劃線樣式


    查看全部
    0 采集 收起 來源:全局樣式

    2020-03-10

  • bootstrap模板為使IE6、7、8版本(IE9以下版本)瀏覽器兼容html5新增的標簽,引入下面代碼文件即可。

    <script?src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

    同理為使IE6、7、8版本瀏覽器兼容css3樣式,引入下面代碼:

    <script?src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>


    查看全部
    0 采集 收起 來源:基本的HTML模板

    2020-03-10

  • bootstrap不支持IE8的兼容模式

    http://img1.sycdn.imooc.com//5e66db9b0001780507140082.jpghttp://img1.sycdn.imooc.com//5e66dbb7000137b309090103.jpgwidth=device-width? ?//讓寬度等于頁面得寬度

    initial-scale=1? //設置初始縮放的比例

    css文件放在head中

    javascript文件放在body最下邊

    查看全部
  • GitHub上這樣介紹 bootstrap:

    ?????? 簡單靈活可用于架構流行的用戶界面和交互接口的html、css、javascript工具集。

    ?????? 基于html5、css3的bootstrap,具有大量的誘人特性:友好的學習曲線,卓越的兼容性,響應式設計,12列格網,樣式向導文檔。

    ?????? 自定義JQuery插件,完整的類庫,基于Less等。


    查看全部
  • 首先dt和dd是放于dl標簽內,標簽dt與dd處于dl下相同級。也就是dt不能放入dd內,dd不能放入dt內。在dl下,dt與dd處于同級標簽。dd標簽可以若干。同時不能不加dl地單獨使用dt標簽或dd標簽

    查看全部

舉報

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

微信掃碼,參與3人拼團

微信客服

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

幫助反饋 APP下載

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

公眾號

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

友情提示:

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