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" rel="external nofollow" >
</head> 

<body>
<div class="jumbotron">
<div class="container">
 <div class="page-header">
 <h1>页面标题
  <small>子标题</small>
 </h1>
 </div>
 <p>Bootstrap 页面标题(Page Header.Bootstrap 页面标题(Page Header).Bootstrap 页面标题(Page Header).Bootstrap 页面标题(Page Header).</p>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
 </body>
</html> 

如需使用页面标题(Page Header),请把标题放置在带有 class .page-header 的 <div> 中,效果图:

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

时间: 2017-03-21

BootStrap 标题设置跨行无效的解决方法

最近在使用BootStrap的表格做一个报表界面(不需要报表的功能,只需要预览并且行列定好无需根据数据量变化,如有更好的框架欢迎推荐.),发现标题设置跨行属性rowspan无效.html如下: <table class="table table-bordered"> <thead> <th colspan="2" rowspan="2">功能分类</th> <th>第二列</th&

Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码

1.Bootstrap弹出框示例 <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">点我弹出/隐藏弹出框&

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

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

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

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

全面解析Bootstrap表单使用方法(表单样式)

一.基础表单 <form > <div class="form-group"> <label>邮箱:</label> <input type="email" class="form-control" placeholder="请输入您的邮箱地址"> </div> <div class="form-group"> <la

java简单解析xls文件的方法示例【读取和写入】

本文实例讲述了java简单解析xls文件的方法.分享给大家供大家参考,具体如下: 读取: import java.io.*; import jxl.*; import jxl.write.*; import jxl.format.*; class Aa{ public static void main(String args[]) { try{ Workbook workbook = null; try { workbook = Workbook.getWorkbook(new File("d:

第五篇Bootstrap 排版

使用bootstrap的排版特性可以创建标题,段落,列表及其它内联元素. 标题:bootstrap中定义了从h1-h6的六种标题样式. 内联子标题: 如果需要向任意一个标题添加一个子标题,只需要加上<small></small>例如: <h1>我是标题1 h1. <small>我是副标题1 h1</small></h1> <h2>我是标题2 h2. <small>我是副标题2 h2</small>&

Bootstrap面板使用方法

面板样式是在很多种情况下都可能会使用到的样式之一,例如博客的侧边栏.企业网站的公告栏.栏目列表等. 面板样式除了内容之外,还有一个面板头部可以添加标题,让我们通过这篇文章看看Bootstrap面板样式的使用方法. Bootstrap面板基本样式 直接调用面板样式也非常容易,只需要通过以下代码即可实现: <div class="panel panel-default"> <div class="panel-body"> Basic panel

Java解析Excel内容的方法

本文实例讲述了Java解析Excel内容的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: import java.io.File;  import java.io.FileInputStream;  import java.io.InputStream;  import java.util.ArrayList;  import org.apache.poi.hssf.usermodel.HSSFWorkbook;  import org.apache.poi.ss.user

Delphi解析FTP地址的方法

本文实例讲述了Delphi解析FTP地址的方法.分享给大家供大家参考.具体实现方法如下: procedure TForm1.FTPAnalysis(S:string;var UserName,Password,IP,FileName:String;var DirList:TStringList); var i,j:integer; strAuthorization,strAddr,strDirFile:string; //授权信息 begin UserName:= 'anonymous'; Pa

Android pull解析xml的实现方法

Android pull解析xml的实现方法 资源文件: persons.xml <?xml version="1.0" encoding="utf-8" standalone="yes" ?> <persons> <person id="101"> <name>jame</name> <age>18</age> </person>

vue-cli如何引入bootstrap工具的方法

本文介绍了vue-cli如何引入bootstrap工具的方法,分享给大家,也给自己留个笔记. 以下操作以正常安装node环境为前提. 1.引入jq: 在npm控制台中,进入项目目录,然后输入指令npm install jquery --save-dev(npm换成cnpm更好,国内环境下使用cnpm下载速度更快). 2.修改build目录下的webpack.base.conf.js配置文件: 1)加入webpack对象:var webpack=require('webpack'); 2)在mod