开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在Bootstrap 5中创建jumbotron？

在Bootstrap 5中创建一个jumbotron（超大屏幕）非常简单。Jumbotron是一个用于展示重要信息的组件，通常用于突出显示标题、描述和导航链接。

基础概念

Jumbotron是一个全屏宽度的背景色块，通常用于网站的主页或重要页面的顶部，以吸引用户的注意力。

类型

Bootstrap 5中的Jumbotron主要是一个CSS类，可以通过添加特定的类来实现。

应用场景

Jumbotron常用于以下场景：

网站主页的顶部，展示欢迎信息或重要公告。
产品介绍页面，突出显示产品的主要特点。
活动页面，展示活动的详细信息。

创建Jumbotron的步骤

引入Bootstrap CSS和JS文件：确保在你的HTML文件中引入了Bootstrap的CSS和JS文件。你可以通过CDN引入：
引入Bootstrap CSS和JS文件：确保在你的HTML文件中引入了Bootstrap的CSS和JS文件。你可以通过CDN引入：
创建Jumbotron结构：使用Bootstrap的jumbotron类来创建Jumbotron的结构。
创建Jumbotron结构：使用Bootstrap的jumbotron类来创建Jumbotron的结构。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 Jumbotron Example</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="jumbotron">
    <h1>Welcome to Our Site</h1>
    <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <hr class="my-4">
    <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  </div>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>

参考链接

Bootstrap 5 Documentation

通过以上步骤，你可以在Bootstrap 5中轻松创建一个Jumbotron。如果你遇到任何问题，可以参考上述链接或查看Bootstrap的官方文档。

相关搜索:如何在bootstrap 3模式中创建网格如何在bootstrap 4中创建固定标头如何在Bootstrap 4中创建嵌套列？如何在Bootstrap Jumbotron中使用颜色覆盖来保留文本颜色？如何在Bootstrap Vue中创建ComboBox？如何在Bootstrap-5中创建响应式视频如何在Bootstrap中使用ngFor创建有子元素如何在Bootstrap中创建Parrallax封面如何在bootstrap中创建导航标签？如何在bootstrap中创建自动完成搜索框？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Python Web 菜谱系统的首页，不会前端技术，也能做【附源码】

滚雪球第三轮核心学习的是 Python Web 相关知识点，那不可避免的会涉及到前端技术栈，如果你对 HTML，CSS 完全零基础，学习来可能比较吃力，建议可以先补充一些前端知识，便于后续学习，你也可以先直接进入 Django 学习阶段，问题不大。

04

Bootstrap增加标题的大小，添加更多的外边距（margin）

Bootstrap 支持的另一个特性，超大屏幕（Jumbotron）。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下：

03

关于“Python”的核心知识点整理大全61

这个简化的Bootstrap模板适用于最新的浏览器，而较早的浏览器可能不能正确地渲染某些样式。完整的模板可在http://getbootstrap.com/getting-started/#examples/找到，它几乎在所有浏览器中都管用。

01

Laravel框架Blade模板简介及模板继承用法分析

本文实例讲述了Laravel框架Blade模板及模板继承用法.分享给大家供大家参考，具体如下：

03

python web开发 Bootstrap框架基础

popper.js cdn：https://unpkg.com/@popperjs/core@2 jquery.js https://code.jquery.com/jquery-3.6.0.js

03

Bootstrap响应式前端框架笔记十二——巨幕与缩略图

巨幕用于创建一块区域，此区域可以用来展示网页页头或者需要重点提示的地方，使用jumbotron类来创建巨幕，示例如下：

02

