• 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 标题,bootstrap标题居中,bootstrap 标题样式,bootstrap 标题分割线,bootstrap使用方法等相关知识,傻籽 希望在学习及工作中可以帮助到您

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

<!--Bootstrap中的标题--> 
<h1>Bootstrap标题一</h1>
<h2>Bootstrap标题二</h2>
<h3>Bootstrap标题三</h3>
<h4>Bootstrap标题四</h4>
<h5>Bootstrap标题五</h5>
<h6>Bootstrap标题六</h6>

<!--Bootstrap中让非标题元素和标题使用相同的样式-->
<div class="h1">Bootstrap标题一</div>
<div class="h2">Bootstrap标题二</div>
<div class="h3">Bootstrap标题三</div>
<div class="h4">Bootstrap标题四</div>
<div class="h5">Bootstrap标题五</div>
<div class="h6">Bootstrap标题六</div>

</div>

效果如下:

除此之外,我们在Web的制作中,常常会碰到在一个标题后面紧跟着一行小的副标题。在Bootstrap中他也考虑了这种排版效果,使用了<small>标签来制作副标题。这个副标题具有其自己的一些独特样式:

1、行高都是1,而且font-weight设置了normal变成了常规效果(不加粗),同时颜色被设置为灰色(#999)。

2、由于<small>内的文本字体在h1~h3内,其大小都设置为当前字号的65%;而在h4~h6内的字号都设置为当前字号的75%;

<!--Bootstrap中使用了<small>标签来制作副标题-->
<h1>Bootstrap标题一<small>我是副标题</small></h1>
<h2>Bootstrap标题二<small>我是副标题</small></h2>
<h3>Bootstrap标题三<small>我是副标题</small></h3>
<h4>Bootstrap标题四<small>我是副标题</small></h4>
<h5>Bootstrap标题五<small>我是副标题</small></h5> 
<h6>Bootstrap标题六<small>我是副标题</small></h6>
</div>

效果如下:

 

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

以上就是针对Bootstrap标题排版的详细介绍,之后还有更多内容会不断更新,希望大家继续关注。

</div>

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

  • 全面解析Bootstrap排版使用方法(标题)

相关文章

  • 2017-05-22Bootstrap HTML编码规范
  • 2017-05-30学习Bootstrap组件之下拉菜单
  • 2017-09-05bootstrap 自定义alert 和 confirm
  • 2017-05-30基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
  • 2017-05-30Bootstrap每天必学之导航组件
  • 2017-05-22Bootstrap 过渡效果(Transition)插件
  • 2017-05-30JS组件Bootstrap Table表格行拖拽效果实现代码
  • 2017-05-30Bootstrap导航栏各元素操作方法(表单、按钮、文本)
  • 2017-05-30Bootstrap每天必学之栅格系统(布局)
  • 2017-05-30Bootstrap图片轮播组件使用实例解析

文章分类

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

最近更新的内容

    • Bootstrap框架实现广告轮播效果
    • 基于bootstrap3和jquery的分页插件
    • Bootstrap 中下拉菜单修改成鼠标悬停直接显示 原创
    • 学习使用bootstrap基本控件(table、form、button)
    • Bootstrap入门书籍之(五)导航条、分页导航
    • Bootstrap每天必学之导航组件
    • Bootstrap教程JS插件弹出框学习笔记分享
    • 学习Bootstrap组件之下拉菜单
    • Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
    • Bootstrap轮播插件简单使用方法介绍

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

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