Bootstrap <基础二十三>页面标题（Page Header）

最新推荐文章于 2023-09-11 10:12:12 发布
最新推荐文章于 2023-09-11 10:12:12 发布
阅读量199 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/lansy/p/4458972.html
版权

页面标题（Page Header）是个不错的功能，它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时，页面标题这个功能就显得特别有用。如需使用页面标题（Page Header），请把你的标题放置在带有 class .page-header的 <div> 中：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 页面标题</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="page-header">
   <h1>页面标题实例
      <small>子标题</small>
   </h1>
</div>
<p>这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。</p>


</body>
</html>

结果如下所示：

页面标题（Page Header）
Bootstrap<基础二十> 标签
Bootstrap <基础二十一>徽章（Badges）
Bootstrap <基础二十二>超大屏幕（Jumbotron）
Bootstrap <基础二十三>页面标题（Page Header）
Bootstrap<基础二十四> 缩略图
Bootstrap <基础二十五>警告（Alerts）
Bootstrap <基础二十六>进度条
Bootstrap<基础二十七> 多媒体对象（Media Object）
Bootstrap <基础二十八>列表组
Bootstrap <基础二十九>面板（Panels）
Bootstrap <基础三十>Well
Bootstrap <基础三十一>插件概览
Bootstrap <基础三十二>模态框（Modal）插件

转载于:https://www.cnblogs.com/lansy/p/4458972.html

