bootstrap网页排版的优化

最新推荐文章于 2024-03-17 14:23:24 发布
最新推荐文章于 2024-03-17 14:23:24 发布
阅读量594 收藏 3
点赞数 2
分类专栏： bootstrap 文章标签： bootstrap javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67235801/article/details/124692947
版权

今天是针对于上一次的网页排版进行优化，在界面上增加了一些组件，这些组件都是可以在bootstrap中找到的。不知道上期写了什么的话，可以点击下面的链接看上期的内容。

使用bootstrap排版_筱X的博客-CSDN博客bootstrap的使用以及主界面和增加界面的制作https://blog.csdn.net/weixin_67235801/article/details/124639348?spm=1001.2014.3001.5501

目录

一、优化的部分

二、目录展示

三、代码展示

主页面：index.jsp

增加界面：insert.jsp

一、优化的部分

1.点击商品增加直接弹出增加界面，页面不进行跳转

2.点击登录从左侧弹出菜单 

 

3.点击购物车从左侧弹出购物车，可直接在首页查看购物车的物品

 

二、目录展示

 

三、代码展示

主页面：index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery-3.3.1.js"></script>
<link rel="stylesheet"
	href="bootstrap-5.0.0-beta3-dist/css/bootstrap.css">
<script src="bootstrap-5.0.0-beta3-dist/js/bootstrap.js"></script>
<style>
.carousel-item img {
	height: 350px;
	height: 350px;
	background: no-repeat center/cover;
}

