资讯专栏INFORMATION COLUMN

bootstrap解析-排版

gaara / 1631人阅读

摘要:引用默认左边右边列表移除默认只针对直接内联只针对直接使得水平排列屏幕时超出会出现三个小点的省列号屏幕时本篇博文首发于本人个人博客,查看更多点这里

标题

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%;
    }

    本篇博文首发于本人个人博客查看更多点这里

  • 文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

    转载请注明本文地址:https://www.ucloud.cn/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元查看
    <