Bootstrap 段落

2018-03-04 18:02 更新

Bootstrap的全局默認(rèn)字體大小為14px，行高為1.428。這適用于<body>和所有段落。此外，<p>（段落）接收一半的計算線高的底部邊距（默認(rèn)為10像素）。

<!DOCTYPE HTML>
<html> 
<head> 
<link href="//www.o2fo.com/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.o2fo.com/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.o2fo.com/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.o2fo.com/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>
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號