01.Bootstrap

最新推荐文章于 2024-08-09 21:30:00 发布
最新推荐文章于 2024-08-09 21:30:00 发布
阅读量123 收藏 1
点赞数
分类专栏： 笔记 文章标签： bootstrap javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62981243/article/details/124772433
版权

案例1：查询按钮原生态实现对比Bootstrap方式实现

 

<html>
	<head>
		<meta charset="utf-8" />
		<title>案例1：查询按钮原生态实现对比Bootstrap方式实现</title>
		<!-- 1.引入Bootstrap的css依赖 -->
		<link rel="stylesheet" href="css/bootstrap.css">
		<!-- 2.引入jQuery库 在Bootatrap.js之前-->
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	    <!-- 3.引入Bootstrap.js -->
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	    <style type="text/css">
	    	#Btn{
				/* 背景颜色 */
				background-color: aqua;
				/* 宽度 */
				width: 80px;
				/* 高度 */
				height: 60px;
				/* 边框 */
				border: 0;
				/* css3.0 设置圆弧 */
				border-radius: 10px;
			}
	    </style>
	</head>
	<body>
		<h2>原生态实现查询按钮</h2>
		<p>默认按钮</p>
		<input type="button" value="查询">
		<a href="javascript:void(0)">查询</a>
		<button>查询</button>
		<p>设置样式过后按钮</p>
		<button id="Btn">查询</button>
		
		<h2>Bootstrap实现查询按钮</h2>
		<button class="btn-primary">查询</button>
		<button type="button" class="btn btn-primary">Primary</button>
		<button type="button" class="btn btn-secondary">Secondary</button>
		<button type="button" class="btn btn-success">Success</button>
		<button type="button" class="btn btn-danger">Danger</button>
		<button type="button" class="btn btn-warning">Warning</button>
		<button type="button" class="btn btn-info">Info</button>
		<button type="button" class="btn btn-light">Light</button>
		<button type="button" class="btn btn-dark">Dark</button>
		
		<button type="button" class="btn btn-link">Link</button>
	</body>
</html>

案例2：演示Bootstrap页面在手机浏览器中展示效果

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

案例3：首页导航&搜索区域原生态实现（div+css）

