Bootstrap框架的入门学习
- 1. Bootstrap 概述
- 2. Bootstrap 环境配置
- 3. Bootstrap 基本使用
- 4. Bootstrap 可视化布局
- 5. 测试 demo
1. Bootstrap 概述
Bootstrap是一个前端框架,由Twitter开发,非常受欢迎。
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。
相当于半成品;开发人员基于框架可以进行二次开发,大大的节省开发人员的开发时间。
特点:
- 定义了很多的css样式和js插件,直接可以使用这些样式和插件得到丰富的 页面效果
- 支持响应式布局,写一套页面就可以在不同分辨率的设备上有比较好的效果。
2. Bootstrap 环境配置
- 下载 Bootstrap:https://v3.bootcss/
- 创建 bootstrap 目录,导入 css/ fonts/ js/ :
- 导入 jQuery 库:bootstrap/js/jquery-3.5.1.min.js
- 将资源导入到页面:
Bootstrap 样式文件:bootstrap/css/bootstrap.min.css
jQuery 类库文件:bootstrap/js/jquery-3.5.1.min.js
Bootstrap 类库文件:bootstrap/js/bootstrap.min.js
<link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/bootstrap/js/jquery-3.5.1.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
3. Bootstrap 基本使用
样式
:https://v3.bootcss/css/
全局CSS样式/格栅系统/排版/表格/表单/按钮/图片/辅助样式等组件
:https://v3.bootcss/components/
下拉菜单/导航条/分页/标签/徽章/巨幕/页头/缩略图/警告框/进度条等插件
:https://v3.bootcss/javascript/
过滤效果/模糊框/滚动监听/标签页/工具提示/弹出框/Collapse(内容收缩)/Carousel(轮播图)等
CV大法,按需微调。
4. Bootstrap 可视化布局
-
Bootstrap 官方可视化布局工具:https://www.bootcss/p/layoutit/
拖拽布局,【下载】按钮生成干净的HTML, 可以复制粘贴代码到项目。 -
第三方可视化布局工具:
- ibootstrap:http://www.ibootstrap/
- 15 款最好的 Bootstrap 在线编辑工具:https://www.runoob/bootstrap/bootstrap-ui-editor.html
5. 测试 demo
效果图:
源码:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>炎黄子孙旅游网</title>
<link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/bootstrap/js/jquery-3.5.1.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
<style>
body {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.container-fluid {
padding: 0;
}
/* 图片随窗口大小变化自动伸缩 */
#top_banner {
width: 100%;
height: auto;
}
hr {
margin-top: 5px;
}
.price {
color: orange;
}
/* 需要两边留白且居中的主体内容 */
.content {
width: 80%;
}
.thumbnail {
padding: 0;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<%--顶部banner--%>
<img id="top_banner" src="image/top_banner.jpg" alt="top-banner"/>
<%--导航条--%>
<nav 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 style="color: orange; margin-left: 10px" class="navbar-brand" href="#">炎黄子孙旅游网</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<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 class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">各地景区 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">郑州</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">开封</a></li>
<li><a href="#">洛阳</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">南阳</a></li>
<li><a href="#">驻马店</a></li>
<li><a href="#">平顶山</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="地区或景点名称">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">关于我们</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">个人中心 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">我的足迹</a></li>
<li><a href="#">我的旅记</a></li>
<li><a href="#">我的相册</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">退出</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<%--轮播图--%>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="image/banner_1.jpg" alt="轮播图1">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="image/banner_2.jpg" alt="轮播图2">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="image/banner_3.jpg" alt="轮播图3">
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">上一张</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">下一张</span>
</a>
</div>
</div>
</div>
</div>
<div class="content container-fluid">
<div class="mod_title row-fluid">
<div class="span12">
<%--栏目标题--%>
<div style="margin-top: 20px">
<div>
<img src="image/icon_5.jpg" alt="">旅游精选
</div>
<hr/>
</div>
<%--栏目内容 2x4--%>
<div class="row-fluid">
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="image/jingxuan_1.jpg" alt="精选1">
<div class="caption">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p>
<span class="price">$699</span>
<a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="image/jingxuan_1.jpg" alt="精选1">
<div class="caption">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p>
<span class="price">$699</span>
<a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="image/jingxuan_1.jpg" alt="精选1">
<div class="caption">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p>
<span class="price">$699</span>
<a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="image/jingxuan_1.jpg" alt="精选1">
<div class="caption">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p>
<span class="price">$699</span>
<a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="image/jingxuan_1.jpg" alt="精选1">
<div class="caption">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p>
<span class="price">$699</span>
<a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="image/jingxuan_1.jpg" alt="精选1">
<div class="caption">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p>
<span class="price">$699</span>
<a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="image/jingxuan_1.jpg" alt="精选1">
<div class="caption">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p>
<span class="price">$699</span>
<a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="image/jingxuan_1.jpg" alt="精选1">
<div class="caption">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p>
<span class="price">$699</span>
<a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a>
</div>
</div>
</div>
</div>
<%--分页栏--%>
<div align="center">
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<%--栏目标题--%>
<div>
<div>
<img src="image/icon_6.jpg" alt="">人气推荐
</div>
<hr/>
</div>
<%--栏目内容 1 + 2x3--%>
<div class="row-fluid">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 30%">
<img style="width: 300px; height: 445px;" src="image/guonei_1.jpg" alt="特卖">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 70%; padding: 0">
<div class="row-fluid">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="image/jingxuan_1.jpg" alt="精选1">
<div class="caption">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游)</p>
<span class="price">$699</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="image/jingxuan_2.jpg" alt="精选1">
<div class="caption">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游)</p>
<span class="price">$699</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="image/jingxuan_3.jpg" alt="精选1">
<div class="caption">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游)</p>
<span class="price">$699</span>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="image/jingxuan_4.jpg" alt="精选1">
<div class="caption">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游)</p>
<span class="price">$699</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="image/jingxuan_5.jpg" alt="精选1">
<div class="caption">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游)</p>
<span class="price">$699</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="image/jingxuan_6.jpg" alt="精选1">
<div class="caption">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游)</p>
<span class="price">$699</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid" style="background-color: #383838; width: 100%; height: 100px;">
<div class="content container-fluid">
<div class="row-fluid">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" style="margin-top: 20px;">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 25%;">
<img src="image/icon_1.jpg">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"
style="width: 75%; color: white; font-family: 'Microsoft YaHei UI'; ">
<span style="font-size: 20px"><b>产品齐全</b></span>
<p style="color: gray; padding-top: 0px">产品全自主选,随心买</p>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" style="margin-top: 20px;">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 25%;">
<img src="image/icon_1.jpg">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"
style="width: 75%; color: white; font-family: 'Microsoft YaHei UI'; ">
<span style="font-size: 20px"><b>便利快捷</b></span>
<p style="color: gray; padding-top: 0px">产品全自主选,随心买</p>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" style="margin-top: 20px;">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 25%;">
<img src="image/icon_1.jpg">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"
style="width: 75%; color: white; font-family: 'Microsoft YaHei UI'; ">
<span style="font-size: 20px"><b>安全支付</b></span>
<p style="color: gray; padding-top: 0px">产品全自主选,随心买</p>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" style="margin-top: 20px;">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 25%;">
<img src="image/icon_1.jpg">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"
style="width: 75%; color: white; font-family: 'Microsoft YaHei UI'; ">
<span style="font-size: 20px"><b>贴心服务</b></span>
<p style="color: gray; padding-top: 0px">产品全自主选,随心买</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
更多推荐
Bootstrap框架使用及可视化布局
发布评论