Bootstrap_排版_文字样式

一、段落

  段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式(这里所说的文本是指正文文本):

1、全局文本字号为14px(font-size)

2、行高为1.42857143(line-height),大约是20px(大家看到一串的小数或许会有疑惑,其实他是通过LESS编译器计算出来的,当然Sass也有这样的功能)。

3、颜色为深灰色(#333)

二、文字样式

  在实际项目中,对于一些重要的文本,希望突出强调的部分都会做另外的样式处理。Bootstrap同样对这部分做了一些轻量级的处理。

如果想让一个段落p突出显示,可以通过添加类名“.lead”实现,其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理。

1.粗体

  在Bootstrap中,可以使用<b><strong>标签让文本直接加粗。

2.斜体

  在Bootstrap中,可以使用<em><i>来实现文本斜体。

三、强调类

  • .text-muted:提示,使用浅灰色(#999)
  • .text-primary:主要,使用蓝色(#428bca)
  • .text-success:成功,使用浅绿色(#3c763d)
  • .text-info:通知信息,使用浅蓝色(#31708f)
  • .text-warning:警告,使用黄色(#8a6d3b)
  • .text-danger:危险,使用褐色(#a94442)
<div class="text-muted">.text-muted 效果</div>
<div class="text-primary">.text-primary效果</div>
<div class="text-success">.text-success效果</div>
<div class="text-info">.text-info效果</div>
<div class="text-warning">.text-warning效果</div>
<div class="text-danger">.text-danger效果</div>

效果如下:

四、文本对齐

  在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格:

?  左对齐,取值left

?  居中对齐,取值center

?  右对齐,取值right

?  两端对齐,取值justify

  为了简化操作,方便使用,Bootstrap通过定义四个类名来控制文本的对齐风格:

?   .text-left:左对齐

?   .text-center:居中对齐

?   .text-right:右对齐

?   .text-justify:两端对齐

时间: 2024-10-13 12:37:55

Bootstrap_排版_文字样式的相关文章

Bootstrap_排版_标题

Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样,具体定义的规则可以如下表所示: <!--Bootstrap中的标题--> <h1>Bootstrap标题一</h1> <h2>Bootstrap标题二</h2> <h3>Bootstrap标题三</h3> <h4>Bootst

Bootstrap_排版_表格

一.基础表格 <table class="table"> <thead> <tr> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> </thead> <tbody> <tr> <td>表格单元格</td> <td>表格单元格</td> &

Bootstrap_排版_代码

不管使用哪种代码风格,在代码中碰到小于号(<)要使用硬编码“<”来替代,大于号(>)使用“>”来替代 一.单行内联代码 <code>:一般是针对于单个单词或单个句子的代码 <code><code></code> <code><pre></code> <code><kbd></code> 二.多行块代码 <pre>:一般是针对于多行代码(也就是成块的代码

5.1 CSS文字样式

文字和图像是传达信息的基础,是网页设计永远不可缺少的元素,各种各样的文字和图像效果在整个互联网中无处不在.本章从基础的文字设置开始,详细讲解CSS设置各种文字效果的方法,然后再进一步讲解关于图像的几个重要的应用领域. 使用过任何文字处理软件的用户对文字排版都不会陌生.例如在Word软件中可以对文字的字体.大小和颜色等各种属性进行设置.CSS同样可以对HTML页面中的文字进行全面的设置. 一.准备网页 为了便于讲解和实践,首先准备一个非常简单的页面,HTML代码如下. <!DOCTYPE html

炫光效果PS文字样式

你是一个炫酷特效爱好者吗?小编将这套炫光效果PS文字样式推荐给大家,包含10种不同的文字样式效果,您可以将这个Photoshop样式应用于任何字体,形状,插图,徽标,排版,邀请函,名片,墙艺术,贺卡,演示文稿等等. 炫光效果PS文字样式介绍 高品质和高级效果可以为您的所有文本产生更完美和有趣的效果,所有风格效果只需点击一下即可完成.特征:- 使用方便- 使用任何字体- 100可扩展- 包括耀斑- 点击一下- 300DPI包含文件- PSD文件- ASL文件 原文地址:https://www.cn

2015-09-21CSS:引入方式、选择器、注释、文字样式

1.HTML中引入CSS的方式 HTML中引入CSS的样式有4种:行内式.内嵌式.导入式和链接式. ⑴行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. ⑵嵌入式 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中.格式如下: <head> <style type="text/css"> 这里写css样式 &l

CAD看图软件中文字样式修改的方法

工程师在计算机上用CAD进行设计工作,CAD绘图时常会用到文字,在CAD文件编辑时会添加单行文字和多行文字等等.当我们想要编辑修改文字样式的时候,该怎么办呢?这里教CAD看图软件修改文件样式的步骤. 第一步,打开浏览器搜索迅捷CAD编辑器http://cad.xjpdf.com/,找到软件的下载资源,按照步骤下载安装迅捷CAD编辑器,软件安装完成后,请点击打开软件进入操作界面. 第二步,在软件操作界面中,点击"文件",在文件列表中,点击"打开"按钮,接着在弹出的对话

纯css3艺术文字样式效果代码

效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text_effect.htm 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>超炫CSS3文字特效集锦DEMO演示 - 何问起</title>

自定义ActionBar标题与菜单中的文字样式

自定义标题文字样式 标题样式是ActionBar样式的一部分,所以要先定义ActionBar的样式 <style name="AppTheme" parent="AppBaseTheme"> <item name="android:actionBarStyle">@style/CustomActionBar</item> </style> 然后在ActionBar的样式中通过android:titl