• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >bootstrap > 全面解析Bootstrap排版使用方法(文字样式)

全面解析Bootstrap排版使用方法(文字样式)

作者:傻籽 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含bootstrap table样式,bootstrap select样式,bootstrap表格样式,bootstrap按钮样式,bootstrap input样式等相关知识,傻籽 希望在学习及工作中可以帮助到您

一、段落

  段落是排版中另一个重要元素之一。在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>

</div>

效果如下:

 四、文本对齐

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

  ☑  左对齐,取值left

  ☑  居中对齐,取值center

  ☑  右对齐,取值right

  ☑  两端对齐,取值justify

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

  ☑   .text-left:左对齐

  ☑   .text-center:居中对齐

  ☑   .text-right:右对齐

  ☑   .text-justify:两端对齐

有了文字样式,使得排版效果更清晰简洁,希望大家在自己的作品中多使用一些简单大方的文字样式,使作品脱颖而出,更加具有吸引力。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

本文系列教程整理到:Bootstrap基础教程 专题中,欢迎点击学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

</div>

您可能想查找下面的文章:

  • 关于BootstrapTable的使用
  • Bootstrap table分页问题汇总
  • BootStrap中的table实现数据填充与分页应用小结
  • 解决JS组件bootstrap table分页实现过程中遇到的问题
  • bootstrap table 服务器端分页例子分享
  • JS组件Bootstrap Table表格多行拖拽效果实现代码
  • JS组件Bootstrap Table表格行拖拽效果实现代码
  • JS组件Bootstrap Table使用实例分享
  • Bootstrap table分页问题汇总
  • JS组件Bootstrap Table布局详解

相关文章

  • 2017-05-30基于Bootstrap实现图片轮播效果
  • 2017-05-30Bootstrap多级导航栏(级联导航)的实现代码
  • 2017-05-30基于BootstrapValidator的Form表单验证(24)
  • 2017-05-22Bootstrap 提示工具(Tooltip)插件
  • 2017-05-30学习Bootstrap组件之下拉菜单
  • 2017-05-30Angular.js与Bootstrap相结合实现手风琴菜单代码
  • 2017-05-30JS组件Bootstrap实现弹出框效果代码
  • 2017-05-30JSP基于Bootstrap分页显示实例解析
  • 2017-05-30Bootstrap入门书籍之(五)导航条、分页导航
  • 2017-05-30Bootstrap导航栏各元素操作方法(表单、按钮、文本)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Bootstrap每天必学之导航
    • Bootstrap模块dropdown实现下拉框响应
    • 全面解析Bootstrap排版使用方法(文字样式)
    • JS组件Bootstrap ContextMenu右键菜单使用方法
    • JS组件Bootstrap实现下拉菜单效果代码
    • bootstrap实现每隔5秒自动轮播效果
    • Bootstrap每天必学之下拉菜单
    • Bootstrap每天必学之弹出框(Popover)插件
    • Bootstrap入门书籍之(四)菜单、按钮及导航
    • Bootstrap每天必学之导航条(二)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有