bootstrap 网页实例常用样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 一个简单的网页</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> .fakeimg { height: 200px; background: #aaa; } </style> </head> <body>

我的第一个 Bootstrap 页面

重置浏览器窗口大小查看效果！

03

SpringBoot 发送邮件

# 依赖 compile group: 'org.springframework.boot', name: 'spring-boot-starter-mail' # 配置 spring: # 发邮件 mail: host: smtp.qq.com port: 587 username: 1185172056@qq.com password: 不是qq邮箱的密码，是授权码 properties: smtp: auth: true

03

05 . 前端之BootStrap

bootstrap下载地址 https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip

05

制作一个考场标准时钟 | JavaScript+CSS+HTML

首行加入：<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">

04

bootstrap 颜色选择器

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>bootStrap-colorpicker 插件测试</title> <link href="../css/bootstrap.min.css" type="text/css" rel="stylesheet"> <link href="../css/bootstrap-colorpicker.css" type="text/css" rel="stylesheet"> <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="../js/bootstrap-colorpicker.js"></script> <style> input { width: 20px; height: 20px; border: 1px solid #fff; border-radius: 4px; background-color:#fff; text-indent: 20px;; } </style> </head> <body>

Bootstrap Colorpicker Demo

选择的颜色：

点击选择颜色：<input id="demo" type="text" value="" readonly/>

03

5分钟！Vue 快速实现 GitHub 用户搜索功能

Coding 提升篇！Vue 组件代码优化: 公共配置抽离成 Mixin 混合( 附超详细使用教程 )

04

你要的 React 面试知识点，都在这了

React是流行的javascript框架之一，在2019年及以后将会更加流行。React于2013年首次发布，多年来广受欢迎。它是一个声明性的、基于组件的、用于构建用户界面的高效javascript库。

02

BootStrap应用开发学习入门

[TOC] 0x00 前言简介什么是BootStrap? 答:Bootstrap是Twitter 的 Mark Otto 和 Jacob Thornton 开发的推出的一个用于前端开发的开源工具包产

02

BootStrap应用开发学习入门

[TOC] 0x00 前言简介什么是BootStrap? 答:Bootstrap是Twitter 的 Mark Otto 和 Jacob Thornton 开发的推出的一个用于前端开发的开源工具包产

03

豫商杯web的WP

http://ctf3.shiyanbar.com/web/variable/ 打开题目发现

05

Vue实现的github搜索小案例

效果 📷 📷 前置知识 vue基础 axios es6基础语法代码 📷 index.html <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />

03

VueJS + Webpack 代码分割的三种方式

对单页应用实行代码分割，是提高页面加载速度的一种很好的方式。因为用户不必在一次请求里加载完所有的代码，能够更快的看到页面并进行交互，这将会提升用户体验（特别是在移动端）；同时因为 Google 会给加载缓慢的网站降权，代码分割也对 SEO 有好处。

01

Vue实现的github搜索小案例

效果 📷 📷 前置知识 vue基础 axios es6基础语法代码 📷 index.html <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />

02

前端学习自学笔记：day10

今天是第十天的笔记,主要是HTML和CSS的,希望大家支持~ 📷 在此之前先为大家显示下前端工程师的路线图: 第十天的笔记:HTML AND CSS: 响应式设计:自行创建:可以灵活的调控页面元素. 例: .city { 定义city类的css样式 float: left; 元素向左边移动 margin: 5px; 外边距为5px padding: 15px;内边距为15px width: 300px; 宽为300px height: 300px;高为300px border: 1px solid b

07

【教程】纯前端做一个歌词显示的音乐播放器

节目：08-1202L/08-1203K：【教程】纯前端做一个歌词显示的音乐播放器

06

BootStrap基础知识

2019年实习时的 BootStrap(4.x)基础知识备份 BootStrap5六角学院文档： HexSchool 顺便推荐一个程序员段子网站 techug.com

01

基于 Django 的个人网站（5）

配置 bootstrap 很简单，首先是 css 文件的导入，我们只要将 css 文件以 link 标签的形式添加到 head 标签中，并放置在所有其他样式表之前就行，代码如下：

02

React实现的github搜索小案例

效果 image.png image.png 代码 image.png index.js //引入react核心库 import React from "react"; //引入ReactDOM import ReactDOM from "react-dom"; //引入App import App from "./App"; ReactDOM.render(<App />, document.getElementById("root")); App.jsx import React, { Compo

03

React实现的github搜索小案例

效果 📷 📷 代码 📷 index.js //引入react核心库 import React from "react"; //引入ReactDOM import ReactDOM from "react-dom"; //引入App import App from "./App"; ReactDOM.render(<App />, document.getElementById("root")); App.jsx import React, { Component } from "re

03

bootstrap入门-做一个简单的页面

接触bootstrap时间也不算短了，也用这个库做了几个内部系统了，使用的感觉真是很爽。

02

Bootstrap 介绍

Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包，该框架能帮助我们快速开发 web 页面以及响应式网站，我们能够使用 Bootstrap 预先定义好的 class 进行样式书写，其最主要特点是栅格系统，默认有 12 列

05

记录一次简单的博客升级w

从过年开始一直被闷在家里，少了出门和小伙伴耍的快落～每天在家里就是对着电脑忙各种事情（指摸鱼），于是总想着找点事情做做，正好看自己的小博客也不太顺眼了就想着升一下级～

02

关于“Python”的核心知识点整理大全65

删除Heroku上的项目对本地项目没有任何影响。如果没有人使用你部署的项目，就尽管去练习部署过程好了，在Heroku删除项目再重新部署完全合情合理。

01

Mybatis案例超详解（上）

本来是想像之前一样继续跟新Mybatis,但由于种种原因，迟迟没有更新，快开学了，学了一个暑假，博客也更新了不少，我觉得我得缓缓，先整合一些案例练练，等我再成熟点理解再透彻点之后再详细更新，如果仅仅是为了更新博客而忽视质量的话，有违我的初心，所以我决定，暂时转移路线，整合一些案例，为了以后更新更好的博客而准备。

03

5.栅格系统

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yx7xPxw0-1594451881727)(D:\bootstrap\Bootstrap入门.assets\image-20200711135751305.png)]

03

最流行的5个前端框架对比

本文将会比较其中五个最佳的框架。每个框架都有自己的优点和缺点，以及具体的应用领域，你可以根据自己的具体项目需求进行选择。此外，许多选项都是模块化的，允许你仅使用所需的组件，甚至可以混合使用来自不同框架的组件。

02

前端MVC学习总结（四）——NodeJS+MongoDB+AngularJS+Bootstrap书店示例

摘要总结：本文介绍了如何使用AngularJS04进行图书信息管理系统开发。主要包括了图书信息录入、查询、修改和删除等功能。同时，还提供了编辑图书和删除图书的接口。通过使用AngularJS04的指令和指令模块，可以方便地实现图书信息管理系统。

06

前端MVC学习总结（四）——NodeJS+MongoDB+AngularJS+Bootstrap书店示例

摘要总结：本文介绍了如何使用AngularJS04进行图书管理系统开发。主要包括了前端页面的展示和后端逻辑处理。前端页面包括图书信息展示、图书搜索、图书编辑和删除等功能。后端处理包括图书信息的增删改查、用户管理和权限控制等功能。

07

Bootstrap运用终极指南

Bootstrap是一个功能强大的、以移动端为优先的响应式前端框架，它是用CSS、HTML和JavaScript构建的。与从零开始编程，甚至许多其他框架相比，Bootstrap都有许多优势。

01

Laravel5.2之Redis保存页面浏览量

说明：本文主要讲述使用Redis作为缓存加快页面访问速度。同时，会将开发过程中的一些截图和代码黏上去，提高阅读效率。

04

Go Web 编程--超详细的模板库应用指南

如果你有过Web编程的经验，那么或多或少都听说过或者使用过模板。简而言之，模板是可用于创建动态内容的文本文件。例如，你有一个网站导航栏的模板，其中动态内容的一部分可能是根据当前用户是否登录显示登录还是退出按钮。

01

bootstrap 左边栏菜单常用样式

<style> /* Custom Styles / ul.nav-tabs{ width: 140px; margin-top: 20px; border-radius: 4px; border: 1px solid #ddd; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067); } ul.nav-tabs li{ margin: 0; border-top: 1px solid #ddd; } ul.nav-tabs li:first-child{ border-top: none; } ul.nav-tabs li a{ margin: 0; padding: 8px 16px; border-radius: 0; } ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{ color: #fff; background: #0088cc; border: 1px solid #0088cc; } ul.nav-tabs li:first-child a{ border-radius: 4px 4px 0 0; } ul.nav-tabs li:last-child a{ border-radius: 0 0 4px 4px; } ul.nav-tabs.affix{ top: 30px; / Set the top position of pinned element */ } </style> </head> <body data-spy="scroll" data-target="#myScrollspy">

