Bootstrap学习笔记--常用标签和类模板

h标签：bootstrap中的h标签被改写了比原标签字体要细

<h1>我是标题1 h1</h1>
<h2>我是标题2 h2</h2>
<h3>我是标题3 h3</h3>
<h4>我是标题4 h4</h4>
<h5>我是标题5 h5</h5>
<h6>我是标题6 h6</h6>

这里写图片描述

类 class=”lead”，这将得到更大更粗、行高更高的文本一般运用于p标签

<small>（设置文本为父文本大小的 85%）、>strong>（设置文本为更粗的文本）、 <em>（设置文本为斜体）。

<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内，并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>

显示：
这里写图片描述

文字颜色：

<p class="text-muted">This text is muted.</p>
  <p class="text-primary">This text is important.</p>
  <p class="text-success">This text indicates success.</p>
  <p class="text-info">This text represents some information.</p>
  <p class="text-warning">This text represents a warning.</p>
  <p class="text-danger">This text represents danger.</p>

显示：
这里写图片描述

背景颜色：

    <p class="bg-primary">This text is important.</p>
  <p class="bg-success">This text indicates success.</p>
  <p class="bg-info">This text represents some information.</p>
  <p class="bg-warning">This text represents a warning.</p>
  <p class="bg-danger">This text represents danger.</p>

显示：
这里写图片描述

缩写功能：

HTML 元素提供了用于缩写的标记，比如 WWW 或 HTTP。Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 <abbr> title 属性添加了文本）。为了得到一个更小字体的文本，请添加 .initialism 到 <abbr>。

<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>

显示：
WWW
RSS

地址（Address）
使用 <address> 标签，您可以在网页上显示联系信息。由于 <address> 默认为 display:block;，您需要使用 <br> 标签来为封闭的地址文本添加换行。

列表中：

    添加类：ul class="list-unstyled" 取消 列表效果  意思就是一行前面  
    没有空格
    <ul class="list-inline">     列表显示在一行
    <dl class="dl-horizontal">   标题下面的文字显示在右边了

blockquote是引用：

<blockquote class="pull-right">是向右对齐的引用

<code>：
    <code></code> 红色标记一行代码  <code>我是code</code>

显示：我是code

 <mark>highlight</mark>

显示：
highlight

&lt;和&gt：
&lt;代表<  &gt;代表>           &lt;header&gt;

显示：<header>

<pre>：多行代码 保留空格和换行符
<pre>
大家 好
我是pre
</pre>

显示：

大家 好
我是pre

<pre class="pre-scrollable">   //有滚轮
大家 好
我是pre
</pre>

显示：

 

    大家 好 

    我是pre

var：
var表示变量：
<var>x</var>=<var>y</var>+1;

显示：

x=y+1;

<kbd>：按键提示
<kbd>ctrl + p</kbd>

显示：

使用 ctrl + p 来打开打印窗口。

<samp>：显示电脑打印内容
<p>使用 samp 元素包含电脑输出的内容:</p>
<p><samp>This text is output from a computer program....</samp></p>

显示：

使用 samp 元素包含电脑输出的内容:

This text is output from a computer program….

Bootstrap学习笔记--常用标签和类模板

猜你喜欢