bootstrap学习10-巨幕 页头 缩略图 警告框组件

最新推荐文章于 2024-11-13 17:27:29 发布
最新推荐文章于 2024-11-13 17:27:29 发布
阅读量78 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/daniel-lij/p/6391184.html
版权 
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <title>巨幕 页头 缩略图 警告框组件</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <style>
      .a{
          border: 1px solid red;
          height: 50px;
          background-color: aquamarine;
      }
  </style>
  
<body style="margin:50px;">
    <!--巨幕展示网站最关键的部分
        jumbotron  巨幕组件
        page-header 页头组件
        thumbnail 缩略图
    -->
       <div class="container">
           <div class="jumbotron">
               <h2>网站标题</h2>
               <p>我是网站的详细简介</p>
               <p><a href="#" class="btn btn-default">快速进入</a></p>
           </div>
       </div>
       <div class="page-header">
     <h2>我是大标题<small>我是小标题</small></h2>               
       </div>
       <div class="container">
           <div class="row">
               <div class="col-md-3 col-sm-4 col-xs-6 ">
                   <div class="thumbnail">
                       <img src="img/0.png" alt="pic" />
                       <h3>图片</h3>
                       <p>关于这张图片</p>
                       <p><a href="#" class="btn btn-default">快速进入</a></p>
                   </div>    
               </div>
               <div class="col-md-3 col-sm-4 col-xs-6 ">
                   <div class="thumbnail">
                       <img src="img/0.png" alt="pic" />
                 <h3>图片</h3>
                       <p>关于这张图片</p>
                       <p><a href="#" class="btn btn-default">快速进入</a></p>        
                   </div>
               </div>
               <div class="col-md-3 col-sm-4 col-xs-6 ">
               <div class="thumbnail">
                   <img src="img/0.png" alt="pic" />
                 <h3>图片</h3>
                   <p>关于这张图片</p>
                   <p><a href="#" class="btn btn-default">快速进入</a></p>
               </div>    
               </div>
               <div class="col-md-3 col-sm-4 col-xs-6 ">
                   <div class="thumbnail">
                       <img src="img/0.png" alt="pic" />
                     <h3>图片</h3>
                       <p>关于这张图片</p>
                       <p><a href="#" class="btn btn-default">快速进入</a></p>
                   </div>
               </div>
           </div>
       </div>
       <!--
           alert 警告框组件
           alert-success 警告框样式
           close  关闭的css样式
           data-dismiss=“alert” js样式
           alert-link  插入链接样式
       -->
       <div class="alert alert-success" style="margin: 0 100px;">
           警告框下载<a href="" class="alert-link">最新版本</a>
           <div class="close" data-dismiss="alert" ><span>&times;</span></div>
       </div>
       
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.min.js"></script>
  </body>
</html>

 

转载于:https://www.cnblogs.com/daniel-lij/p/6391184.html

