BootStrap实现一个简单的界面

创建html文件
导入相关BpptStrap的css 和 js 创建img文件夹用来存储图片

准备就绪~~

上代码：

<!DOCTYPE html>
<html>
<head><title>首页</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><style>/* Make the image fully responsive */.carousel-inner img {width: 100%;height: 100%;}</style>
</head>
<body><!-- 导航栏 --><div class="container">
<nav class="navbar navbar-expand-sm bg-success navbar-dark"><ul class="navbar-nav"><li class="nav-item active"><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" href="#">自驾游</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" href="#">自由行</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" href="#">游轮</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" href=""></a></li><li class="nav-item"><a class="nav-link" href="login.html">注册</a></li></ul>
</nav></div>
<!-- <br> -->
<!-- 中间虚线 -->
<!-- <div style="width: 100%;"></div> -->
<div class="container">
<div id="demo" class="carousel slide" data-ride="carousel"><!-- 指示符 --><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 src="https://static.runoob.com/images/mix/img_fjords_wide.jpg"></div><div class="carousel-item"><img src="https://static.runoob.com/images/mix/img_nature_wide.jpg"></div><div class="carousel-item"><img src="https://static.runoob.com/images/mix/img_mountains_wide.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><br><div class="container"><div style="width: 100%;height: 7px;background-color: aquamarine;"></div><br><h2>推荐景点</h1><div class="row"><div class="col-sm-6 col-md-4"><div class="thumbnail"><img src="img/1.jpg"alt="通用的占位符缩略图"><div class="caption"><h3>趵突泉</h3><p>趵突泉（Baotu Spring），济南三大名胜之一，位于山东省济南市历下区，东临泉城广场，北望五龙潭，面积达158亩</p><p><button type="button" class="btn btn-default" data-toggle="modal" data-target="#btq"">更多介绍>></button></p></div></div></div><div class="col-sm-6 col-md-4"><div class="thumbnail"><img src="img/2.jpg"alt="通用的占位符缩略图"><div class="caption"><h3>大明湖</h3><p>大明湖，山东省济南市区湖泊、济南三大历史名胜之一。位于山东省济南市历下区旧城区北部，是由济南众多泉水汇流而成，湖水经泺水河注入小清河。</p><p><button type="button" class="btn btn-default" data-toggle="modal" data-target="#dmh"">更多介绍>></button></p></div></div></div><div class="col-sm-6 col-md-4"><div class="thumbnail"><img src="img/1.jpg"alt="通用的占位符缩略图"><div class="caption"><h3>千佛山</h3><p>千佛山位于山东省济南市历下区，是济南三大名胜之一，古称历山，因为古史称舜在历山耕田的缘故，又曾名舜山和舜耕山。</p><button type="button" class="btn btn-default" data-toggle="modal" data-target="#qfs"">更多介绍>></button></div></div></div></div>
</div><!-- 1 --><div class="modal fade" id="btq"><div class="modal-dialog"><div class="modal-content"><!-- 模态框头部 --><div class="modal-header"><h4 class="modal-title">趵突泉介绍</h4><button type="button" class="close" data-dismiss="modal">&times;</button></div><!-- 模态框主体 --><div class="modal-body">趵突泉泉眼位于趵突泉公园内的泺源堂前。民国二十年（1931年）四周用石砌岸。几经变化，形成长方形泉池，长30米，宽18米，深2.2米。北临泺源堂，西傍观澜亭，东架来鹤桥，南有长廊围合。泉水从地下石灰岩溶洞中涌出，每天涌出7万立方米泉水，泉水有三个出水口，最大涌水量为16.2万米/天。趵突泉水一年四季恒定在18℃左右。趵突泉周边的名胜古迹有泺源堂、观澜亭、尚志堂、李清照纪念堂、李苦禅纪念馆等景点。</div><!-- 模态框底部 --><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button></div></div></div></div><!-- 2 --><div class="modal fade" id="dmh"><div class="modal-dialog"><div class="modal-content"><!-- 模态框头部 --><div class="modal-header"><h4 class="modal-title">大明湖介绍</h4><button type="button" class="close" data-dismiss="modal">&times;</button></div><!-- 模态框主体 --><div class="modal-body">大明湖，山东省济南市区湖泊、济南三大历史名胜之一。位于山东省济南市历下区旧城区北部，是由济南众多泉水汇流而成，湖水经泺水河注入小清河。湖水面积46公顷，水深平均2~3米。 [1]  大明湖景色优美秀丽，湖水水色澄碧，是国家5A级旅游景区——天下第一泉风景区的核心组成部分之一。</div><!-- 模态框底部 --><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button></div></div></div></div><!-- 3 --><div class="modal fade" id="qfs"><div class="modal-dialog"><div class="modal-content"><!-- 模态框头部 --><div class="modal-header"><h4 class="modal-title">千佛山介绍</h4><button type="button" class="close" data-dismiss="modal">&times;</button></div><!-- 模态框主体 --><div class="modal-body">千佛山位于山东省济南市历下区，是济南三大名胜之一，古称历山，因为古史称舜在历山耕田的缘故，又曾名舜山和舜耕山。隋开皇年间（581年一600年），因佛教盛行，随山势雕刻了数千佛像，故称千佛山。</div><!-- 模态框底部 --><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button></div></div></div>
</div><br></body>
</html>

