Bootstrap超大屏幕和页面标题

刺骨的言语ヽ痛彻心扉 2022-08-23 08:44 142阅读 0赞

Bootstrap支持超大屏幕（jumbotron）,它可以增加标题的大小，并为登陆页面内容添加更多的外边距

创建一个带有class.jumbotron的容器
    除了更大的<h1>,字体的粗细font-weight被减为200px

![这里写图片描述][20160612210711774]

<div class="jumbotron">
    <h1>欢迎页面</h1>
    <p><a class="btn btn-primary btn-lg" role="button">登陆/注册</a></p>
    </div>

获得一个占用全部宽度且不带圆角的超大屏幕，先使用.jumbotron,在里面使用.container  
![这里写图片描述][20160612211013819]

<div class="jumbotron">
       <div class="container">
          <h1>欢迎登陆页面！</h1>
          <p>这是一个超大屏幕（Jumbotron）的实例。</p>
          <p><a class="btn btn-primary btn-lg" role="button">
             学习更多</a>
          </p>
       </div>
    </div>

2.页面标题  
页面标题会在网页标题的四周添加适当的间距，当一个网页中有多个标题且每个标题之间需要添加一定的间距时，可以使用.page-header  
![这里写图片描述][20160612211512721]

<div class="page-header">
    <h1>页面标题
        <small>页面的子标题</small>
    </h1>
    </div>
    <p>这里开始是页面的内容</p>

[20160612210711774]: /images/20220721/ec87ab48d84c406c86f0c594b4f7574e.png
[20160612211013819]: /images/20220721/9ad908d06c2e4aa49ab7b677a3b7db0f.png
[20160612211512721]: /images/20220721/74ac7b295c094201872ca8fc4878a41d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，142人围观）

还没有评论，来说两句吧...

相关阅读

相关 VUE修改页面的标题

重点代码 meta:{ title:'首页'} 完整代码 import Vue from 'vue' import Router from

﹏ヽ暗。殇╰゛Y/ 2022年11月29日 03:20/ 0 赞/ 194 阅读

相关页面复杂标题

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

深碍√TFBOYSˉ_/ 2022年09月02日 01:14/ 0 赞/ 166 阅读

相关 3.7Bootstrap学习组件篇之大屏幕介绍、页面标题、缩略图、警示框、Well

1、大屏幕介绍轻量，灵活的可选组件，扩展整个视角，展示您站点上的关键内容。要让大屏幕介绍是屏幕宽度，请别把它包括在`.container`。 <div cl

痛定思痛。/ 2022年08月27日 03:49/ 0 赞/ 109 阅读

相关 Bootstrap超大屏幕和页面标题

Bootstrap支持超大屏幕（jumbotron）,它可以增加标题的大小，并为登陆页面内容添加更多的外边距创建一个带有class.jumbotron的容器

刺骨的言语ヽ痛彻心扉/ 2022年08月23日 08:44/ 0 赞/ 143 阅读

相关 bootstrap不同屏幕占比+列隐藏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me

た入场券/ 2022年06月01日 23:45/ 0 赞/ 193 阅读

相关 bootstrap——简单页面1

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8">

青旅半醒/ 2022年06月01日 23:06/ 0 赞/ 168 阅读

相关 Bootstrap 页面标题和面板

一、页面标题（Page Header）它会在网页标题四周添加适当的间距和下边框。 <div class="page-header"

本是古典何须时尚/ 2022年03月21日 11:14/ 0 赞/ 213 阅读

相关 bootstrap38-Bootstrap 下拉菜单-标题

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 下拉菜单-标题</title

古城微笑少年丶/ 2022年01月09日 15:49/ 0 赞/ 334 阅读

相关页面中动态改变浏览器标题

浏览器标题动态改变 //浏览器标题即<meta></meta> $('head').children('title').html($('.index-left-tit

超、凢脫俗/ 2022年01月07日 15:07/ 0 赞/ 208 阅读

相关动态改变ASP.net页面标题和动态指定页面样式表

如果需要让asp.net应用程序对用户留有一定有自定义空间，例如用户要对页面使用自己定义的样式表或标题，可以使用下面的方法来动态指定：首先对ASPX文件中<HEAD>中的

蔚落/ 2021年11月29日 07:12/ 0 赞/ 278 阅读