.carousel-caption {
	color: white !important;
}
</style>
</head>
<body>
	<!-- 导航栏 -->
	<nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-3">
		<div class="container-fluid">
			<a class="navbar-brand" href="index.html"> 天天商城 </a>
			<div class="collapse navbar-collapse" id="navbarNav">
				<ul class="navbar-nav">
					<li class="nav-item">
						<button class="nav-link btn btn-primary" data-bs-toggle="modal"
							data-bs-target="#exampleModal">商品添加</button>
					</li>
					<li class="nav-item dropdown">
						<button class="nav-link dropdown-toggle btn btn-primary"
							id="navbarDropdown" data-bs-toggle="dropdown">我的</button>
						<ul class="dropdown-menu">
							<li><a class="dropdown-item" data-bs-toggle="offcanvas"
								href="#loginCanvas">登录</a></li>
							<li><a class="dropdown-item" data-bs-toggle="offcanvas"
								href="#carCanvas">购物车</a></li>
						</ul>
					</li>
				</ul>
			</div>
			<button class="navbar-toggler" type="button"
				data-bs-toggle="collapse" data-bs-target="#navbarNav">
				<span class="navbar-toggler-icon"></span>
			</button>
		</div>
	</nav>
	<%--容器--%>
	<div class="container">
		<%--轮播图--%>
		<div id="goodsCarousel" class="carousel carousel-dark slide mb-5"
			data-bs-ride="carousel" data-bs-interval="1500">
			<div class="carousel-indicators">
				<button type="button" data-bs-target="#goodsCarousel"
					data-bs-slide-to="0" class="active"></button>
				<button type="button" data-bs-target="#goodsCarousel"
					data-bs-slide-to="1"></button>
				<button type="button" data-bs-target="#goodsCarousel"
					data-bs-slide-to="2"></button>
			</div>
			<div class="carousel-inner">
				<div class="carousel-item active">
					<img src="images/1.jpg" class="d-block w-100">
					<div class="carousel-caption d-none d-md-block">
						<h1>欲购从速</h1>
						<p>Some representative placeholder content for the third
							slide.</p>
					</div>
				</div>
				<div class="carousel-item">
					<img src="images/2.jpg" class="d-block w-100">
					<div class="carousel-caption d-none d-md-block">
						<h1>欲购从速</h1>
						<p>Some representative placeholder content for the third
							slide.</p>
					</div>
				</div>
				<div class="carousel-item">
					<img src="images/3.jpg" class="d-block w-100">
					<div class="carousel-caption d-none d-md-block">
						<h1>欲购从速</h1>
						<p>Some representative placeholder content for the third
							slide.</p>
					</div>
				</div>
			</div>
			<button class="carousel-control-prev" type="button"
				data-bs-target="#goodsCarousel" data-bs-slide="prev">
				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
				<span class="visually-hidden">Previous</span>
			</button>
			<button class="carousel-control-next" type="button"
				data-bs-target="#goodsCarousel" data-bs-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="visually-hidden">Next</span>
			</button>
		</div>
		<div class="row">
			<div class="col-md-2">
				<div class="list-group">
					<a href="#" class="list-group-item list-group-item-action active">
						The current link item </a> 
						<a href="#"
						class="list-group-item list-group-item-action">A second link
						item</a> 
						<a href="#" class="list-group-item list-group-item-action">A
						third link item</a> 
						<a href="#"
						class="list-group-item list-group-item-action">A fourth link
						item</a>
				</div>
			</div>
			<div class="row col-md-10">
				<ul class="nav nav-tabs mb-3" id="myTab">
					<li class="nav-item">
						<button class="nav-link active" id="home-tab" data-bs-toggle="tab"
							data-bs-target="#home" type="button">秒杀商品</button>
					</li>
					<li class="nav-item">
						<button class="nav-link" id="profile-tab" data-bs-toggle="tab"
							data-bs-target="#profile" type="button">热销商品</button>
					</li>
					<li class="nav-item">
						<button class="nav-link" id="contact-tab" data-bs-toggle="tab"
							data-bs-target="#contact" type="button">月度榜单</button>
					</li>
				</ul>
				<div class="tab-content" id="myTabContent">
					<div class="tab-pane fade show active" id="home">
						<%--商品网格显示--%>
						<div class="row">
							<%--一行显示4个商品 每个card占用三格--%>
							<div class="card col-md-3 mb-2">
								<img src="images/4.jpeg" class="card-img-top" alt="">
								<div class="card-body">
									<h5 class="card-title">可爱手办</h5>
									<p class="card-text">邻家青梅</p>
									<div class="btn-group" role="group">
										<button type="button" class="btn btn-primary">🔍</button>
										<button type="button" class="btn btn-warning">🛒</button>
										<button type="button" class="btn btn-danger">🙅‍</button>
									</div>
								</div>
							</div>
							<div class="card col-md-3 mb-2">
								<img src="images/4.jpeg" class="card-img-top" alt="">
								<div class="card-body">
									<h5 class="card-title">可爱手办</h5>
									<p class="card-text">邻家青梅</p>
									<div class="btn-group" role="group">
										<button type="button" class="btn btn-primary">🔍</button>
										<button type="button" class="btn btn-warning">🛒</button>
										<button type="button" class="btn btn-danger">🙅‍</button>
									</div>
								</div>
							</div>
							<div class="card col-md-3 mb-2">
								<img src="images/4.jpeg" class="card-img-top" alt="">
								<div class="card-body">
									<h5 class="card-title">可爱手办</h5>
									<p class="card-text">邻家青梅</p>
									<div class="btn-group" role="group">
										<button type="button" class="btn btn-primary">🔍</button>
										<button type="button" class="btn btn-warning">🛒</button>
										<button type="button" class="btn btn-danger">🙅‍</button>
									</div>
								</div>
							</div>
							<div class="card col-md-3 mb-2">
								<img src="images/4.jpeg" class="card-img-top" alt="">
								<div class="card-body">
									<h5 class="card-title">可爱手办</h5>
									<p class="card-text">邻家青梅</p>
									<div class="btn-group" role="group">
										<button type="button" class="btn btn-primary">🔍</button>
										<button type="button" class="btn btn-warning">🛒</button>
										<button type="button" class="btn btn-danger">🙅‍</button>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="tab-pane fade" id="profile">
						<div class="row">
							<%--一行显示4个商品 每个card占用三格--%>
							<div class="card col-md-3 mb-2">
								<img src="images/4.jpeg" class="card-img-top" alt="">
								<div class="card-body">
									<h5 class="card-title">可爱手办</h5>
									<p class="card-text">邻家青梅</p>
									<div class="btn-group" role="group">
										<button type="button" class="btn btn-primary">🔍</button>
										<button type="button" class="btn btn-warning">🛒</button>
										<button type="button" class="btn btn-danger">🙅‍</button>
									</div>
								</div>
							</div>
							<div class="card col-md-3 mb-2">
								<img src="images/4.jpeg" class="card-img-top" alt="">
								<div class="card-body">
									<h5 class="card-title">可爱手办</h5>
									<p class="card-text">邻家青梅</p>
									<div class="btn-group" role="group">
										<button type="button" class="btn btn-primary">🔍</button>
										<button type="button" class="btn btn-warning">🛒</button>
										<button type="button" class="btn btn-danger">🙅‍</button>
									</div>
								</div>
							</div>
							<div class="card col-md-3 mb-2">
								<img src="images/4.jpeg" class="card-img-top" alt="">
								<div class="card-body">
									<h5 class="card-title">可爱手办</h5>
									<p class="card-text">邻家青梅</p>
									<div class="btn-group" role="group">
										<button type="button" class="btn btn-primary">🔍</button>
										<button type="button" class="btn btn-warning">🛒</button>
										<button type="button" class="btn btn-danger">🙅‍</button>
									</div>
								</div>
							</div>
							<div class="card col-md-3 mb-2">
								<img src="images/4.jpeg" class="card-img-top" alt="">
								<div class="card-body">
									<h5 class="card-title">可爱手办</h5>
									<p class="card-text">邻家青梅</p>
									<div class="btn-group" role="group">
										<button type="button" class="btn btn-primary">🔍</button>
										<button type="button" class="btn btn-warning">🛒</button>
										<button type="button" class="btn btn-danger">🙅‍</button>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="tab-pane fade" id="contact">
						<div class="row">
							<%--一行显示4个商品 每个card占用三格--%>
							<div class="card col-md-3 mb-2">
								<img src="images/4.jpeg" class="card-img-top" alt="">
								<div class="card-body">
									<h5 class="card-title">可爱手办</h5>
									<p class="card-text">邻家青梅</p>
									<div class="btn-group" role="group">
										<button type="button" class="btn btn-primary">🔍</button>
										<button type="button" class="btn btn-warning">🛒</button>
										<button type="button" class="btn btn-danger">🙅‍</button>
									</div>
								</div>
							</div>
							<div class="card col-md-3 mb-2">
								<img src="images/4.jpeg" class="card-img-top" alt="">
								<div class="card-body">
									<h5 class="card-title">可爱手办</h5>
									<p class="card-text">邻家青梅</p>
									<div class="btn-group" role="group">
										<button type="button" class="btn btn-primary">🔍</button>
										<button type="button" class="btn btn-warning">🛒</button>
										<button type="button" class="btn btn-danger">🙅‍</button>
									</div>
								</div>
							</div>
							<div class="card col-md-3 mb-2">
								<img src="images/4.jpeg" class="card-img-top" alt="">
								<div class="card-body">
									<h5 class="card-title">可爱手办</h5>
									<p class="card-text">邻家青梅</p>
									<div class="btn-group" role="group">
										<button type="button" class="btn btn-primary">🔍</button>
										<button type="button" class="btn btn-warning">🛒</button>
										<button type="button" class="btn btn-danger">🙅‍</button>
									</div>
								</div>
							</div>
							<div class="card col-md-3 mb-2">
								<img src="images/4.jpeg" class="card-img-top" alt="">
								<div class="card-body">
									<h5 class="card-title">可爱手办</h5>
									<p class="card-text">邻家青梅</p>
									<div class="btn-group" role="group">
										<button type="button" class="btn btn-primary">🔍</button>
										<button type="button" class="btn btn-warning">🛒</button>
										<button type="button" class="btn btn-danger">🙅‍</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="offcanvas offcanvas-start" tabindex="-1" id="loginCanvas">
		<div class="offcanvas-header">
			<h5 class="offcanvas-title">用户登录</h5>
			<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
		</div>
		<div class="offcanvas-body">
			<h1>这里是登录表单</h1>
		</div>
	</div>
	<div class="offcanvas offcanvas-start" tabindex="-1" id="carCanvas">
		<div class="offcanvas-header">
			<h5 class="offcanvas-title">我的购物车</h5>
			<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
		</div>
		<div class="offcanvas-body">
			<h1>这里是购物车</h1>
		</div>
	</div>
	<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static"
		data-bs-keyboard="false" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="staticBackdropLabel">添加购物车</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal"
						aria-label="Close"></button>
				</div>
				<div class="modal-body"></div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary"
						data-bs-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" onclick="addCar()">添加</button>
				</div>
			</div>
		</div>
	</div>
	<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
		<div id="liveToast" class="toast" role="alert" aria-live="assertive"
			aria-atomic="true">
			<div class="toast-header">
				<strong class="me-auto">天天商城</strong> <small>刚刚</small>
				<button type="button" class="btn-close" data-bs-dismiss="toast"
					aria-label="Close"></button>
			</div>
			<div class="toast-body">添加购物车成功</div>
		</div>
	</div>
	<div id="exampleModal" class="modal fade" data-bs-backdrop="static"
		data-bs-keyboard="false" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">添加商品</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal"
						aria-label="Close"></button>
				</div>
				<div class="modal-body">
					<form action="">
						<div class="mb-3">
							<label for="name" class="form-label">商品名称</label> <input
								type="text" class="form-control" id="name" placeholder="请输入商品名称">
						</div>
						<div class="mb-3">
							<label for="topic" class="form-label">商品名称</label> <select
								id="topic" class="form-select">
								<option value="1">One</option>
								<option value="2">Two</option>
								<option value="3">Three</option>
							</select>
						</div>
						<div class="mb-3">
							<label for="price" class="form-label">商品价格:￥<span
								id="showPrice">123</span></label> <input type="range" class="form-range"
								id="price" max="1000" min="1">
						</div>
						<div class="mb-3">
							<label for="stock" class="form-label">商品库存: <span
								id="showStock">123</span></label> <input type="range" class="form-range"
								id="stock" max="100" min="1">
						</div>
						<div class="mb-3">
							<label for="describe" class="form-label">商品描述</label>
							<textarea rows="3" class="form-control" id="describe"
								placeholder="请输入商品描述"></textarea>
						</div>
						<div class="mb-3 form-check form-switch">
							<input class="form-check-input" type="checkbox" role="switch"
								id="disabled"> <label class="form-check-label"
								for="disabled">商品是否可用</label>
						</div>
						<div class="mb-3">
							<button type="submit" class="btn btn-outline-primary">提交</button>
							<button type="reset" class="btn btn-outline-danger">重置</button>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary"
						data-bs-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary">添加</button>
				</div>
			</div>
		</div>
	</div>
	<script>

    const myModal = new bootstrap.Modal($("#staticBackdrop")[0])

    $(() => {
        $(".carousel-item img").each((i, e) => {
            $(e).css("background-image", "url(images/t" + (i + 1) + ".jpg)")
        })
    })

    function addCar() {
        myModal.toggle()
        new bootstrap.Toast($("#liveToast")[0]).show()
    }
