bootstrap基本css样式1 排版知识

最新推荐文章于 2023-04-08 23:57:54 发布

学习急先锋

最新推荐文章于 2023-04-08 23:57:54 发布

阅读量374

点赞数

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/myvanguard/article/details/53026885

版权

bootstrap 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.排版

1.行高h1-h6
2.body默认设置
font-size:14px,line-height:20px;  p默认10px

3.段落突出lead
<p class="lead">...</p>
4.排版尺寸定义
@baseFontSize 和 @baseLineHeight。

5.强调标签small
<p>  <small>This lie print.</small></p>
6.加粗strong
 <strong>rendered as bold text</strong>

7.斜体em
<em>rendered as italicized text</em>
*****注意******
在HTML5中可任意使用<b> 和 <i>。
<b>是为了高亮词或短语而不会赋予重要含义，
<i>主要被用来表示发言、技术术语等。

8.对齐类 左右中
  <p class="text-left">Left aligned text.</p>
 <p class="text-center">Center aligned text.</p>
 <p class="text-right">Right aligned text.</p>

9.强调类 不同的强调生成不同的颜色
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

这里写图片描述

10.缩略语句abbr 比如attribute 缩写为attr
<abbr title="attribute">attr</abbr>
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

11.地址address
<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

12.引用blockquote
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

13.引用选项 分别在左边和右边
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>

<blockquote class="pull-right">
  ...
</blockquote>

14.无序列表
<ul>
  <li>...</li>
</ul>

15.有序列表
<ol>
  <li>...</li>
</ol>

16.无样式列表
<ul class="unstyled">
  <li>...</li>
</ul>

17.行内列表
<ul class="inline">
  <li>...</li>
</ul>

18.列表描述
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

19.水平描述
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

内联文本
You can use the mark tag to <mark>highlight</mark> text.

被删除的文本
<del>This line of text is meant to be treated as deleted text.</del>

无用的文本
<s>This line of text is meant to be treated as no longer accurate.</s>

带下划线的文本
<u>This line of text will render as underlined</u>

小号文本
<small>This line of text is meant to be treated as fine print.</small>

着重
<strong>rendered as bold text</strong>
改变大小写
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>