Bootstrap组件_巨幕，页头，缩略图

最新推荐文章于 2022-06-14 07:25:27 发布
最新推荐文章于 2022-06-14 07:25:27 发布
阅读量287 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Leon_Jinhai_Sun/article/details/88538244
版权 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>巨幕</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
  <div class="container-fluid">    
    <div class="jumbotron">
      <h1>Hello World!</h1>
      <p>
        This is a simple hero unit, a simple jumbotron-style component for 
        calling extra attention to featured content or information.
      </p>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn More</a></p>
    </div>
  </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>页头</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
  <div class="page-header">
    <h1>BootStrap学习<small>页头的学习</small></h1>
    <h4>BootStrap学习<small>页头的学习</small></h4>
  </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>缩略图</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-3 col-xs-12 col-sm-6">
        <a class="thumbnail" href="#">
          <img src="001.jpg" alt="....">
        </a>
      </div>
      <div class="col-md-3">
        <a class="thumbnail" href="#">
          <img src="001.jpg" alt="....">
        </a>
      </div>
      <div class="col-md-3">
        <a class="thumbnail" href="#">
          <img src="001.jpg" alt="....">
        </a>
      </div>
      <div class="col-md-3">
        <a class="thumbnail" href="#">
          <img src="001.jpg" alt="....">
        </a>
      </div>
    </div>
  </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>缩略图</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-3 col-xs-12 col-sm-6">
        <a class="thumbnail" href="#">
          <img src="001.jpg" alt="....">
        </a>
      </div>
      <div class="col-md-3">
        <a class="thumbnail" href="#">
          <img src="001.jpg" alt="....">
        </a>
      </div>
      <div class="col-md-3">
        <a class="thumbnail" href="#">
          <img src="001.jpg" alt="....">
        </a>
      </div>
      <div class="col-md-3">
        <a class="thumbnail" href="#">
          <img src="001.jpg" alt="....">
        </a>
      </div>
    </div>
    <div class="row">
      <div class="col-md-3">
        <div class="thumbnail">
          <img src="001.jpg" alt="....">
          <div class="caption">
            <h4>Thumbnail label</h4>
            <p>
              Cras justo odio, dapibus ac facilisis in, egestas eget quam. 
              Donec id elit non mi porta gravida at eget metus. 
              Nullam id dolor id nibh ultricies vehicula ut id elit.
            </p>
            <p>
              <a class="btn btn-primary" role="button" href="#">button</a>
              <a class="btn btn-primary" role="button" href="#">button</a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

 