Bootstrap Affix

第一部分
第二部分
第三部分
第四部分
第五部分

第一部分

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor

04

一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](九)

前言童鞋们，大家好我是专注.NET开发者社区建设的实践者Rector。首先，为自己间隔了两个星期五再更新本系列文章找个不充分的理由：Rector最近工作，家庭的各种事务所致，希望大家谅解。本文知识要点回到本文的主题，还是关于系列文章：《一步一步创建ASP.NET MVC5程序Repository+Autofac+Automapper+SqlSugar》，本文将为大家分享的主要内容有：响应式网站首页的布局与制作文章列表的展示文章详情页面前端布局与制作响应式网站首页的布局与制作在以本文之前

05

第90天：HTML5中文件API和拖放操作

一、文件API File API：提供客户端本地操作文件的可能 multiple是让文件域可以多选 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文件API</title> 6 <link rel="stylesheet" href="bootstrap.css"> 7 </head> 8 <body> 9 <form action=""> 1

02

bootstrap 超大屏幕样式

欢迎登陆页面！

这是一个超大屏幕（Jumbotron）的实例。

05

《Springboot极简教程》使用Spring Boot， JPA， Mysql， ThymeLeaf，gradle， Kotlin快速构建一个CRUD Web App

使用Spring Boot， JPA， Mysql， ThymeLeaf，gradle， Kotlin快速构建一个CRUD Web App

