国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

bootstrap解析-排版

gaara / 1800人閱讀

摘要:引用默認左邊右邊列表移除默認只針對直接內聯只針對直接使得水平排列屏幕時超出會出現三個小點的省列號屏幕時本篇博文首發于本人個人博客,查看更多點這里

標題

36px .h1

30px .h2

24px .h3

18px .h4

14px .h5
12px .h6 當前字體的65% .small

前面4個各差6px,h4-h5差4px,h5-h6差2px

.h*是為了給inline的文本賦予標題的樣式

為副標題,.small也可以定義副標題或給inline的文本定義副標題樣式

全局

默認

font-size: 14px;
line-height: 1.42857143;(倍字體)
color: #333;
background: #fff;

默認

margin-top: 10px
.lead
margin-bottom: 20px;
font-weight: 300;
line-height: 1.4;
margin-top: 10px

1. 屏幕寬768px以上font-size: 21px;
2. 屏幕寬768px以下font-size: 16px;
inline文本元素 標記標簽
padding: .2em;
background-color: #fcf8e3;
color:#000;
刪除線,刪除的文本 | 無用的文本
text-decoration: line-through;

兩個標簽展示的效果一樣,只是是給搜索引擎看的,是給用戶看的。

插入的文本 | 帶下劃線的文本
text-decoration: underline

兩個標簽展示的效果也一樣,是給搜索引擎看的,是給用戶看的

| .small ( 小號文本 )
font-size: 85% // 當前字體的85%

inline文本內為當前字體的85%,和在內展示不同。

(著重強調和斜體強調) 對齊
.text-left  // 左對齊
.text-center  // 居中對齊
.text-right  // 右對齊
.text-justify  // 分散對齊
.text-noerap  // 不換行
文本大小寫
.text-lowercase  // 轉小寫
.text-uppercase  // 轉大寫
.text-capitalize  // 首字母大寫
縮列語
cursor: help;
border-bottom: 1px dotted #777;
text-decoration:none; // 取消瀏覽器默認樣式

.initialism (首字母縮略語)

font-size: 90%;
text-transform: uppercase;

添加會比當前字體小一些。

引用

默認左邊

padding: 10px 20px;
margin: 0 0 20px;
font-size: 17.5px;
border-left: 5px solid #eee;

.blockquote-reverse右邊

padding-right: 15px;
padding-left: 0;
text-align: right;
border-right: 5px solid #eee;
border-left: 0;
列表
.list-unstyled ( 移除默認list-style )

只針對直接

  • .inline-block內聯
    .display:inline-block;

    只針對直接

  • .dl-horizontal

    使得

    水平排列

    1. 屏幕width>768px時
    dt style
    .dl-horizontal dt {
        width:180px;(超出會出現三個小點的省列號)
        float: left;
        overflow: hidden;
        clear: left;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    dl style
    .dl-horizontal dd {
        margin-left: 180px;
    }
    
    2. 屏幕width<768px時
    .dl-horizontal dt,.dl-horizontal dd {
        width:100%;
    }

    本篇博文首發于本人個人博客,查看更多點這里

  • 文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

    轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/112107.html

    相關文章

    • bootstrap解析-排版

      摘要:引用默認左邊右邊列表移除默認只針對直接內聯只針對直接使得水平排列屏幕時超出會出現三個小點的省列號屏幕時本篇博文首發于本人個人博客,查看更多點這里 標題 36px .h1 30px .h2 24px .h3 18px .h4 14px .h5 12px .h6 當前字體的65% .small 前面4個各差6px,h4-h5差4px,h5-h6差2px ....

      ChanceWong 評論0 收藏0
    • 有關css柵格系統的故事

      摘要:下面,本文將介紹幾個比較有代表性的柵格樣式庫,講述它們的簡要原理和用法正確的打開方式。雖然柵格樣式庫很棒,但它們并不是響應式設計的全部。但在這個過程中,理解各類柵格樣式庫的工作原理,正確使用它們,才能做出穩定可靠的頁面結構。 說到柵格系統(grid system),你也許見過這樣的概念: showImg(https://segmentfault.com/img/bVmQnO); 像這樣...

      legendaryedu 評論0 收藏0
    • 關于BOOTSTRAP的整理和理解

      摘要:規范名稱定義,便于維護。譬如關于的定義在格式化的中會聲明為,而在基本樣式的中又可能會聲明所以在中會出現多次定義。盡量減少連接數和的大小?;诎姹镜氖褂媚壳笆褂幂^廣的是版本和,其中的最新版本是的最新版本。 隨著CSS3和HTML5的流行,我們的WEB頁面不僅需要更人性化的設計理念,而且需要更酷的頁面特效和用戶體驗。作為開發者,我們需要了解一些寶貴的CSS UI開源框架資源,它們可以幫助我...

      amc 評論0 收藏0
    • 關于BOOTSTRAP的整理和理解

      摘要:規范名稱定義,便于維護。譬如關于的定義在格式化的中會聲明為,而在基本樣式的中又可能會聲明所以在中會出現多次定義。盡量減少連接數和的大小。基于版本的使用目前使用較廣的是版本和,其中的最新版本是的最新版本。 隨著CSS3和HTML5的流行,我們的WEB頁面不僅需要更人性化的設計理念,而且需要更酷的頁面特效和用戶體驗。作為開發者,我們需要了解一些寶貴的CSS UI開源框架資源,它們可以幫助我...

      Tony_Zby 評論0 收藏0
    • 關于BOOTSTRAP的整理和理解

      摘要:規范名稱定義,便于維護。譬如關于的定義在格式化的中會聲明為,而在基本樣式的中又可能會聲明所以在中會出現多次定義。盡量減少連接數和的大小?;诎姹镜氖褂媚壳笆褂幂^廣的是版本和,其中的最新版本是的最新版本。 隨著CSS3和HTML5的流行,我們的WEB頁面不僅需要更人性化的設計理念,而且需要更酷的頁面特效和用戶體驗。作為開發者,我們需要了解一些寶貴的CSS UI開源框架資源,它們可以幫助我...

      zeyu 評論0 收藏0

    發表評論

    0條評論

    gaara

    |高級講師

    TA的文章

    閱讀更多
    最新活動
    閱讀需要支付1元查看
    <