您好,欢迎来到伴沃教育。
搜索
您的当前位置:首页Bootstrap样式-版式

Bootstrap样式-版式

来源:伴沃教育

标题

1、 <h1>标题</h1> ~<h6>标题</h6>
2、<div class="h1">标题</div>

3、<h1><small>小标题</small></h1>    # 字题缩小,颜色置灰,123 >65%, 456 >75%
4、<p class="small"></p>    >85> 

文本

1、<p>空山新雨后</p>
2、<p class="lead">天气晚来秋</p>    # lead段落突出,表现为文本 字体\字距\行高 被放大

强调

多用于<p>标签,若用于链接,鼠标指针经过,会变深

# HTML强调如下:
<em></em>斜体,侧重于语义
 <b></b>粗体,侧重表现视觉
 <strong></strong> 粗体,侧重语义

#Bootstrap3.0,强调类,颜色进行区分:
.text-mind: 提示,浅灰色
.text-primary: 主要,蓝色
.text-success:成功, 浅绿色
.text-info:通知, 浅蓝色
.text-warning:警告,浅黄色
.text-danger:危险,浅红色

对齐

.text-left
.text-right
.text-center

缩略语

# 鼠标指针悬停在缩略语,显示提示性文本
<p><abbr tittle="Cascading Style Sheets">CSS</abbr>
# .initialism 设计字体大小缩小10%, 缩略词被缩小,同时全部大写显示
<p><abbr class="initialism" tittle="Cascading Style Sheets">CSS</abbr>

地址

# 定义地址、签名、文档作者身份,电子邮件
# 底部外边距为20px,清理默认字体样式,行高1.4左右。
<address></address>

引用

# 左侧添加灰色粗边框线
<blockquote 
  <p>百度内容</p> 
</blockquote>

# 用small标签注明引用来源,来源名称放在<cite>
<blockquote class="pull-right">    # 引用内容居右显示
  <p>百度内容</p> 
  <small>来源于
    <cite 
      <a  target="_blank"></a>
    </cite>
  </small>
</blockquote>

列表

# HMTL列表
# 默认样式,显现缩进显示,带有列表项目符号
<ul>...</ul>  标识无序列表
<ol>...</ol>  标识有序列表
<li>...</li>  标识列表项目

# Bootstrap3
# .list-unstyled 清除默认样式,.list-inline 一行内显示
<ul class="list-unstyled list-inline">
  <li>...</li>
</ul>

# 定义列表
<dl></dl>  标识定义列表
<dt></dt>  标识词条
<dd></dd>  标识解释

# .dl-horizontal 使dt与dd一行内显示,text-overflow过长列表垂直显示
 <dl class="dl-horizontal text-overflow">
  <dt></dt>
  <dd></dd>
</dl>

代码

# 行内代码
<code></code>

# 代码块
# pre-scrollable 最高350px,带有Y轴流动条。
<pre class="pre-scrollable"></pre>

Copyright © 2019- bangwoyixia.com 版权所有 湘ICP备2023022004号-2

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务