BootStrap入门学习笔记(三)

BootStrap排版

BootStrap默认定义了标题、段落、列表及其他内联元素的特性。

  • 内联子标题:如果需要向任何标题添加一个内联子标题,只需要简单地在元素两旁添加<small>,或者添加.samll的class类,这样子就能得到一个字号更小、颜色更浅的文本字体。
  • 引导主体副本:为了给段落添加强调文本,则可以添加class="lead",这样将得到更大更粗、行高更高的文本。
  • 强调:HTML的默认强调标签<small><strong><em>。BootStrap还提供了一些用于强调文本的类:
类名作用
text-left向左对齐文本
text-center居中对齐文本
text-right向右对齐文本
text-muted本行内容是减弱的
  • 缩写:BootStrap定义<abbr>元素的样式为显示在文本底部的一条虚线边框,当鼠标悬停在上面的时候会显示完整的文本(对应<abbr>元素的title属性)。
  • 地址:使用<address>标签,可以在网页上显示联系信息。由于<address>默认为display:block,所以需要使用<br>标签来为封闭的地址文本换行。
  • 引用:<blockquote>。可以选择添加一个<small>标签来标识引用的来源,使用class="pull-right"向右对齐引用。
  • 列表:BootStrap支持有序列表、无序列表和定义列表。
    这里记录记录一下无序列表的用法:无序列表是指没有特定顺序的列表,是以传统风格的着重号开头的列表。如果不需要这些着重号,可以使用class="list-unstyled"来移除。如果想让列表呈现一行显示,可以通过使用class="list-inline"来更改样式。
    再来简单介绍一些定义列表:在这种类型的列表中,每个列表项可以包含<dt><dd>元素。<dt>代表定义术语,<dd><dt>的描述。其中class="dl-horizontal"可以让<dl>内的短语及其描述排成一行。

BootStrap代码显示

  • <code>标签显示代码,此种方式常用于内联显示代码。
  • <pre>,此种方式适用于在代码需要被显示为一个独立的块元素时或者代码有多行时。可以使用class="pre-scrollable"给代码块添加滚动条。
  • 注意:在使用<code><pre>这两个标签时,开始和结束标签使用了Unicode变体:<>
    -按键提示:<kbd> 。举例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">      <title>Document</title>
</head>
<body>    
<p>复制的快捷键是:<kbd>CTRL+C</kbd></p>
</body>
</html>

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值