Leon_Jinhai_Sun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap图片、字体图标、巨幕、导航条
sundanping_123的博客
09-04 510
导航条： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale...
Bootstrap组件之巨幕、徽章
bboyjoe的博客
08-01 3372
.jumbotron——指定div元素包裹巨幕组件； 巨幕示例 中超大结局预测 中超正经历着两周间歇期，但“间歇”的字眼下是各队为赛季收官所进行的冲刺准备。在还剩9轮联赛的情况下，本赛季的大结局已是露出了可供揣测的端倪：争冠集团中，恒大由数据所体现出的稳定性放大着连续第5个赛季夺冠的希望；残酷的保级战线中，辽足与
bootstrap学习笔记——10——巨幕页头缩略图和警告框组件
小贺的博客
06-19 341
组件功能：巨幕组件、页头组件、缩略图组件和警告框组件。 巨幕组件 巨幕组件主要是展示网站的关键性区域 //在固定的范围内，有圆角 &lt;div class="container"&gt; &lt;div class="jumbotron"&gt; &lt;h2&gt;网站标题&lt;/h2&gt; &lt;p&gt;这是一个学习性的...
Bootstrap-巨幕页缩略图和警告组件
One By One
12-14 248
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"> </head>...
html css巨幕模板,基于bootstrap实现bootstrap中文网巨幕效果
weixin_34893782的博客
06-28 1236
效果图：实现代码：Bootstrap案例开发简洁、直观、强悍的前端开发框架，让web开发更迅速、简单Bootstrap3中文文档(v3.3.7)Bootstrap2中文文档(v2.3.7)添加自定义的CSS效果.jumbotron{style="background-color: rgba(88, 45, 88, 0.84);}.v2a{color: grey; -webkit-transitio...
第十章之巨幕页头缩略图与警告框组件
10-22
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，...本文给大家介绍BootStrap组件第十章之巨幕页头缩略图和警告框组件 的相关资料,需要的朋友可以参考下
Bootstrap 第10章 巨幕页头缩略图和警告框组件
08-12
在第10章中，我们重点探讨了两个关键组件：巨幕（Jumbotron）页头和缩略图（Thumbnail），以及警告框（Alert）组件。这些元素在网页设计中扮演着重要的角色，帮助创建引人注目的布局和有效的信息传达。 首先，让...
Bootstrap基本组件学习笔记之缩略图(13)
09-01
在Bootstrap中，缩略图（thumbnails）是一个常用的组件，用于展示图片预览或缩略版本，通常与其它内容如标题、描述和操作链接一起使用。在本文中，我们将深入探讨Bootstrap缩略图的基本用法和特性。 首先，缩略图的...
浅析Bootstrap缩略图组件与警示框组件
09-02
本篇文章将深入探讨Bootstrap中的两个关键组件：缩略图组件和警示框组件。 缩略图组件在网站设计中扮演着重要角色，尤其是在产品列表页面上，常用于展示多张图片，通常会伴随有标题、描述和操作按钮。Bootstrap将...
Bootstrap从入门到实战---巨幕和旋转图标
Season CSDN博客
07-07 533
Bootstrap从入门到实战—巨幕和旋转图标 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!-- 移动设备优先 --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-
基于bootstrap的网站导航页
07-04
基于bootstrap框架的网站导航页实现，包括巨幕、导航栏、下拉菜单以及内嵌页面实现
Bootstrap图片、文字水平垂直定位
xiaoyong1110的专栏
03-19 916
<div style="background: #0b2e13; width: 500px; height: 500px; color: #fff;" class="d-flex justify-content-center align-items-center"> <h1 class="h1">文字居中</h1> </div> 文字水平垂直居中效果： <div style="background: #0b2e13; width..
【Bootstrap学习笔记】5.巨幕页头缩略图和警告框组件、进度条媒体对象和Well组件
sunraito的博客
08-19 320
十、巨幕页头缩略图和警告框组件 学习内容 ● 巨幕组件 1.巨幕组件主要是展示网站的关键性区域 2.两种形式，一种是固定在一个width范围内，有圆角；另一种是width全屏，没有圆角 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl + Q 插入链接 Ctrl + L 插入代码 Ctrl + K 插入图片 ...
Bootstrap系列之巨幕（Jumbotron）
老__L的博客
06-14 1196
巨幕（Jumbotron）
Bootstrap巨幕（Jumbotron）
歪脖先生的博客
05-21 5322
巨幕 巨幕（Jumbotron）是一个轻量、灵活可扩展组件，它能延伸到整个视口宽度，主要用于展示网站的重点内容。它的标题会被加大显示，而且边距也比较大，非常适合营销类或内容类网站。 要在页面中放置一个巨幕，只要给容器 <div> 添加 .jumbotron 类即可，还可以添加标题、说明性文本、按钮等，标题可以使用从 <h1> 到 <h6> 的任意标签。如： ...
HTML图片全屏
linghugoolge的博客
01-06 854
效果 image.png 代码 <body style="background: url(images/bg.jpg) fixed no-repeat center 0; overflow-x: hidden;overflow-y: hidden;width:100%; height:100%;"> </body> 注意 图片如果小于屏幕，无法...
bootstrap组件之巨幕&页头&缩略图&警告框&进度条&媒体对象&列表组&面板&嵌入内容
andrew_dear的博客
03-01 627
巨幕 【概念】巨幕组件主要是展示网站的关键性区域 两种形式 在固定的范围内，有圆角 <div class="container"> <div class="jumbotron"> 内容区域 </div> </div> 100%全屏，没有圆角 <div class="jumbotron"> <div class="container"> 内容区域 </div> </div>
BootStrap 巨幕
刚哥的博客
07-20 3978
巨幕主要用来展示网站的关键性区域。 固定的做法              网站标题             我是网站的详细简介         快速进入      现在的做法是              网站标题             我是网站的详细简介         快速进入
请使用bootstrap组件实现缩略图功能
最新发布
04-18
关于使用Bootstrap组件实现缩略图功能，以下是一些参考步骤： 1. 首先，需要在HTML页面中引入Bootstrap的css和js文件。 2. 接着，在需要应用缩略图功能的图片标签中添加“img-thumbnail”类，如下所示： ``` ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值