<html>
	<head>
		<meta charset="utf-8">
		<title>案例3：首页导航&搜索区域原生态实现（div+css）</title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			#container {
				/* background-color: aqua; */
				height: 800px;
			}

			.nav {
				background-color: aqua;
				height: 70px;
				line-height: 70px;
			}

			.nav_logo {
				float: left;
				margin-left: 30px;
			}

			.nav_title {
				float: right;
				margin-right: 40px;
			}

			.nav_title a {
				text-decoration: none;
				display: inline-block;
				width: 50px;
				color: black;
			}

			.nav_title a:hover {
				color: white;
			}

			.search {
				height: 250px;
				background-color: blueviolet;
				margin-top: 5px;
				text-align: center;
				line-height: 250px;
			}

			.search input {
				width: 500px;
				height: 40px;
				/* 对齐 */
				vertical-align: middle;
				/* 圆弧 */
				border-radius: 10px;
				border: 0;
				font-size: 20px;
			}

			.search button {
				height: 40px;
				width: 60px;
				/* 对齐 */
				vertical-align: middle;
				/* 圆弧 */
				border-radius: 10px;
				border: 0;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<!-- 导航区域 START -->
			<div class="nav">
				<div class="nav_logo">您好！欢迎来到哈哈</div>
				<div class="nav_title">
					<a href="">首页</a>
					<a href="">登录</a>
					<a href="">注册</a>
					<a href="">退出</a>
				</div>
			</div>
			<!-- 导航区域 END -->
			<!-- 搜索区域 START -->
			<div class="search">
				<input type="text">
				<button><img width="20" height="20" src="img/搜索.png" alt=""></button>
			</div>
			<!-- 搜索区域 END -->
		</div>
	</body>
</html>

案例4：首页导航&搜索区域Bootstrap实现&搭首页框架

 

<html>
	<head>
		<meta charset="utf-8" />
		<!-- 支持手机端 -->
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>案例4：首页导航&搜索区域Bootstrap实现&搭首页框架</title>
		<!-- 1.引入Bootstrap的css依赖 -->
		<link rel="stylesheet" href="css/bootstrap.css">
		<!-- 2.引入jQuery库 在Bootatrap.js之前-->
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<!-- 3.引入Bootstrap.js -->
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.navbar-collapse {
				flex-grow: 0;
			}

			/* .zking{
				border: 1px solid red;
			} */
			/* .lbt{
				width: 600px;
				height: 300px;
			} */
		</style>
	</head>
	<body>
		<!-- navbar-expand-lg -->
		<!-- disabled  禁用按钮 -->
		<div class="container">
			<nav class="navbar navbar-expand-lg navbar-light bg-white">
				<div class="container">
					<a class="navbar-brand" href="#">您好！欢迎来到哈哈</a>
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
						aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
						<span class="navbar-toggler-icon"></span>
					</button>
					<div class="collapse navbar-collapse" id="navbarNav">
						<ul class="navbar-nav">
							<li class="nav-item active">
								<a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">登录</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">注册</a>
							</li>
							<li class="nav-item">
								<a class="nav-link disabled">退出</a>
							</li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
		<!-- jumbotron-fluid  圆角 -->
		<div class="container">
			<!-- 第一行显示 搜索区域 -->
			<div class="row">
				<div class="col-12">
					<div class="jumbotron bg-white" style="margin-top: 10px;">
						<div class="container">
							<form>
								<div class="form-group" style="width: 300px; margin: 0 auto;">
									<div class="input-group mb-3">
										<input type="text" class="form-control" placeholder="请输入需要搜索的内容"
											aria-label="Recipient's username" aria-describedby="button-addon2">
										<div class="input-group-append">
											<button class="btn btn-primary" type="button" id="button-addon2">搜索</button>
										</div>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
			<div class="row" style="margin-top: -20px;">
				<!-- 左3 书籍分类 -->
				<div class="col-md-3 zking">
					<div class="accordion" id="accordionExample" style="text-align: center;">
						<div class="card">
							<div class="card-header" id="headingOne">
					  	<h2 class="mb-0">
									<button class="btn btn-link btn-block text-center" type="button"
										data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
										aria-controls="collapseOne">
										书籍分类
					 			</button>
								</h2>
							</div>

							<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
								data-parent="#accordionExample">
								<div class="card-body">
									青春校园
									<!-- <code>.show</code> class. -->
								</div>
							</div>
							<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
								data-parent="#accordionExample">
								<div class="card-body">
									恐怖悬疑
									<!-- <code>.show</code> class. -->
								</div>
							</div>
							<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
								data-parent="#accordionExample">
								<div class="card-body">
									修仙成魔
									<!-- <code>.show</code> class. -->
								</div>
							</div>
							<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
								data-parent="#accordionExample">
								<div class="card-body">
									修仙成鬼
									<!-- <code>.show</code> class. -->
								</div>
							</div>
							<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
								data-parent="#accordionExample">
								<div class="card-body">
									修仙成精
									<!-- <code>.show</code> class. -->
								</div>
							</div>
							<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
								data-parent="#accordionExample">
								<div class="card-body">
									言情小说
									<!-- <code>.show</code> class. -->
								</div>
							</div>
							<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
								data-parent="#accordionExample">
								<div class="card-body">
									爆笑如雷
									<!-- <code>.show</code> class. -->
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 右9 轮播图+新书上架 -->
				<div class="col-md-9 zking">
					<div class="row">
						<!-- 轮播图 -->
						<div class="col-12 lbt">
							<div id="demo" class="carousel slide" data-ride="carousel" data-interval="1000">

								<!-- 指示符 -->
								<ul class="carousel-indicators">
									<li data-target="#demo" data-slide-to="0" class="active"></li>
									<li data-target="#demo" data-slide-to="1"></li>
									<li data-target="#demo" data-slide-to="2"></li>
								</ul>

								<!-- 轮播图片 -->
								<div class="carousel-inner">
									<div class="carousel-item active">
										<img width="850" height="300" src="img/lb1.png">
									</div>
									<div class="carousel-item">
										<img width="850" height="300" src="img/lb2.jpg">
									</div>
									<div class="carousel-item">
										<img width="850" height="300" src="img/lb3.jpg">
									</div>
								</div>

								<!-- 左右切换按钮 -->
								<a class="carousel-control-prev" href="#demo" data-slide="prev">
							  <span class="carousel-control-prev-icon"></span>
								</a>
								<a class="carousel-control-next" href="#demo" data-slide="next">
									<span class="carousel-control-next-icon"></span>
								</a>

							</div>

						</div>
						<div class="col-12">
							<div class="row">
								<div class="col">
									<p style="background-image: url(img/title_bj.png);background-repeat: no-repeat;border: 1px solid royalblue;background-color: gainsboro;padding-left: 15px;color: aliceblue;">新书上架</p>
								</div>
							</div>
							<div class="row">
								<div class="col-lg-2 col-md-3 col-sm-4 col-6">
									<figure class="figure">
										<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
										<figcaption class="figure-caption">《冷间谍》</figcaption>
									</figure>
								</div>
								<div class="col-lg-2 col-md-3 col-sm-4 col-6">
									<figure class="figure">
										<img src="img/2.png" class="figure-img img-fluid rounded" alt="...">
										<figcaption class="figure-caption">《第一商会》</figcaption>
									</figure>
								</div>
								<div class="col-lg-2 col-md-3 col-sm-4 col-6">
									<figure class="figure">
										<img src="img/3.png" class="figure-img img-fluid rounded" alt="...">
										<figcaption class="figure-caption">《狂人日记》</figcaption>
									</figure>
								</div>
								<div class="col-lg-2 col-md-3 col-sm-4 col-6">
									<figure class="figure">
										<img src="img/4.png" class="figure-img img-fluid rounded" alt="...">
										<figcaption class="figure-caption">《A caption》</figcaption>
									</figure>
								</div>
								<div class="col-lg-2 col-md-3 col-sm-4 col-6">
									<figure class="figure">
										<img src="img/5.png" class="figure-img img-fluid rounded" alt="...">
										<figcaption class="figure-caption">《自动化运维》</figcaption>
									</figure>
								</div>
								<div class="col-lg-2 col-md-3 col-sm-4 col-6">
									<figure class="figure">
										<img src="img/6.png" class="figure-img img-fluid rounded" alt="...">
										<figcaption class="figure-caption">《Java》</figcaption>
									</figure>
								</div>
							</div>
						</div>
						<div class="col-12">
							<div class="row">
								<div class="col">
									<p style="background-image: url(img/title_bj.png);background-repeat: no-repeat;padding-left: 15px;border: 1px solid royalblue;background-color: gainsboro;color: aliceblue;">热门畅销</p>
								</div>
							</div>
							<div class="row">
								<div class="col-lg-2 col-md-3 col-sm-4 col-6">
									<figure class="figure">
										<img src="img/7.png" class="figure-img img-fluid rounded" alt="...">
										<figcaption class="figure-caption">《从入门到精通》</figcaption>
									</figure>
								</div>
								<div class="col-lg-2 col-md-3 col-sm-4 col-6">
									<figure class="figure">
										<img src="img/8.png" class="figure-img img-fluid rounded" alt="...">
										<figcaption class="figure-caption">《时光走了你还在》</figcaption>
									</figure>
								</div>
								<div class="col-lg-2 col-md-3 col-sm-4 col-6">
									<figure class="figure">
										<img src="img/9.png" class="figure-img img-fluid rounded" alt="...">
										<figcaption class="figure-caption">《爱的样子》</figcaption>
									</figure>
								</div>
								<div class="col-lg-2 col-md-3 col-sm-4 col-6">
									<figure class="figure">
										<img src="img/pic_c3.png" class="figure-img img-fluid rounded" alt="...">
										<figcaption class="figure-caption">《奇迹》</figcaption>
									</figure>
								</div>
								<div class="col-lg-2 col-md-3 col-sm-4 col-6">
									<figure class="figure">
										<img src="img/pic_c6.png" class="figure-img img-fluid rounded" alt="...">
										<figcaption class="figure-caption">《舌尖上的中国》</figcaption>
									</figure>
								</div>
								<div class="col-lg-2 col-md-3 col-sm-4 col-6">
									<figure class="figure">
										<img src="img/pic_c10.png" class="figure-img img-fluid rounded" alt="...">
										<figcaption class="figure-caption">《六度人脉》</figcaption>
									</figure>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈蛤
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue v-bind:style 方法传参改变button颜色！
weixin_45189306的博客
04-16 1625
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> ...
java bootstrap框架_Java单体应用 - 常用框架 - 01.Bootstrap - 环境搭建
weixin_36215903的博客
02-19 227
环境搭建请参照如上章节导航进行阅读Bootstrap 安装是非常容易的。本章将讲解如何下载并安装 Bootstrap，讨论 Bootstrap 文件结构，并通过一个实例演示它的用法。您可以通过地址 http://getbootstrap.com/ 下载 Bootstrap 的最新版本。当您点击这个链接时，您将看到如下所示的网页：点击 Download 按钮进入下载页面，如下：如果您使用的是未编译的...
Bootstrap组件——【按钮（预定义样式类、边框颜色、大小、激活和禁用状态 、按钮标签）、按钮组（定义按钮组、工具栏按钮组、大小、嵌套按钮、垂直排列）、下拉菜单（定义下拉菜单、下拉菜单样式）】
m0_69034993的博客
11-07 5004
使用.btn-outline-*类可以没置按钮的边框，*可以从prirnary、secondary、success、danger.warning、info、light和dark中进行选择。Bootstrap提供了btn来定义按钮，btn定义了基本的按钮样式类。Bootstrap提供了.btn-group-lg，.btn-group-sm类作用在.btn-group类的容器，可以控制按钮组下的每个子按钮，实现样式缩放。使用.btn-lg、.btn-sm类样式，可分别实现大规格按钮、小规格按钮的定义。
bootstrap专栏 01.bootstrap简介
Web Python
03-16 55
# 01.引入bootstrap [toc]{type: "ol", level: [3]} ### 引入bootstrap - 设置移动设备优先 ```html <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"> ``` - bootstrap.css ```html <link rel="stylesheet" href="../css/bootstrap.c...
01.Bootstrap入门、CSS样式【栅格系统】
weixin_62356088的博客
04-29 128
目录 1. WWW：What、Why、Where 2 1. 响应式设计(Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机) 2 2. 移动设备有限 2 3. 浏览器支持 2 4. 容易上手 2 1. 企业网站、博客、网站后台之类的网站 2 2. 注意：非电商(电商网站分类很多) 2 2. 环境安装 2 3. Bootstrap CSS 3 3.1. 概览 3 ...
bootstrap java框架_Java单体应用 - 常用框架 - 01.Bootstrap
weixin_42528222的博客
02-27 203
Bootstrap请参照如上章节导航进行阅读Bootstrap 来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。它是一个 CSS/HTML 框架。Bootstrap 提供了优雅的 HTML 和 CSS 规范。Bootstrap 一经推出后颇受欢迎，一直是 GitHub 上的热门开源项目。...
eclipse的tomcat启动，错误: 找不到或无法加载主类 org.apache.catalina.startup.Bootstrap
zhansan的博客
02-21 2108
Could not find or load main class org.apache.catalina.startup.Bootstrap Go to Servers Tab > Double Click on your Server > Open Launch Configuration > Classpath(tab) > Click on User Entries > Add External Jars > Add Boorstrap.jar and tomca
Java单体应用 - 常用框架 - 01.Bootstrap
光束云
02-12 183
原文地址：http://www.work100.net/training/monolithic-frameworks-bootstrap.html 更多教程：光束云 - 免费课程 Bootstrap 序号 文内章节 视频 1 概述 2 阅读对象 3 前置知识 4 为什么使用Bootstrap 5 Bootstrap包的内容 6 参考资源 请参照如...
Eclipse运行Tomcat报错：找不到或无法加载主类 org.apache.catalina.startup.Bootstrap
m0_46652153的博客
12-14 3667
Eclipse运行Tomcat报错：找不到或无法加载主类 org.apache.catalina.startup.Bootstrap 查看了Tomcat目录下的bin目录中bootstrap.jar是存在的，而且在eclipse外可以正常启动。但在eclipse内启动就会报错，可以确定各种配置没有问题。 尝试过重装Tomcat，也不能解决问题。 最后发现可能是workspace目录弄得太乱发生了什么冲突吧。 解决方法： 新建一个干净的目录（你自己随便建一个或者在自己电脑上找一个），然后在eclipse-&
01.Bootstrap 基础教程.rar
09-13
这个“01.Bootstrap基础教程”很可能是为了帮助初学者掌握这个框架的关键概念和使用方法。在本教程中，我们将深入探讨Bootstrap的核心特性，包括网格系统、组件、CSS样式和JavaScript插件。 一、Bootstrap简介 ...
01.Bootstrap简介.rar
08-02
这个名为“01.Bootstrap简介”的压缩包文件包含了对Bootstrap的基本介绍，可能是通过视频（01.Bootstrap简介.mp4）和幻灯片（1.ppt）的形式进行讲解。以下是关于Bootstrap的详尽知识点： 1. **什么是Bootstrap**：...
[Bootstrap 4] 01. Bootstrap 4 课程介绍 (在线课程教学)
08-31
[Bootstrap_4][中文]__01.__Bootstrap_4_課程介紹__(線上課程教學)
04.Bootstrap排版基础01.rar
08-02
本课程“04.Bootstrap排版基础01”将深入探讨Bootstrap的基础知识，帮助初学者快速掌握这一框架的核心概念。 Bootstrap由Twitter开发并开源，它的主要目标是简化网页设计和开发过程，通过预定义的CSS、JavaScript...
Bootstrap_01.pdf
03-26
### Bootstrap自学参考手册知识点概述 #### 一、Bootstrap 响应式布局介绍 1. **简介**： - **响应式布局**：是指一个HTML文档中的CSS与HTML代码能够根据浏览器所使用的设备尺寸的不同，动态地展示不同的效果。这...
05_ Electron 自定义菜单、主进程与渲染进程通信
最新发布
所学所思
08-09 473
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
【Vue3】图片未加载成功前占位
菜就多练
08-08 264
原生img标签可以通过自定义指令解决< template > < img class = " image_item-img " v-preload = " ' loading' " src = " https://xx " alt = " 加载失败 " /> < script setup > import {reactive } from 'vue' // 自定义图片占位 const vPreload = {
社交媒体分享预览图片和内容修改
wangweiscsdn的博客
08-06 225
社交媒体分享链接时的预览图片和内容
Typescript配置文件(tsconfig.json)详解系列六：allowImportingTsExtensions
zzyp1927314的博客
08-05 497
如果不使用的时候，在导入文件的时候需要加上typescript编译后的文件后缀。如果使用了就不能输出编译文件，只能输出声明文件（*.d.ts）。
01.BootStrap -sm -md -lg -xl 区别
06-09
BootStrap 是一个流行的前端框架，它提供了一个响应式的网格系统，可以方便地对不同大小的设备进行布局。其中，-sm，-md，-lg，-xl 是用于设置不同大小的设备的类名后缀。 - -sm 表示小屏幕，例如手机设备，屏幕宽度小于576像素。 - -md 表示中等屏幕，例如平板电脑，屏幕宽度大于等于576像素。 - -lg 表示大屏幕，例如笔记本电脑，屏幕宽度大于等于992像素。 - -xl 表示超大屏幕，例如大型显示器，屏幕宽度大于等于1200像素。 通过将这些类名后缀应用到 BootStrap 的网格系统中，可以实现在不同大小的设备上呈现不同的布局效果，从而提高网站的适应性和用户体验。例如，在小屏幕设备上可以使用 -sm 类名后缀来让网格系统变得更加紧凑，以便更好地适应小屏幕的显示区域。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值