</script>
</body>
</html>

增加界面：insert.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <title>Title</title>
    <!-- Jquery JS -->
    <script src="../js/jquery-3.3.1.js"></script>
    <!-- Bootstrap CSS -->
    <link href="../bootstrap-5.0.0-beta3-dist/css/bootstrap.css" rel="stylesheet">
    <!-- Bootstrap JS -->
    <script src="../bootstrap-5.0.0-beta3-dist/js/bootstrap.js"></script>
</head>
<body class="container">
<form action="">
    <div class="mb-3">
        <label for="name" class="form-label">商品名称</label>
        <input type="text" class="form-control" id="name" placeholder="请输入商品名称">
    </div>
    <div class="mb-3">
        <label for="topic" class="form-label">商品名称</label>
        <select id="topic" class="form-select">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </div>
    <div class="mb-3">
        <label for="price" class="form-label">商品价格:￥<span id="showPrice">123</span></label>
        <input type="range" class="form-range" id="price" max="1000" min="1">
    </div>
    <div class="mb-3">
        <label for="stock" class="form-label">商品库存: <span id="showStock">123</span></label>
        <input type="range" class="form-range" id="stock" max="100" min="1">
    </div>
    <div class="mb-3">
        <label for="describe" class="form-label">商品描述</label>
        <textarea rows="3" class="form-control" id="describe" placeholder="请输入商品描述"></textarea>
    </div>
    <div class="mb-3 form-check form-switch">
        <input class="form-check-input" type="checkbox" role="switch" id="disabled">
        <label class="form-check-label" for="disabled">商品是否可用</label>
    </div>
    <div class="mb-3">
        <button type="submit" class="btn btn-outline-primary">提交</button>
        <button type="reset" class="btn btn-outline-danger">重置</button>
    </div>
