当前位置: 首页 > Web前端 > CSS

Bootstrap分析-排版

时间:2023-03-31 00:04:24 CSS

title

36px.h1

30px.h2

24px.h3

18px.h4

14px.h5
12px.h6当前字体65%.small的前四个相差6px,h4-h5相差4px,h5-h6相差2px.h*是给内联文本标题的样式作为副标题。.small也可以定义字幕或者定义行内文本字幕样式globaldefaultfont-size:14px;行高:1.42857143;(双字体)颜色:#333;背景:#fff;

默认边距顶部:10px。-weight:300;line-height:1.4;margin-top:10px1.768px以上的屏幕宽度font-size:21px;2.屏幕宽度低于768pxfont-size:16px;内联文本元素标签填充:.2em;background-color:#fcf8e3;color:#000;删除线,删除文本|无用文本text-decoration:line-through;两个标签显示的效果是一样的,只是给搜索引擎看到的,是给用户看的。插入文本|下划线文本text-decoration:underline两个标签的作用是一样的,是给搜索引擎用的,是给用户用的|.small(smalltext)font-size:85%//当前字体的85%是行内文本中当前字体的85%,与中显示不同。(强调和斜体强调)justify.text-left//justifyleft.text-center//justifycenter.text-right//justifyright.text-justify//justify.text-noerap//文本不换行case.text-lowercase//转为lowercase.text-uppercase//转为uppercase.text-capitalize//首字母大写缩写cursor:help;border-bottom:1pxdotted#777;文字装饰:无;//取消浏览器默认样式。首字母缩写词(首字母缩写词)字体大小:90%;文本转换:大写;添加到将小于当前字体。

Quotedefaultleftpadding:10px20px;margin:0020px;font-size:17.5px;border-left:5pxsolid#eee;.blockquote-reverserightpadding-right:15px;padding-left:0;文本对齐:右;border-right:5pxsolid#eee;左边框:0;list.list-unstyled(删除默认列表样式)仅适用于直接
  • .inline-blockinline.display:inline-block;只针对直接
  • .dl-horizo??ntal使
    水平排列1.当屏幕宽度>768px时,dtstyle.dl-horizo??ntaldt{width:180px;小省号)float:left;溢出:隐藏;清除:离开;文本对齐:右;文本溢出:省略号;white-space:nowrap;}dlstyle.dl-horizo??ntaldd{margin-left:180px;}2.当屏幕宽度<768px.dl-horizo??ntaldt,.dl-horizo??ntaldd{width:100%;}本博客帖子首发于我的个人博客,查看更多点击这里