代码编写完成之后可以进行运行了

运行结果：

点击更多介绍会弹出模态框对景点进行详细介绍

盗版必究

BootStrap实现一个简单的界面相关推荐

HTML5.0实例练习（三） --制作一个简单登陆界面
今天分享一个简单的实例--制作一个简单登陆界面代码如下: 代码执行结果如下: 这里面用到了<table><th><td><tr>这些表格标签,这些在这 ...
Matlab中如何使用appdesigner设计工具建立一个简单的界面
Matlab中如何使用appdesigner设计工具建立一个简单的界面(数据的输入.处理和保存) 以使用不同算法处理图像的功能为例建立一个新的空白界面,matlab中输入appdesigner,打开 ...
DuiVision开发教程(2)-如何写一个简单的界面程序
基于DuiVision界面库开发的界面程序主要包括如下几部分内容: 1.资源定义,包括图片资源.各个窗口界面的xml定义文件 2.事件处理类代码,用于处理界面响应消息 3.其他业务逻辑代码下面举例说 ...
一个简单交互界面的实现
一个简单交互界面的实现这个界面本来是今年做NXP智能车的时候为了更改参数方便设计的,这其实又是一套用状态机的思想来实现的一个显示框架. 这个显示界面只是一个操作逻辑,所以它的的移植性还是挺高的,虽然 ...
用angular JS和 bootstrap完成一个简单的购物车界面
初学angularJS,自己做一个简单的demo玩一下. 购物车界面:(1)能显示商品基本信息: (2)能对购买数量进行修改: (3)能够删除不想购买的商品: (4)能够自动计 ...
前端：使用BootStrap搭建一个简单的网页
之前有想法学习一下前端框架的,后来没有坚持下来.连最基础的栅格系统都忘记了.于是,花了一点时间,重新温习了一下.写了一个简单的网页.页面大致是下面这张图.做得比较一般,不过能够自适应各种设备大小了. ...
Vue+ElementUI一个简单登录界面
1.项目搭建开始工作参考这个博客创建一一个名为hello-vue 的工程vue init webpack hello-vue 安装依赖,我们需要安装vue-router.element-ui. s ...
初学Python来用它制作一个简单的界面
前言很多刚开始学习python的宝子,就想着自己开始琢磨一些界面,但是吧很多都是有点难度的,自己又琢磨不透,只能把代码复制粘贴+运行现在就带你们来了解一个制作简单界面的代码 ttkbootstra ...
前端使用bootstrap实现一个简单的小案例，重点是关注响应式布局
1.案例的效果展示我们使用的是响应式布局,所谓的响应式布局就是可以使得同一套页面可以兼容不同分辨率的设备.可以看到苹果的官网当你将浏览器的串口放的很小的时候网站的布局也会随这页面大小发生变化,当我们 ...
Bootstrap写一个简单的响应式网页
响应式网页响应式网页设计采用css的媒体查询技术,将包括弹性布局,弹性图片.媒体和媒体查询整合在一起,为响应式网页设计. 页面会随着窗口的尺寸变化做出相应的改变. 视口是浏览器显示的内容区域,不包括 ...

BootStrap实现一个简单的界面

准备就绪~~

运行结果：

盗版必究

BootStrap实现一个简单的界面相关推荐

最新文章

热门文章