02

前端-Bootstrap实现响应视频

如果您不熟悉Web开发，请查看本文，了解如何利用Bootstrap在您的网页上创建自适应视频。

04

如何在Ubuntu 14.04中使用NodeJS，SailsJS和DustJS构建SPA（单页应用程序）

Node.js®是一个基于Chrome JavaScript运行时的平台，可轻松构建快速，可扩展的网络应用程序。Node.js使用事件驱动的非阻塞I / O模型，使其轻量级和高效，非常适合在分布式设备上运行的数据密集型实时应用程序。

00

Flask 快速入门

Flask是一个Python编写的Web 微框架，让我们可以使用Python语言快速实现一个网站或Web服务。本文参考自Flask官方文档，大部分代码引用自官方文档。安装Flask 首先我们来安装F

3000 字 Flask 快速学习指南：从入门到开发

作者：过了即是客 Flask是一个Python编写的Web 微框架，让我们可以使用Python语言快速实现一个网站或Web服务。本文参考自Flask官方文档，大部分代码引用自官方文档。安装Flask 首先我们来安装Flask。最简单的办法就是使用pip。 pip install flask 然后打开一个Python文件，输入下面的内容并运行该文件。然后访问localhost:5000，我们应当可以看到浏览器上输出了Hello Flask!。 from flask import Flask app =

09

Python：Flask简介与实践

Python做Web开发常用框架之一，通常来说，大型项目用Django，小型项目用Flask。著名的网飞（Netflix）也是使用Flask开发。

01

php开发论坛系统

以上所述是小编给大家介绍的php开发论坛系统，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对ZaLou.Cn网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

02

深入理解bootstrap

1.CSS12栅格系统：以规则的网格阵列来指导和规范网页中的版面布已有以及信息分布

06

【十五】springboot整合WebSocket实现聊天室

前端就一个html文件，引用的线上的jquery和bootstrap，所以我没有写样式文件。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