bootstrap排版样式

程序员文章站 2022-05-29 13:14:30

...

一．页面排版

Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。

1.页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 行高设置为 1.428(即20px)；<p>段落元素被设置等于 1/2 行高(即 10px)；颜色被设置为#333。

//创建包含段落突出的文本

<p>Bootstrap 框架</p>

<p class="lead">Bootstrap 框架</p>

<p>Bootstrap 框架</p>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>排版样式</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.js"></script>
</head>
<body>
   <!-- Bootstrop框架设定的全局字体 font-size:14px  line-height:1.42857(行高20px) color:#333-->

    <p>Bootstrop 框架</p>
    <p class="lead">Bootstrop 框架</p>
    <p>Bootstrop 框架</p>
    <p>Bootstrop 框架</p>

</body>

</html>

结果：

2.标题

//从 h1 到 h6
<h1>Bootstrap 框架</h1> //36px
<h2>Bootstrap 框架</h2> //30px
<h3>Bootstrap 框架</h3> //24px
<h4>Bootstrap 框架</h4> //18px
<h5>Bootstrap 框架</h5> //14px
<h6>Bootstrap 框架</h6> //12px

我们从 Firebug 查看元素了解到， Bootstrap 分别对 h1 ~ h6 进行了 CSS 样式的重构，并且还支持普通内联元素定义 class=(.h1 ~ h6)来实现相同的功能。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>排版样式</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.js"></script>
</head>
<body>

   <h1>Bootstrop 框架</h1>
   <h2>Bootstrop 框架</h2>
   <h3>Bootstrop 框架</h3>
   <h4>Bootstrop 框架</h4>
   <h5>Bootstrop 框架</h5>
   <h6>Bootstrop 框架</h6>

</body>

</html>

结果：

bootstrap排版样式

//内联元素使用标题字体

<span class="h1">Bootstrap</span>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>排版样式</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.js"></script>
</head>
<body>

    <span class="h1">Bootstrap</span>

</body>

</html>

结果：

bootstrap排版样式

注：通过 Firebug 查看元素还看到，字体颜色、字体样式、行高均被固定了，从而保证了统一性，而原生的会根据系统内置的首选字体决定，颜色是最黑色。在 h1 ~ h6 元素之间，还可以嵌入一个 small 元素作为副标题，
//在标题元素内插入 small 元素
<h1>Bootstrap 框架 <small>Bootstrap 小标题</small></h1>
<h2>Bootstrap 框架 <small>Bootstrap 小标题</small></h2>
<h3>Bootstrap 框架 <small>Bootstrap 小标题</small></h3>
<h4>Bootstrap 框架 <small>Bootstrap 小标题</small></h4>
<h5>Bootstrap 框架 <small>Bootstrap 小标题</small></h5>
<h6>Bootstrap 框架 <small>Bootstrap 小标题</small></h6>

通过 Firebug 查看，我们发现 h1 ~ h3 下 small 元素的大小只占父元素的 65%，那么通过计算(查看 Firebug 计算后的样式)， h1 ~ h3 下的 small 为 23.4px、 19.5px、 15.6px；h4 ~ h6 下 small 元素的大小只占父元素的 75% ,分别为：13.5px、10.5px、9px。在 h1 ~ h6 下的 small 样式也进行了改变，颜色变成淡灰色：#777，行高为 1，粗度为 400。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>排版样式</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.js"></script>
</head>
<body>

    <!--h中的small-->
   <h1>Bootstrop <small>框架</small></h1>
   <h2>Bootstrop <small>框架</small></h2>
   <h3>Bootstrop <small>框架</small></h3>
   <h4>Bootstrop <small>框架</small></h4>
   <h5>Bootstrop <small>框架</small></h5>
   <h6>Bootstrop <small>框架</small></h6>

</body>

</html>

结果：

3.内联文本元素

//添加标记，<mark>元素或.mark 类