weixin_30426957
关注
第十章之巨幕页头缩略图与警告框组件
10-22
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，...本文给大家介绍BootStrap组件第十章之巨幕页头缩略图和警告框组件 的相关资料,需要的朋友可以参考下
大屏幕html,Bootstrap 超大屏幕
weixin_32709413的博客
06-16 453
本篇文章帮大家学习Bootstrap 超大屏幕，包含了Bootstrap 超大屏幕使用方法、操作技巧、实例演示和注意事项，有一定的学习价值，大家可以用来参考。本章将讲解 Bootstrap 支持的另一个特性，超大屏幕(Jumbotron)。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距(margin)。使用超大屏幕(Jumbotron)的步骤如下：创建一个带有 class.j...
bootstrap专栏 06.组件 12.巨幕
Web Python
03-17 301
# 12.巨幕 [toc]{type: "ol", level: [3]} ### 巨幕 ```html <div class="jumbotron"> <!--标题--> <h1 class="display-4">Hello, world!</h1> <p class="lead">This is a simple hero unit, a simple jumbotron-style component...
巨幕和徽章
★匆匆★的专栏
08-05 454
摘自《极客学院》 1、效果图： 2、html代码： 徽章和巨幕 Hello,World!! 努力成为全栈工程师，努力make money努力成为全栈工程师，努力make money努力成为全栈工程师，努力make money努力成为全栈工程师，努力make money
零基础Bootstrap入门教程(5)--使用标签、徽章、巨幕、Well
程序员大阳
02-18 1257
本文目录1. 概述2. 标签3. 徽章4. 巨幕5. Well6. 小结 1. 概述 本篇介绍下几个常用的Bootstrap组件，即标签、徽章、巨幕和Well。 这几个组件都比较简单，直接在HTML元素上添加class样式即可。 2. 标签 标签一般用于为元素添加附加信息，一般通过为<span>元素添加样式类来实现，例如： <div class="container-fluid"> <div class="row"> <d
Bootstrap 第10章 巨幕页头缩略图和警告框组件
08-12
在第10章中，我们重点探讨了两个关键组件：巨幕（Jumbotron）页头和缩略图（Thumbnail），以及警告框（Alert）组件。这些元素在网页设计中扮演着重要的角色，帮助创建引人注目的布局和有效的信息传达。 首先，让...
Bootstrap缩略图与警告框学习使用
08-31
接下来，我们转向Bootstrap的警告框组件。警告框用于向用户显示重要的消息或提示，如错误、警告或成功信息。在示例中，我们看到一个`<p>`标签带有`.alert`和`.alert-danger`类，这将创建一个红色的警告框： ```html...
Bootstrap笔记之缩略图、警告框实例详解
08-31
总结，Bootstrap的缩略图和警告框是构建用户界面时常用且实用的组件。缩略图提供了一种整洁的方式展示图片，同时允许添加标题和描述来增强用户体验；警告框则帮助传达关键信息，确保用户能够注意到页面上的重要通知...
跟着尚硅谷学vue2—进阶版2.0—使用 Vue 脚手架1.0
zhzijun的博客
11-13 387
分析脚手架 、ref和props、mixin混入、插件、scoped样式、总结TodoList案例、浏览器本地存储-webStorage、TodoList_本地存储
vue2面试题5|[2024-11-08]
m0_49474690的博客
11-08 967
关于vue2API的面试题
解决@ant-design-vue/nuxt模块加载到许多没用到的组件，影响开发下加载速度的问题
清晰编程
11-12 146
升级命令：npm up @ant-design-vue/nuxt。解决方法：将该模块版本升级到1.4.6。
Vue中的常用指令
m0_62388400的博客
11-12 967
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
Javascript中Map与Set以及其常见遍历方式
警警的博客
11-12 739
在JavaScript中，Map和Set是两种非常重要的集合类型，它们提供了比传统对象（Object）和数组（Array）更强大和灵活的数据存储和操作方法。下面是对Map和Set的详细解释。
如何编译 Cesium 源码
最新发布
ismartcube的博客
11-13 713
通过以上步骤，您可以成功地从 GitHub 上下载 Cesium 源代码并在本地进行编译。对于开发人员来说，编译 Cesium 源码有助于定制功能，或者调试某些问题。如果您只是想使用 Cesium 进行开发，而不需要编译源代码，您也可以直接从 CDN 或下载预构建版本进行使用。编译的 Cesium 版本可以直接在您的应用中引用，或者部署到 Web 服务器上，供其他用户访问。提供一个高效、兼容、优化的数据转换工具，一站式完成数据转换、数据发布、数据预览操作。
从零开始快速构建Vue3项目
欧唯薇
11-13 676
是目前最推荐的方式来创建 Vue 3 项目，因为它速度快，配置简洁，并且是 Vue 3 的官方推荐工具。打开浏览器并访问 `http://localhost:5173`，你将看到一个基本的 Vue 3 应用程序运行。1、若需要使用不同版本node（兼容新旧项目环境），则需要使用nvm来进行node多版本管理，下载并安装。2、若出现某个依赖安装报错，可以npm install --ignore-scripts，最后再来单独安装报错的依赖。
Vue常用加密方式
m0_51431448的博客
11-13 70
消息摘要是从原始数据中通过特定算法计算出的一个固定长度的字符串，这个过程通常被称为哈希函数或散列函数。固定长度：无论输入的数据有多大，输出的消息摘要都有固定的长度。唯一性：理想情况下，不同的输入应该产生不同的消息摘要，虽然在现实中由于哈希碰撞的存在，这并不总是可能的。不可逆性：从消息摘要不能反推出原始数据。高效性：计算消息摘要的过程应该是快速且高效的。
第三十七章 Vue之编程式导航及跳转传参
Calvin的博客
11-10 1570
前面的章节我们学习了声明式导航的路由跳转，简单理解就是通过链接形式的路由跳转，本章节我们来学习下编程式导航跳转，即点击按钮来实现页面的跳转。在Vue中提供了两种实现方式。Home.vue的代码在前者基础上稍做调整即可，获取方式等代码一样。编程式导航两种跳转方式对于两种传参方式也都支持。跳转方法中通过name属性指定路由即可。2.1.1. 查询参数传参（简写）2.2. name命名路由跳转传参。1.2. name 命名路由跳转。2.1. path路径跳转传参。2.2.1. 查询参数传参。
Mock.js生成随机数据，拦截 Ajax 请求
gklcsdn的博客
11-13 901
Mock.js提供了一个Mock.mockurl：要拦截的请求 URL，支持字符串或正则表达式。method：请求类型，比如"get""post"，不区分大小写。data：要返回的模拟数据格式。定义数据结构：通过 JSON 模板定义结构，并使用占位符生成随机数据。拦截请求：通过Mock.mock拦截指定的 URL 请求。自定义生成规则：通过 Mock.js 的占位符生成丰富的数据类型，包括字符串、数值、数组、日期、图片等。模拟延迟：使用Mock.setup模拟网络延迟。
vue3 富文本组件（MDEditor）在拖拽组件（vuedraggable）点击功能失效问题
我只是个很菜的前端
11-12 173
vue3 富文本组件（MDEditor）在拖拽组件（vuedraggable）点击功能失效问题 拖拽组件内点击事件失效问题
Bootstrap缩略图与警示框组件详解：提升产品列表设计
本文将深入探讨Bootstrap框架中的两个关键组件：缩略图组件和警示框组件。Bootstrap是由Twitter开发的一款流行的前端开发工具，以其易用性和响应式设计闻名。它基于HTML、CSS和JavaScript，简化了Web开发流程。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值