bootstrap案例代码

最新推荐文章于 2024-06-10 21:17:33 发布

三个和尚_

最新推荐文章于 2024-06-10 21:17:33 发布

阅读量4k

点赞数

分类专栏： javascript/jquery/bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/a974986042/article/details/84900760

版权

本文详细介绍了Bootstrap框架在实际项目中的应用，通过具体的案例代码，解析了Bootstrap的网格系统、导航条、按钮、表单等组件的使用方法，帮助开发者快速构建响应式和移动设备优先的网页。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>商城首页</title>

		<!-- 引入Bootstrap核心样式文件 -->
		<link href="../css/bootstrap.css" rel="stylesheet">

		<!-- 引入jQuery核心js文件 -->
		<script src="../js/jquery-1.11.3.min.js"></script>
		<!-- 引入BootStrap核心js文件 -->
		<script src="../js/bootstrap.min.js"></script>
	</head>

	<body>
		<!--logo部分-->
		<div class="container">
			<div class="row">
				<div class="col-lg-4 col-md-4 col-sm-6">
					<img src="../img/logo2.png" />
				</div>
				<div class="col-lg-5 col-md-4 hidden-xs col-sm-6">
					<img src="../img/header.png" />
				</div>
				<div class="col-lg-3 col-md-4 col-sm-12" style="padding-top: 15px;">
					<a href="#">登录</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
			</div>
		</div>

		<!--导航栏-->
		<div class="container" style="margin-top: 10px;">
			<nav class="navbar navbar-inverse">
				<div class="container-fluid">
					<!-- Brand and toggle get grouped for better mobile display -->
					<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="#">首页</a>
					</div>

					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">
							<li class="active">
								<a href="#">手机数码 <span class="sr-only">(current)</span></a>
							</li>
							<li>
								<a href="#">家用电器</a>
							</li>
							<li>
								<a href="#">鞋靴箱包</a>
							</li>
							<li>
								<a href="#">电脑办公</a>
							</li>
							<li>
								<a href="#">孕婴保健</a>
							</li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">所有分类 <

最低0.47元/天解锁文章

三个和尚_

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
bootstrap案例代码

&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;zh-CN&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;!--声明文档兼容模式，表示使用IE浏览器的最新模式--&amp;gt; &
复制链接

扫一扫

专栏目录