bootstrap 文本处理
image.png
head
<!DOCTYPE html>
<html>
<head>
<title>菜鸟教程(runoob.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"> <h2>排版</h2> <p>这是一个普通的段落。</p> <p class="lead">这是个文字突出的段落。</p> <p>这是一个普通的段落。</p> </div>
</body> </html>
small
image.png
<!DOCTYPE html>
<html>
<head>
<title>菜鸟教程(runoob.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"> <h2>排版</h2> <p>这是一个普通的段落。</p> <p class="small">这是个文字更小。</p> <p>这是一个普通的段落。</p> </div>
</body> </html>
image.png
对齐 自动换行
<!DOCTYPE html>
<html>
<head>
<title>菜鸟教程(runoob.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"> <h2>排版</h2> <p class="text-left">左对齐文本</p> <p class="text-right">右对齐文本</p> <p class="text-center">居中对齐文本</p> <p class="text-justify">对齐文本。该段落会根据屏幕的大小对超出屏幕的文字进行换行</p> <p class="text-nowrap">该段落不会根据屏幕的大小对超出屏幕的文字进行换行。</p> <p><strong>提示:</strong> 尝试重置浏览器大写查看 “text-justify” 和 “text-nowrap” 段落的效果。</p> </div>
</body> </html>
文本大小写：.text-lowercase .text-uppercase .text-capitalize .pre-scrollable 设定pre可滚动
image.png
<!DOCTYPE html>
<html>
<head>
<title>菜鸟教程(runoob.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"> <h2>排版</h2> <p>设置 pre 元素可滚动：</p> <pre class="pre-scrollable"> 内容可滚动 Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks. Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks. </pre> </div>
</body> </html>
腾讯云开发者
