第五篇Bootstrap 排版

使用bootstrap的排版特性可以创建标题,段落,列表及其它内联元素。

标题:bootstrap中定义了从h1-h6的六种标题样式。

内联子标题:

如果需要向任意一个标题添加一个子标题,只需要加上<small></small>例如:

<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>

<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>

<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>

<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>

<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>

<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>

显示效果如下所示:

HTML 的默认强调标签 <small>(设置文本为父文本大小的 85%)、<strong>(设置文本为更粗的文本)、<em>(设置文本为斜体)。

<small>本行内容是在标签内</small><br> <strong>本行内容是在标签内</strong><br> <em>本行内容是在标签内,并呈现为斜体</em><br> <p class="text-left">向左对齐文本</p> <p class="text-center">居中对齐文本</p> <p class="text-right">向右对齐文本</p> <p class="text-muted">本行内容是减弱的</p> <p class="text-primary">本行内容带有一个 primary class</p> <p class="text-success">本行内容带有一个 success class</p> <p class="text-info">本行内容带有一个 info class</p> <p class="text-warning">本行内容带有一个 warning class</p> <p class="text-danger">本行内容带有一个 danger class</p>

效果如下:

以上所述是小编给大家介绍的第五篇Bootstrap 排版的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2016-06-20

Bootstrap3.0建站教程(一)之bootstrap表单元素排版

1.文字和输入框前后排列: 代码: <div class="row"> <div class="col-lg-12"> <div class="panel panel-default"> <div class="panel-heading"> <h2>条件查找</h2> </div> <div class="panel-body

Bootstrap3学习笔记(二)之排版

在上篇文章给大家介绍了BootStrap3学习笔记(一)之网格系统 对于标题,Bootstrap已经修改了h1--h6的样式,如果需要副标题,还可以在其中使用small标记 <h1>h1. Bootstrap heading <small>Secondary text</small></h1> <h2>h2. Bootstrap heading <small>Secondary text</small></h2>

第一次接触神奇的Bootstrap基础排版

Bootstrap是Twitter推出的一个简单灵活的,基于HTML5和CSS3的用于搭建WEB前端页面的html.css.javascript工具集.拥有友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档,自定义JQuery插件,完整的类库,基于Less等特点.Bootstrap让Web开发更迅速.更简单. 1.Bootstrap下载 官网:http://getbootstrap.com/:新手入门:http://getbootstrap.com/getting-started

需灵活掌握的Bootstrap预定义排版类 你精通吗?

有了Bootstrap前端框架预处理好的排版类,我们从此不必再为每个排版的标签元素写大量的CSS代码了,可以使用 Bootstrap 的排版特性,您可以创建标题.段落.列表及其他内联元素预定义好的样式,排版出很规范的网页. 那我们接下来一起学习下,bootstrap前端框架到底为我们预定义了那些排版的类呢? 第一:Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈,这些字体都是目前所有网页最经常用的字体了.从此

Bootstrap入门书籍之(一)排版

推荐阅读:Bootstrap入门书籍之(零)Bootstrap简介 Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落.列表及其他内联元素. 1. 标题 在Bootstrap中使用标题的方式和常规html一样:从 <h1> 到 <h6> 分别从大到小安排标题元素,只不过在Bootstrap中重新设置了其默认样式,从源码中可以看到有如下共

Bootstrap每天必学之基础排版

本次主要来了解的是排版,这个大部分在HTML的基本标签中也是存在的,所以相对比较简单,为了保证系列的完整性,也顺带复习下,还是记录一下.主要内容如下: 1.标题 2.页面主体 3.强调 4.缩略语 5.地址 6.引用 7.列表 一.标题 Html中的所有标题标签,从<h1>到<h6>均可使用.另外还提供了.h1到.h6的class,为的是给inline属性的文本赋予标题的样式. <div class="container"> <h1 class

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

一.段落 段落是排版中另一个重要元素之一.在Bootstrap中为文本设置了一个全局的文本样式(这里所说的文本是指正文文本): 1.全局文本字号为14px(font-size). 2.行高为1.42857143(line-height),大约是20px(大家看到一串的小数或许会有疑惑,其实他是通过LESS编译器计算出来的,当然Sass也有这样的功能). 3.颜色为深灰色(#333): 二.文字样式 在实际项目中,对于一些重要的文本,希望突出强调的部分都会做另外的样式处理.Bootstrap同样对

第二章之Bootstrap 页面排版样式

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 学习要点: 1.页面排版 本节课我们主要学习一下 Bootstrap 全局 CSS 样式中的排版样式,包括了标题.页面主体.对齐.列表等常规内容. 一.页面排版 Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用. 1.页面主体 Bootstrap 将全局 font-size 设置为 14px,li

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

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

学习使用Bootstrap页面排版样式

Bootstrap之页面排版样式 Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML.CSS.JavaScript 的开源框架.该框架代码简洁.视觉优美,可用于快速.简单地构建基于 PC 及移动端设备的 Web 页面需求. 1. Bootstrap 特点 Bootstrap 非常流行,得益于它非常实用的功能和特点.主要核心功能特点如下: (1). 跨设备.跨浏览器,可以兼容所有现代浏览器,包括比较诟病的 IE7.8. (3). 提供的全面的组件

BootStrap mvcpager分页样式(get请求,刷新页面)

使用方法: 先把mvcpager.dll引用加入mvc项目中. 前台代码 前台: @{ Layout = null; } @using Webdiyer.WebControls.Mvc @model PagedList<string> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <

学习使用bootstrap基本控件(table、form、button)

bootstrap为我们定义了简洁易用的样式,我们只需要很少的样式指定,就可以完成简约优雅的页面展示. 本篇主要介绍以下几个基本控件: 1. table 2. form 3. button 1. 表格(table)依旧使用<table><thead><tbody><tr><th><td>来表现表格.有如下的类来控制table的属性, table样式默认会占满父容器 <div class="container"

Bootstrap页面标题Page Header的实现方法

本文实例为大家分享了Bootstrap页面标题展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>Bootstrap 页面标题(Page Header)</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap.min.css&

ThinkPHP 整合Bootstrap Ajax分页样式

ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $where['name']= array('like','%'.(string)$name.'%'); } $Role=M('Role'); $count= $Role->where($where)->count();// 查询满足要求的总记录数 $Page =new \Think\AjaxPage(

值得学习的bootstrap fileinput文件上传工具

这是我上传的第二个plugin,首先第一点就是因为这个好看,符合bootstrap的界面风格,第二是可以拖拽(虽然我不常用这个功能 但是这样界面看起来就丰满了很多) 最后不得不吐槽这个的回发事件 我百度了很久才找到,CSDN上面也问了,不知道是自己百度的方式不正确还是别的什么原因..好吧 地址 http://plugins.krajee.com/file-input https://github.com/kartik-v/bootstrap-fileinput 效果图 这里以我一个项目的新建产品

Bootstrap的class样式小结

基础class .code来显示单行内联代码 .pre来显示多行块代码 .kbd来显示用户输入代码 .pre-scrollable高度超出340px,就会在Y轴出现滚动条 表格class .table基础表格margin-bottom:20px,在thead底部2px的浅灰实线,每个单元格顶部1px的浅灰实线 .table-striped:斑马线表格,隔行有一个浅灰色的背景色 .table-bordered:带边框的表格,所有单元格有1px的边框 .table-hover:鼠标悬停在表格的行上,