<p>Bootstrap<mark>框架</mark></p>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>排版样式</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.js"></script>
</head>
<body>

       <!--mark标记-->
   You can use the mark tag to <mark>highlight</mark> text.

</body>

</html>

结果：

bootstrap排版样式

//各种加线条的文本
<del>Bootstrap 框架</del> //删除的文本
<s>Bootstrap 框架</s> //无用的文本
<ins>Bootstrap 框架</ins> //插入的文本

<u>Bootstrap 框架</u> //效果同上，下划线文本

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>排版样式</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.js"></script>
</head>
<body>

   <del>Bootstrap 框架</del>         </br>
   <s>Bootstrap 框架</s>             </br>
   <ins>Bootstrap 框架</ins> 	     </br>
   <u>Bootstrap 框架</u> 
</body>

</html>

结果：

bootstrap排版样式

//各种强调的文本
<small>Bootstrap 框架</small> //标准字号的 85%
<strong>Bootstrap 框架</strong> //加粗 700

<em>Bootstrap 框架</em> //倾斜

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>排版样式</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.js"></script>
</head>
<body>

   <small>Bootstrap 框架</small> </br>
   <strong>Bootstrap 框架</strong> </br>
   <em>Bootstrap 框架</em> 
</body>

</html>

结果：

bootstrap排版样式

4.对齐

//设置文本对齐
<p class="text-left">Bootstrap 框架</p> //居左
<p class="text-center">Bootstrap 框架</p> //居中
<p class="text-right">Bootstrap 框架</p> //居右
<p class="text-justify">Bootstrap 框架</p> //两端对齐，支持度不佳
<p class="text-nowrap">Bootstrap 框架</p> //不换行

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>排版样式</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.js"></script>
</head>
<body>
   <!--文本对齐方式-->
   <p class="text-left">Bootstrop</p>
   <p class="text-center">Bootstrop</p>
   <p class="text-right">Bootstrop</p>
   <div class="text-right">Bootstrop</div>
   <p class="text-nowrap" style="border: 1px solid red;width: 50px">Bootstrop框架</p> 
</body>

</html>

结果：

bootstrap排版样式

5.大小写

//设置英文文本大小写
<p class="text-lowercase">Bootstrap 框架</p> //小写
<p class="text-uppercase">Bootstrap 框架</p> //大写
<p class="text-capitalize">Bootstrap 框架</p>//首字母大写

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>排版样式</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.js"></script>
</head>
<body>
   <p class="text-lowercase">Bootstrap 框架</p> </br>
   <p class="text-uppercase">Bootstrap 框架</p>   </br>
   <p class="text-capitalize">Bootstrap 框架</p> 
</body>

</html>

结果：

bootstrap排版样式

6.缩略语

//缩略语

Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>排版样式</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.js"></script>
</head>
<body>
    <!--缩略语-->
   <abbr title="HyperText Markup Language" class="initialism">HTML</abbr> 
</body>

</html>

7.地址文本

//设置地址，去掉了倾斜，设置了行高，底部 20px
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>排版样式</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.js"></script>
</head>
<body>
   <address>
       <strong>Twitter, Inc.</strong><br>
       795 Folsom Ave, Suite 600<br>
       San Francisco, CA 94107<br>
       <abbr title="Phone">P:</abbr> (123) 456-7890
   </address>

   <address>
       <strong>Full Name</strong><br>
       <a href="mailto:#">aaa@qq.com</a>
   </address>
 
</body>

</html>

结果：

bootstrap排版样式

8.引用文本

//默认样式引用，增加了做边线，设定了字体大小和内外边距
<blockquote>
Bootstrap 框架
</blockquote>
//反向
<blockquote class="blockquote-reverse ">
Bootstrap 框架
</blockquote>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>排版样式</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.js"></script>
</head>
<body>
   <blockquote>
       引文1
   </blockquote>

   <blockquote class="blockquote-reverse">
       引文1
   </blockquote>

   <blockquote class="pull-left">
       引文2
   </blockquote>

   <blockquote class="pull-right">
       引文2
   </blockquote>