</form>
</body>
</html>

界面优化就到这啦，想使用更多好看的组件可以看上一期的分享，可点击bootstrap链接进入官网，查看更多组件。

筱☆
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap-4-login-page：Bootstrap 4登录页面模板
01-30
我的登入 Bootstrap 4登录页面模板 我的登录名是Bootstrap 4登录页代码段，您可以根据需要使用它，并且可以免费用于个人或商业用途。 安装 让我们轻松一点！ 只需下载此模板，然后在您的项目中使用它即可。 演示版 产品特点 Bootstrap 4.1.3 Bootstrap 4验证 W3C验证 jQuery 1.12.4 包括4页（登录，注册，忘记密码，重置密码） 干净的设计 显示/隐藏密码 易于使用 跨浏览器兼容性（Chrome，Firefox，Opera，IE11，Safari） 全面响应 和更多 ... 报告一些错误 发现错误？ 请，我们将一起解决此以获得更好的模板。 贡献 始终欢迎并推荐贡献！ 方法如下： 分叉存储库（）。 克隆到您的机器上git clone 进行更改 创建请求请求 变更日志 2017年8月29日 添加 W3C验证 Bootstrap 4验证表 更新 Bootstrap 4版本 2017年8月29日 初始发行 寻找免费的管理模板？ 斯蒂斯拉在等你。 。 给我买杯咖啡 支持我:) 执照
Bootstrap系列之排版
老__L的博客
05-25 908
使用包含的实用程序类从Bootstrap 3重新创建小的次要标题文本。
ttkbootstrap界面美化系列之简介(一)
最新发布
ftzchina的博客
03-17 1181
相信很多同学用Python进行界面设计第一个用到的就是Tkinter，Tkinter是Python的一个标准接口，用于创建GUI（图形用户界面）应用程序。它是Tcl/Tk的封装，Tkinter的名称来源于Tk技术工具包(ToolKit)的首字母缩写。Tkinter的历史可以追溯到1989年，当时为了让程序员能更容易地创建图形用户界面，开发了Tk工具包。Tkinter是Python语言的一部分，它的主要优势在于它的简单易用，并且可以在许多平台上使用，包括Windows，Mac OS和大多数Linux发行版。
bootstrap排版样式
涂涂
07-18 505
学习笔记 1.页面主体 Bootstrap 将全局font-size 设置为14px，line-height 行高设置为1.428(即 20px)；段落元素被设置等于1/2 行高(即10px)；颜色被设置为#333。 //创建包含段落突出的文本 Bootstrap 框架 Bootstrap 框架 支持普通内联元素定义class=(.h1 ~ h6)来实现相同的功能。即span也具有了
使用bootstrap排版
weixin_67235801的博客
05-07 999
bootstrap的使用以及主界面和增加界面的制作
Bootstrap排版
Peak Xin's Blog
06-23 881
标题（一） Bootstrap和普通的HTML页面一样，定义标题都是使用标签到,只不过Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样，具体定义的规则可以如下表所示： 通过比较可以发现，Bootstrap标题样式进行了以下显著的优化重置： 1、重新设置了margin-top和margin-bottom的值，  h1~h3重置后的值都是20p
bootstrap 免费登陆页面、登陆表单（共三款）
11-09
bootstrap-login-forms.zip bootstrap-login-forms.zip bootstrap 免费登陆页面、登陆表单（共三款）
boostrap 轮播 carousel(旋转木马)
往前的娘娘
06-28 7905
效果： 图片轮播 准备工作：用js生成图片这里用的是placeholder.js 网址为：https://github.com/hustcc/placeholder.js.git 在gist 获取 placeholder.js引入工程中 总结： 1、class="carousel slide" 表示轮播，有滑动
Bootstrap 5-轮播
m0_73839298的博客
09-27 1161
轮播图标题，使用carousel-caption，其中h标签是HTML标签的标题标签，h1~h6，h1最大，h6最小，用来表示轮播图的标题，其中p标签是HTML的段落标签，用来表示轮播图的段落文本内容。轮播图的指标/点中的active类：活动，注意！滑块在轮播图的位置，即滑块的索引，使用data-bs-slide-to=“”从0开始，比如3个图片就使用3个索引，0，1，2，以此类推。向前/向后翻页的图标，左/右，图标形状是向左/右的箭头，使用carousel-control-prev/next-icom。
BootStrap.网页主界面优化
yifei_345678的博客
05-04 577
优化了上一期文章中的界面哦(●'◡'●)
Bootstrap03(界面优化)
weixin_65474399的博客
05-10 395
前言： 前两篇文章给大家介绍了一下bootstrap的一些基本使用方法，今天就接着前面的内容继续来给大家介绍用bootstrap来进行的界面优化。 目录 前言： 一，效果图： 菜单栏和分类的优化： 导航栏的优化： 二，代码详情： insert.html： index.html: 总结： 一，效果图： 菜单栏和分类的优化： 导航栏的优化： 新增了我的功能，可以实现登录和购物车界面的弹出 增加界面由新的界面变成了主界面弹出： 二，代码详情： i...
第二章之Bootstrap 页面排版样式
10-22
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。本文给大家介绍Bootstrap 页面排版样式的相关知识，希望对大家有所帮助！
学习使用Bootstrap页面排版样式
08-30
主要教大家学习使用Bootstrap页面排版样式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap汽车网页成品模板
03-12
bootstrap汽车网页成品模板html+css+js，bootstrap汽车网页成品模板html+css+js，bootstrap汽车网页成品模板html+css+js，bootstrap汽车网页成品模板html+css+js，bootstrap汽车网页成品模板html+css+js，bootstrap...
第五篇Bootstrap 排版
09-02
使用bootstrap的排版特性可以创建标题，段落，列表及其它内联元素。本文重点给大家介绍Bootstrap 排版 知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
10套bootstrap网页模板
03-01
自从有了bootstrap后，不必学太多美工技术，码农也可以做出漂亮网页了，稍一用力，网页怎么就这么好看了呢？
Django框架使用Bootstrap美化登陆注册页面
weixin_39098318的博客
04-02 4319
背景 昨天写的登陆注册页面只把功能实现完，还没有对页面进行美化，那么今天我们就完成昨天的任务！ 一、思路 使用现在比较流行的前端框架Bootstrap，外加自己写的一点点css来进行美化！ 一般都是下载框架，导入，引用，美化。 二、实现 1.下载Bootstrap4 https://v4.bootcss.com/docs/getting-started/download/ 由于Bootstrap4...
带老弟做个实时排行榜
dotNET跨平台
06-27 409
阿巴可懂的实时排行榜设计和实现思路。大家好，我是鱼皮，暑假快到了，我的老弟小阿巴听说我家有很多好康的，就跑来找我玩。结果我摆出了几个以前开发过的小系统，准备在这段时间带着小阿巴多做些作品，...
bootstrap-table 排序 =====及分页排序
--空白格--的博客
05-22 868
bootstrap-table 排序问题 js代码 $("#table").bootstrapTable({ method: "get", url: "url", dataType: "json", dataField: "rows", striped: true, undefinedText: "", pagination: true, //是否分页 pageNumber: 1, pageSize: 5, pageList: [5], paginationPre
使用 html bootstrap js
06-06
好的，使用HTML、Bootstrap和JS技术制作网页可以实现响应式布局和丰富的交互效果。以下是一个简单的制作流程： 1. 网站规划：确定网站的结构和内容，制作脑图或流程图，明确页面的数量和排版方式； 2. 网站设计：...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值