anpochi7793
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap 组件：页头组件 (page-header)
WangMin@汪末末
09-07 1300
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 页头组件(.page-header)能够为h1标签增加适当的空间，并且与页面的其他部分形成一定的分隔。它支持h1标签内内嵌small元素的默认效果。用法如下： <div class="page-header"> <h1>标题<small> 2020/7/28 13:00:00</small></h1> </div>
Bootstrap页面标题Page Header的实现方法
08-31
Bootstrap 页面标题 Page Header 的实现方法 Bootstrap 框架提供了多种方式来实现页面标题 Page Header，它是一种常用的布局组件，能够帮助开发者快速创建一个美观的页面标题。下面将对 Bootstrap 页面标题 Page ...
3.13 Bootstrap 页面标题(Page Header)
梁辰兴的博客
07-18 356
页面标题（Page Header）是个不错的功能，它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时，页面标题这个功能就显得特别有用。
036_PageHeader页头
aihiao的专栏
03-01 1171
1. PageHeader页头 1.1. 如果页面的路径比较简单, 推荐使用页头组件而非面包屑组件。 1.2. Attributes 参数 说明 类型 可选值 默认值 title 标题 string 无 返回 content 内容 str
5.5 【MySQL】Page Header（页面头部）
最新发布
明确的爱，真诚的喜欢，直接的厌恶，站在太阳底下的坦荡，被坚定的选择。
09-11 365
为保证从内存中同步到磁盘的页的完整性，在页的首部和尾部都会存储页中数据的校验和和页面最后修改时对应的 LSN 值，如果首部和尾部的校验和和 LSN 值校验不成功的话，就说明同步过程出现了问题。
前端开发：Bootstrap开发框架
阿甘正传
09-17 7241
1）Bootstrap入门。 Bootstrap官网网站 官方网站：https://getbootstrap.com/ 中文网站：http://www.bootcss.com/ Bootstrap 库的下载 这里我们以 Bootstrap V3.3.7 为例。 进入中文官网，下载 用于生产环境的 Bootstrap，如下图所示： 下载之后，解压 bootstrap-3.3.7-...
Bootstrap 页面标题（Page Header）
12-14
在传统的HTML中，我们通常使用`<h1>`到`<h6>`标签来表示不同级别的标题，但在Bootstrap中，通过使用`.page-header`类，我们可以创建一个带有特定样式和间距的标题区域，它不仅包含了基本的标题，还可以包含子标题或...
bootstrap3.0教程之排版详细使用教程(标题、页面主体、强调、缩略语等用法)
01-19
本次主要来了解的是排版，这个大部分在HTML的基本标签中也是存在的，所以相对比较简单...复制代码代码如下:<div class=”container”> <h1 class=”page-header”>标题</h1><h1>h1. Bootstrap heading</h1><h2>h2. Boot
Bootstrap3学习笔记(二)之排版
09-02
此外，Bootstrap提供了一个`.page-header`类，用于创建页面级别的标题。例如： ```html <div class="page-header"> <h1>Twitter Bootstrap <small>An intuitive front-end framework</small></h1> </div> ``` 在...
Element中el-page-header页头的用法
m0_51044151的博客
04-30 7327
在开发项目中使用到页头这一组件，官网描述很简单，这个组件本身也很简单 去官网看看 官网就只给出这一个例子以及相关参数事件。我今天所说的就是back这个事件，这个就是页头跳转所触发的事件，通过官网给出的代码来看，需要执行goBack()方法。 因此我们可以通过该方法编写想要跳转的路径 html代码 <el-page-header @back="goBack" :title="title" style="color: #4490f1"> 我是使用Steps 步骤条才使用的这个组件，因为修改页头
Bootstrap &lt；基础二十三＞页面标题（Page Header）
孤云博客
01-11 3032
随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)、博主微信（guyun297890152）、QQ技术交流群(183198395)。 转自：https://www.cnblogs.com/lansy/p/4458972.html 页面标题（Page Header）是个不错的功能，它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每...
Bootstrap——排版（标题、段落、强调、缩略语、引用）
m0_69034993的博客
10-09 1704
HTML5定义了若干个标签强调的标签，有、、、、、、等，在Bootstrap4中同样也可以使用，用来为元素添加强调样式。（3）固定不同级别标题字体大小，一级为2.5rem，二级为2rem，三级为1.75rem，四级为1.5rem，五级为1.25rem，六级为1rem。和都可以实现下画线效果，但是前者通常与一起使用。和都可以实现删除效果，但是更具有语义化，能更形象的描述删除意思。
css固定toobar,固定工具栏选项 fixedtoolbar Options
weixin_35671421的博客
08-04 428
disablePageZoom 禁止用户缩放固定工具栏。类型：布尔值。默认值：true。此选项禁止用户缩放固定工具栏。也可以在HTML中添加ata-disable-page-zoom="false" 属性来实现。//初始化$( ".selector" ).fixedtoolbar({ disablePageZoom: false });// gettervar disablePageZoom = ...
Bootstrap页头（Page header）
歪脖先生的博客
05-21 1909
页头 页头（Page header）就相当于一个标题框，给从 <h1> 到 <h6> 的任意标题元素套上这个简单的外壳，就可以为它添加更多的间隙，并通过一个下边框把它从页面中分离出来。 要在页面中放置一个页头，只需把标题元素放在类为 .page-header的 <div> 中即可。另外，还可以给标题元素添加 <small> 标签，让它充当副标题...
Bootstrap Page header
歪脖先生的博客
03-10 2002
Page headerPage header就相当于一个标题框，给从 &lt;h1&gt; 到 &lt;h6&gt; 的任意标题元素套上这个简单的外壳，就可以为它添加更多的间隙，并通过一个下边框把它从页面中分离出来。要在页面中放置一个Page header，只需把标题元素放在类为 .page-header 的 &lt;div&gt; 中即可，也可以给标题元素添加 &lt;small&gt; 标签，...
组件-Element—PageHeader（ 页头）
GU_AO_SHI_TAI_DU的博客
07-04 9930
组件-Element—PageHeader（ 页头） 组件— 通知 基础 <el-page-header @back="goBack" content="详情页面"> </el-page-header> <script> export default { methods: { goBack() { console.l...
Bootstrap实战---header处理
Season CSDN博客
07-09 1186
Bootstrap实战—header处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>融职教育</title> <!--移动设备优先--> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&
<html> <head> <title>人员管理界面</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script> </head> <body> <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <div class="page-header"> <h1> <small>员工列表 —— 显示所有员工信息</small> </h1> </div> </div> </div> <div class="row clearfix"> <div class="col-md-12 column"> <table class="table table-hover table-striped"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>电话号</th> <th>地址</th> <th>职位</th> <th>职位编号</th> <th>状态</th> <th>证件照</th> </tr> </thead> <tbody> <c:forEach items="${employees}" var="employees"> <tr> <td>${employees.id}</td> <td>${employees.name}</td> <td>${employees.phonenumber}</td> <td>${employees.address}</td> <td>${employees.job}</td> <td>${employees.jobid}</td> <td>${employees.state}</td> <td><img src="${pageContext.request.contextPath}/images/${employees.pic}" style="width: 100px; height: 50px"></td> <td> <a href="${pageContext.request.contextPath}/toupdate/${employees.id}">更改</a> | <a href="${pageContext.request.contextPath}/delete/${employees.id}" onclick="return confirm('确定要删除吗？')">删除</a> </td> </tr> </c:forEach> </tbody> </table> </div> </div> </div> </body> </html>给这个界面的表格实现一个分页的功能，每页的最大数目为5
06-02
<li class="page-item"><a class="page-link" href="#">上一页</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值