Bootstrap 段落

2018-03-04 18:02 更新

Bootstrap的全局默认字体大小为14px,行高为1.428。这适用于<body>和所有段落。此外,<p>(段落)接收一半的计算线高的底部边距(默认为10像素)。

<!DOCTYPE HTML>
<html> 
<head> 
<link href="//www.w3cschool.cn/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin:20px;">

  <p>This is a paragraph.</p>
        
</body>
</html>

主要段落

通过添加 .lead 使一个段落突出。

<!DOCTYPE HTML>
<html> 
<head> 
<link href="//www.w3cschool.cn/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin:20px;">
  
  <p class="lead">This is a test.</p>
        
</body>
</html>

段落对齐

我们可以使用以下三个类来控制段落的文本对齐。

<!DOCTYPE HTML>
<html> 
<head> 
<link href="//www.w3cschool.cn/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin:20px;">

    <p class="text-left">Left aligned text.</p>
    <p class="text-center">Center aligned text.</p>
    <p class="text-right">Right aligned text.</p>
        
</body>
</html>

有意义的段落

通过颜色与一些重要实用的类传递意义。

<!DOCTYPE HTML>
<html> 
<head> 
<link href="//www.w3cschool.cn/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin:20px;">

    <p class="text-muted">text-muted</p>
    <p class="text-primary">text-primary</p>
    <p class="text-warning">text-warning</p>
    <p class="text-danger">text-danger</p>
    <p class="text-success">text-success</p>
    <p class="text-info">text-info</p>
        
</body>
</html>
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号