</body>

</html>

结果：

bootstrap排版样式

9.列表排版

//移除默认样式
<ul class="list-unstyled">
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
</ul>
//设置成内联
<ul class="list-inline">
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
</ul>
//水平排列描述列表
<dl class="dl-horizontal">
<dt>Bootstrap</dt>
<dd>Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。</dd></dl>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>排版样式</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.js"></script>
</head>
<body>
    <!--  原始列表样式-->
   <ul>
       <li>Bootstrop 框架</li>
       <li>Bootstrop 框架</li>
       <li>Bootstrop 框架</li>
       <li>Bootstrop 框架</li>
       <li>Bootstrop 框架</li>
   </ul>
   <!--   清除默认样式-->
   <ul class="list-unstyled">
       <li>Bootstrop 框架</li>
       <li>Bootstrop 框架</li>
       <li>Bootstrop 框架</li>
       <li>Bootstrop 框架</li>
       <li>Bootstrop 框架</li>
   </ul>
    <!--   清除默认样式并设置成内联-->
   <ul class="list-unstyled list-inline">
       <li>Bootstrop 框架</li>
       <li>Bootstrop 框架</li>
       <li>Bootstrop 框架</li>
       <li>Bootstrop 框架</li>
       <li>Bootstrop 框架</li>
   </ul>
    <!--  水平排列描述列表-->
   <dl class="dl-horizontal ">
       <dt>标题</dt>
       <dd>这是内容</dd>
   </dl>
</body>

</html>

结果：

bootstrap排版样式

10.代码

//内联代码
<code><section></code>
//用户输入
press <kbd>ctrl + ,</kbd>
//代码块
<pre><p>Please input...</p></pre>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>排版样式</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.js"></script>
</head>
<body>
   <!--内联代码-->
   For example, <code><section></code> should be wrapped as inline.         <br><br>
   <!--用户输入-->
   pree <kbd>ctrl+,</kbd>                                                         <br><br>
   <!--代码块-->
   <pre> please input........</pre>
</body>

</html>

结果：

bootstrap排版样式

Bootstrap 还列举了<var>表示标记变量，<samp>表示程序输出，只不过没有重新复
写 CSS

相关标签： bootstrap bootstrap排版样式 bootstrap页面排版引用文本 bootstrap对齐方式

上一篇： CSS - 文本属性

下一篇： css overflow / float [第九天]

bootstrap排版样式

一．页面排版

1.页面主体

2.标题

结果：

3.内联文本元素

4.对齐

5.大小写

6.缩略语

7.地址文本

8.引用文本

9.列表排版

10.代码

在Word2010文档中为自选图形应用样式

在Word2010文档应用“快速样式”

CSS3制作彩色进度条样式的代码示例分享

基于css3实现漂亮便签样式

css3 按钮样式简单可扩展创建

利用css3制作3D样式按钮实现代码

利用css3制作3D样式按钮实现代码

Linux开机启动过程详解(bootstrap)

微信小程序基础知识css样式media标签

bootstrap table操作技巧分享

bootstrap排版样式

一．页面排版

1.页面主体

2.标题

结果：

3.内联文本元素

4.对齐

5.大小写

6.缩略语

7.地址文本

8.引用文本

9.列表排版

10.代码

在Word2010文档中为自选图形应用样式

在Word2010文档应用“快速样式”

CSS3制作彩色进度条样式的代码示例分享

基于css3实现漂亮便签样式

css3 按钮样式简单可扩展创建

利用css3制作3D样式按钮实现代码

利用css3制作3D样式按钮实现代码

Linux开机启动过程详解(bootstrap)

微信小程序 基础知识css样式media标签

bootstrap table操作技巧分享

微信小程序基础知识css样式media标签