BootStrap实现一个简单的界面

最新推荐文章于 2024-05-20 10:07:09 发布
最新推荐文章于 2024-05-20 10:07:09 发布
阅读量969 收藏 14
点赞数
分类专栏： 前端 文章标签： bootstrap ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35349167/article/details/108774829
版权

创建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>

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

运行结果：

在这里插入图片描述
点击更多介绍会弹出 模态框 对景点进行详细介绍
在这里插入图片描述

盗版必究
付天天~
关注
  • 0
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
BootStrap做的几个简单界面
03-13
BootStrap做的几个简单界面，学习使用
简单通用登录页面模板 bootstrap登录页面 html页面
01-18
简单通用登录页面模板，用户登录界面模板，有表单验证功能。
bootstrap——简单页面1
spfLinux的博客
12-27 722
Document div{ border: 1px solid red; } Bootstrap CSS Type 1111 2222 3333 4444 5555
推荐：Flutter Bootstrap风格的管理界面UI
最新发布
gitblog_00047的博客
05-20 325
推荐：Flutter Bootstrap风格的管理界面UI 项目地址:https://gitcode.com/kalismeras61/flutter_web_dashboard 在寻找一个美观且易用的Flutter Web后台管理系统模板吗？Flutter Bootstrap Style Admin UI 是你的理想选择！这个开源项目为开发者提供了一套精心设计的Flutter Web管理界面UI...
Bootstrap简单使用
像风走过八千里
12-16 574
之前简单了解了一下什么是Bootstrap，这次就接着讲一下使用bootstrap做一个简单的登录页面 操作步骤 1、在官网上找到起步，然后复制基本模板 &lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv=&q
bootstrap入门-做一个简单的页面
奉婷婷的博客
10-11 3283
作者：the5fire | 标签： bootstrap   转载地址：http://www.the5fire.com/bootstrap-introduce.html html5我可不再上网查一个html文件的头部应该怎么定义，只需要写就ok。 当然提供的便利不知这些。 文字的描述还是干巴巴的，还是上些代码好些。 先来展示下我花了5分钟编写的界面（如果不是和别人一边
使用BootStrap实现用户登录界面UI
09-01
在本文中，我们将深入探讨如何使用 Bootstrap 创建一个用户登录界面UI，这个界面采用了左右各一半的布局风格。 首先，Bootstrap 的核心在于其网格系统，它允许开发者轻松地创建响应式的布局。在这个登录界面中，...
基于BootStrap实现简洁注册界面
08-29
通过以上步骤，我们就可以利用Bootstrap快速构建一个简洁、响应式的注册界面。但要注意，尽管Bootstrap提供了很多开箱即用的功能，为了满足特定需求或提高用户体验，我们可能还需要进行自定义CSS和JavaScript编程。...
spring boot+thymeleaf+bootstrap实现后台管理系统界面
08-28
Spring Boot+Thymeleaf+Bootstrap实现后台管理系统界面 Spring Boot是一款基于Java的开源框架，旨在简化基于Spring的应用程序的开发过程。Thymeleaf是一个modern server-side Java模板引擎，能够将HTML、XML、TEXT...
使用bootstrap构建一个简单的界面
大芝士球的博客
06-24 719
查看bootstrap文档，结合css、js、html构建出一个初级的界面： 整个网页就是header处有一个导航，中间一个轮播图（每5秒换一次图片），下面就是一些div元素了 jar包自取： 链接：https://pan.baidu.com/s/1---vJK7C-F0CDz9JmTs_AA 提取码：tpzj ...
使用astype实现dataframe字段类型转换
weixin_30408739的博客
09-30 264
在有些情况下，我们需要在DataFrame类型的数据中通过切片获得我们所需要的数据，然后转换为我们所需要的类型。Dataframe数据类型的转换需要用到astype函数。 笔者一开始想使用float()将dataframe转换为float类型，然后编译器报错了： 无法将这个系列转换为float类型？通过type()，发现该数据为Series数据类型，所以不能使用float()方法...
bootstrap简易登录注册页面
03-30
资源共享bootstrap简易登录注册页面
bootstrap_admin:为您的应用程序创建美观，简单的管理界面！
05-13
引导管理 简单的管理界面！ BootstrapAdmin是一个小型引擎，旨在简化管理界面的构建。 安装 将gem添加到您的Rails应用程序Gemfile中：gem'bootstrap_admin gem 'bootstrap_admin' 并运行： $ bundle install 或者只是运行： $ gem install bootstrap_admin 然后，只需运行安装生成器$ rails g bootstrap_admin:install 默认情况下，bootstrap_admin将使用“ admin”作为名称空间，但是您可以通过添加所需的名称空间来更改此名称： $ rails g bootstrap_admin:install --namespace=MyAdmin 运行生成器将创建以下文件（假设名称空间为“ admin”）： config/initializer
spring boot+thymeleaf+bootstrap 简单实现后台管理系统界面
04-21
spring boot+thymeleaf+bootstrap 简单实现后台管理系统界面；
bootstrap快速搭建简洁美观的页面
12-08
这是一个漂亮美观的bootstrap页面，可以直接使用与你的项目中，开箱即用。
bootstrap页面模板
12-11
bootstrap页面模板，可以直接套用在项目上直接使用详情见源码
基于bootstrap实现简单用户管理功能
医疗影像检索
04-14 4737
基于bootstrap实现简单用户管理功能，包括增删改以及列表分页展示功能。 1、web.xml配置servlet映射： UserMgServlet com.userMgServlet UserMgServlet /ToUserMgServlet 2、userMg.jsp页面代码 <%@ page language="java"
教程：如何使用 Bootstrap 5 构建简单的管理仪表板界面
allway2的博客
11-11 2455
在今天的教程中，我想向你们展示如何使用 Bootstrap 5 创建一个非常简单的管理仪表板界面。现在，您已经使用 Bootstrap 5 完成了一个简单的管理仪表板界面的构建。让我们继续看仪表板的最后一部分，即页脚。仪表板的页脚是显示对导航较少的页面（如隐私策略、协议条款、联系人等）的引用的好方法。现在，您的项目中已包含 Bootstrap 5，您可以开始构建管理仪表板界面。现在，您还有一个带有表格的小部件，您可以在其中添加用户、事务等内容。您将在本教程中创建的最后一个小部件将是具有图表的小部件。
基于bootstrap的简洁登录界面Html
03-28
基于bootstrap的简洁登录界面，可以直接下载使用~内置css+js
用Bootstrap写一个登录界面
03-11
要用Bootstrap写一个登录界面，可以先在HTML中引入Bootstrap的CSS和JS文件，然后使用Bootstrap提供的表单组件和样式来设计登录界面。可以使用Bootstrap的表单组件如form、input、button等，也可以使用Bootstrap提供...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值