使用BootStarp 创建导航栏及图片自适应

最新推荐文章于 2023-07-31 21:10:48 发布
最新推荐文章于 2023-07-31 21:10:48 发布
阅读量1.1k 收藏 4
点赞数
分类专栏： 学习记录 DIY 文章标签： BootStarp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zg97zb/article/details/93162549
版权

最终效果图:

所有代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Bootstrap 101 Template</title>

		<!-- Bootstrap -->
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
		<style type="text/css">
			p {
				width: 100%;
				text-align: center;
				font-size: 12px;
				color: #666;
			}

			.navbar-header img {
				width: 120px;
			}

			.price {
				color: red;
				font-size: 20px;
			}

			.container button {
				background: indianred;
				transition: all ease 1s;
			}

			.container button:hover {
				background: #393;
			}

			.you_line {
				line-height: 50px;
			}

			.my_form {
				width: 600px;
				height: 300px;
				background-color: rgba(255, 255, 255, 0.5);
				padding: 100px 50px;
				margin: 0 auto;
			}

			.my_search {
				background: url(images/banner.jpg) no-repeat;
				background-size: cover;
				padding: 150px 100px;
			}
			.my_button{width: 200px;}
		</style>
	</head>
	<body>
		<!-- 导航-->
		<div class="navbar navbar-default">

			<div class="container-fluid container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
					 aria-expanded="false">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#"><img src="images/logo.png" /></a>
				</div>
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="#">主页</a></li>
						<li><a href="#">餐厅</a></li>
						<li><a href="#">健康</a></li>
						<li><a href="#">话题</a></li>
						<li><a href="#">联系我们</a></li>
					</ul>
				</div>
			</div>
		</div>
		<!-- banner-->
		<div class="container">
			<div class="my_search">
				<form class="form-horizontal my_form">
					<div class="form-group">
						<div class="col-md-12">
							<input type="text" class="form-control center-block" id="inputEmail3" placeholder="请输入餐厅名称">
						</div>
					</div>
					<div class="form-group">
						<div class="col-md-12">
							<input type="text" class="form-control center-block" placeholder="请输入城市">
						</div>
					</div>
					<div>
						<button type="submit" class="btn btn-default center-block glyphicon glyphicon-search my_button">搜索</button>
					</div>
					
				</form>
			</div>
		</div>
		<!-- 热销商品-->
		<div class="container">
			<div class="row">
				<div class="col-sm-4">
					<h3>米西奈斯煎饼</h3>
					<img src="images/1.jpg" class="center-block img-responsive img-rounded" alt="Responsive image" />
					<div class="you_line">
						<span class="glyphicon glyphicon-thumbs-up" style="color:#393">有两种口味可供选择</span>
					</div>
					<button class="btn btn-default  btn-block">添加到购物车</button>
					<h3 class="price">一口价￥45.0</h3>
				</div>
				<div class="col-sm-4">
					<h3>米西奈斯煎饼</h3>
					<img src="images/1.jpg" class="center-block img-responsive img-rounded" alt="Responsive image" />
					<div class="you_line">
						<span class="glyphicon glyphicon-thumbs-up" style="color:#393">有两种口味可供选择</span>
					</div>
					<button class="btn btn-default  btn-block">添加到购物车</button>
					<h3 class="price">一口价￥45.0</h3>
				</div>
				<div class="col-sm-4">
					<h3>米西奈斯煎饼</h3>
					<img src="images/1.jpg" class="center-block img-responsive img-rounded" alt="Responsive image" />
					<div class="you_line">
						<span class="glyphicon glyphicon-thumbs-up" style="color:#393">有两种口味可供选择</span>
					</div>
					<button class="btn btn-default  btn-block">添加到购物车</button>
					<h3 class="price">一口价￥45.0</h3>
				</div>
			</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
	</body>
</html>

所有代码需联网使用

所有代码需联网使用

所有代码需联网使用

效果图:

上代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
 
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
	<style type="text/css">
		 p{ width:100%; text-align:center; font-size:12px; color:#666; }	
		 .navbar-header img{width:120px;}
		 .price{color: red;font-size: 20px;}
		 .container button{background: indianred;transition: all ease 1s;}
		 .container button:hover{background: #393;}
		 .you_line{ line-height: 50px;}
	</style>
	</head>
	<body>
		<div class="navbar navbar-default">
			<div class="container-fluid">
			 <div class="navbar-header">
			  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			  </button>
			  <a class="navbar-brand" href="#"><img src="images/logo.png" /></a>
			</div>
			  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				  <ul class="nav navbar-nav">
					<li ><a href="#">主页</a></li>
					<li ><a href="#">餐厅</a></li>
					<li ><a href="#">Link3</a></li>
					<li ><a href="#">Link4</a></li>
					<li ><a href="#">Link5</a></li>
					<li ><a href="#">Link6</a></li>
				  </ul>
			</div>
		</div>
	</div>
		<div class="container">
			<div class="row">
			<div class="col-sm-4">
				<h3>米西奈斯煎饼</h3>
				<img src="images/1.jpg" class="img-responsive img-rounded" alt="Responsive image"/>
				<div class="you_line">
					<span class="glyphicon glyphicon-thumbs-up" style="color:#393">有两种口味可供选择</span>
				</div>
				<button class="btn btn-default  btn-block">添加到购物车</button>
				<h3 class="price">一口价￥45.0</h3>
			</div>
			<div class="col-sm-4">
				<h3>米西奈斯煎饼</h3>
				<img src="images/1.jpg" class="img-responsive img-rounded" alt="Responsive image"/>
				<div class="you_line">
					<span class="glyphicon glyphicon-thumbs-up" style="color:#393">有两种口味可供选择</span>
				</div>
				<button class="btn btn-default  btn-block">添加到购物车</button>
				<h3 class="price">一口价￥45.0</h3>
			</div>
			<div class="col-sm-4">
				<h3>米西奈斯煎饼</h3>
				<img src="images/1.jpg" class="img-responsive img-rounded" alt="Responsive image"/>
				<div class="you_line">
					<span class="glyphicon glyphicon-thumbs-up" style="color:#393">有两种口味可供选择</span>
				</div>
				<button class="btn btn-default  btn-block">添加到购物车</button>
				<h3 class="price">一口价￥45.0</h3>
			</div>
		</div>
			
		</div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
	</body>
</html>

 

end-less
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap实现渐变顶部固定自适应导航栏
11-29
具体代码如下所示： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <link href="<%=path%>/css/style.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap
bootstrap之导航栏
qq_39658827的博客
11-16 1214
之前一直在菜鸟教程上学bootstrap，貌似懂了，但又没懂，因为上面的教程不会告诉你每个类的作用，以及结构排版原因，更像是例子给你，照做就好，至于能理解多少就看你个人了，本人愚钝，遂去慕课上看视频，终于才懂了些。 响应式导航栏： 先放图： 电脑全部展开页面： 手机关闭页面： 手机展开页面： <nav class="navbar navbar...
4.模板的继承及Bootstrap实现导航条
weixin_34161083的博客
01-12 809
在建设一个网站的时候，不同的页面有很多元素是一样的，比如导航条、侧边栏等，我们可以使用模板的继承，避免重复编写html代码。现在我们打算实现一个在网页上方的导航条，并在所有的页面中继承这个导航条。导航条的建立，我们直接使用Bootstrap提供的如下导航条的样式。 但在使用Bootstrap的导航条样式之前，需要先引用Bootstrap...
[bootstrap] 插入图标
GYK0812的博客
10-25 1015
<!--使用图标需要注意： 1.图标对应的类必须放在不含文本的span标签内 2.将这个span嵌套在其他元素中使用--> 效果图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal...
如何使用Flask-Bootstrap和Font Awesome来添加样式和图标到Flask应用程序
2301_78316786的博客
07-31 312
当你想要给自己的Flask应用程序添加一些样式和图标，Flask-Bootstrap和Font Awesome是非常棒的工具。在这个例子中，我们将Bootstrap和Font Awesome的静态文件链接到了我们的模板文件中。在这个例子中，我们使用了Bootstrap的样式来创建一个导航栏和一个按钮，并使用Font Awesome的图标来在按钮上添加一个电话图标。这样，你就可以在你的模板中使用Bootstrap的样式和Font Awesome的图标了。首先，你需要将它们添加到你的Flask应用程序中。
bootstrap----导航栏 图片布局
sunnyboysix的博客
11-29 6015
bootstrap----导航栏 图片布局
bootstrap 常用导航菜单样式
weixin_45997469的博客
04-20 1775
bootstrap 常用导航菜单样式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 基本的胶囊式导航菜单</title> <link rel="stylesheet" href="https://cdn.st...
Bootstrap自适应导航栏
热门推荐
sunqian_happy的博客
01-11 4万+
导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。 默认的导航栏 1、向 标签添加 class .navbar、.navbar-default。 2、向上面的元素添加 role="navigation"，有助于增加可访问性。 3、向 元素添加一个标题 cla
bootstrap 响应式导航条（navigation）
08-23 2371
<!--bootstrap navigation响应式导航栏--><nav class="navbar navbar-default"> <div class="container-fluid"> <!--Brand and toggle get grouped for better mobile display--> ...
前端框架之bootstrap
ogog123的博客
08-12 849
一、bootstrap按钮  1、按钮 按钮button按钮按钮按钮按钮按钮a标签按钮 2、按钮组 button按钮 button按钮 button按钮 button按钮 button按钮 button按钮 3、通栏按钮 通栏按钮 4、通栏按钮组 a、通栏按钮组，如果用input标签或者button标签，需要将它用btn-group
23种bootstrap导航菜单布局
01-08
一款基于Bootstrap的导航菜单布局设计jQuery插件。该插件集成了23种Bootstrap导航菜单效果，有下拉菜单，大型菜单，侧边栏菜单，购物车菜单等，可以满足大部分网页导航菜单设计的需求。
Bootstrap-html渐变顶部固定自适应导航栏
12-12
web前端开发例子，基于Bootstrap样式实现的html渐变顶部固定自适应导航栏，效果很不错！网上搜集，供参考学习。
bootstrap4实现侧边导航栏带隐藏按钮
12-09
用bootstrap4实现侧边导航栏并且带隐藏按钮。效果就是，点击按钮侧边导航栏出现，再点击消失。不用bootstrap也可以实现
bootstrap实现响应式自适应导航栏，并实现平滑滚动
07-11
利用bootstrap和jQuery制作的一个响应式导航栏，即能够监听页面滚动事件，当页面滚动到页面某位置时导航栏会自动发生变化。同时点击导航栏滚动时利用简单的jQuery实现了平滑滚动。而且能自适应屏幕大小的变化，监听...
通过cdn引入npm包并使用
zg97zb的博客
05-23 2615
最近公司要做一个简单的小系统，要求要轻量，样式可替换并易于后期线上维护。经过一番激烈的讨论采用了freemark+vue.js+elementui进行开发。 freemarker是一种类似与jsp的一种模板引擎，他不允许像jsp一样在视图层编写大量的逻辑代码。这样就能强制将mvc中的v分离出来。 然后是vue+elementui这个组合一般都存在于vue-cli工程化场景中。但是这种工程化场景不适合我们后期的维护，因此选择通过cdn的方式引入项目。 根据elementui官网的提示可以很快地创建一个d
警告: com.mchange.v2.async.ThreadPoolAsynchronousRunner$DeadlockDetector@21eb3f -- APPARENT DEADLOCK!!
zg97zb的博客
12-31 2233
警告: com.mchange.v2.async.ThreadPoolAsynchronousRunner$DeadlockDetector@21eb3f -- APPARENT DEADLOCK!!! Creating emergency threads for unassigned pending tasks! 2013-7-26 10:16:25 com.mchange.v2.async.T...
VS-Code 使用RemoteSSH
zg97zb的博客
03-12 1949
之前在服务器上修改代码只能通过vi/vim 文本编辑器，但是由于更改的文件太大不方便编码于是乎发现一款插件可以通过客户机的编辑器远程连接服务器并可以进行编码。 1、准备 首先需要下载vsCode编辑器，并在插件市场里安装remoteSSH 安装完成之后进行ssh链接远程服务器 如果你是通过私钥链接服务器需要修改config填写你的ssh私钥路径 Host 主机名 #可自定义 HostName 远程主机的ip或者网址 Port 服务器开放ssh的端口 User 你的服务器用..
Arrays.sort()的使用和原理
zg97zb的博客
12-30 1770
Java的Arrays类中有一个sort()方法，该方法是Arrays类的静态方法，在需要对数组进行排序时，非常的好用。 jdk中的Arrays.sort(）的实现是通过所谓的双轴快排的算法 1、Arrays.sort(int[] a) 这种形式是对一个数组的所有元素进行排序，并且是按从小到大的顺序。 2、Arrays.sort(int[] a, int fromIndex, int to...
bootstrap自适应导航栏
最新发布
12-30
在Bootstrap中，我们可以使用类名"navbar"和"navbar-expand"来创建一个自适应的导航栏。首先，我们需要一个导航栏的容器，可以使用"navbar"类来创建。然后，我们可以使用"navbar-expand"类来指定导航栏的展开方式。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值