旅游线路网站-Bootstrap

最新推荐文章于 2024-06-19 10:38:42 发布
最新推荐文章于 2024-06-19 10:38:42 发布
阅读量320 收藏
点赞数
文章标签： 旅游 bootstrap 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41790844/article/details/133914882
版权

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <style>
      .paddltop{
        padding-top:18px;
      }
    .paddtop{
      padding-top:15px;
    }
    .search-input{
      float:left;
      margin-top: 10px;
      border:1px solid #ffc900;
      width:400px;
      height:35px;
    }
    .search-btn{
      float:left;
      width:90px;
      height:35px;
      margin-top: 10px;
      border:1px solid #ffc900;
      text-align: center;
      line-height: 35px;
      background-color: #ffc900;
    }
    .jx{
      border-bottom: 2px solid #ffc900;
      padding:5px;
    }
    .company{
      height:40px;
      line-height: 40px;
      text-align: center;
      background-color: #ffc900;
      font-size: 18px;
    }
    </style>
</head>
<body>

<header class="container-fluid">

  <div class="row">
    <img src="../image/image1/top_banner.jpg">
  </div>
  <div class="row paddtop">
    <div class="col-md-3">
        <img src="../image/image1/logo.jpg" class="img-responsive">
    </div>
    <div class="col-md-5">
      <input placeholder="请输入线路名称"  class="search-input">
      <a href="https://baidu.com" class="search-btn">搜索</a>
    </div>
    <div class="col-md-4">
      <img src="../image/image1/hotel_tel.png" class="img-responsive">
    </div>

  </div>
  <div class="row">
    <nav class="navbar navbar-default">
      <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>

        <!-- 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="#">线路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>

          </ul>

          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>

          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
    </div>
  <div class="row">
    <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/image1/banner_2.jpg" alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        <div class="item">
          <img src="../image/image1/banner_1.jpg" alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>

        <div class="item">
          <img src="../image/image1/banner_3.jpg" alt="...">
          <div class="carousel-caption">
            ...
          </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">Previous</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">Next</span>
      </a>
  </div>

</header>

<!--主体部分-->
<div class="container">
  <div class="row jx">
    <img src="../image/image1/icon_5.jpg">
    <span>黑马精选</span>
  </div>

  <div class="row paddtop">
    <div class="col-md-3 ">
      <div class="thumbnail">
        <img src="../image/image1/jiangxuan_1.jpg" alt="">
        <p>上海飞三亚五天4晚自由行（春节销售+亲子+蜜月+自由行）</p>
        <font color="red"> 699</font>
      </div>
    </div>

    <div class="col-md-3">
      <div class="thumbnail">
        <img src="../image/image1/jiangxuan_1.jpg" alt="">
        <p>上海飞三亚五天4晚自由行（春节销售+亲子+蜜月+自由行）</p>
        <font color="red"> 699</font>
      </div>
    </div>

    <div class="col-md-3">
      <div class="thumbnail">
        <img src="../image/image1/jiangxuan_1.jpg" alt="">
        <p>上海飞三亚五天4晚自由行（春节销售+亲子+蜜月+自由行）</p>
        <font color="red"> 699</font>
      </div>
    </div>

    <div class="col-md-3">
      <div class="thumbnail">
        <img src="../image/image1/jiangxuan_1.jpg" alt="">
        <p>上海飞三亚五天4晚自由行（春节销售+亲子+蜜月+自由行）</p>
        <font color="red"> 699</font>
      </div>
    </div>
  </div>

  <div class="row jx">
    <img src="../image/image1/icon_6.jpg">
    <span>国内游</span>

  </div>

  <div class="row paddtop">
    <div class="col-md-4">
      <img src="../image/image1/guonei_1.jpg">
    </div>

    <div class="col-md-8 ">
      <div class="row">
        <div class="col-md-4">
          <div class="thumbnail">
            <img src="../image/image1/jiangxuan_1.jpg" alt="">
            <p>上海飞三亚五天4晚自由行（春节销售+亲子+蜜月+自由行）</p>      <br>
            <font color="red"> 699</font>
          </div>
        </div>

        <div class="col-md-4 ">
          <div class="thumbnail">
            <img src="../image/image1/jiangxuan_1.jpg" alt="">
            <p>上海飞三亚五天4晚自由行（春节销售+亲子+蜜月+自由行）</p>      <br>
            <font color="red"> 699</font>
          </div>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <img src="../image/image1/jiangxuan_1.jpg" alt="">
            <p>上海飞三亚五天4晚自由行（春节销售+亲子+蜜月+自由行）</p>      <br>
            <font color="red"> 699</font>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-md-4">
          <div class="thumbnail">
            <img src="../image/image1/jiangxuan_1.jpg" alt="">
            <p>上海飞三亚五天4晚自由行（春节销售+亲子+蜜月+自由行）</p>      <br>

            <font color="red"> 699</font>
          </div>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <img src="../image/image1/jiangxuan_1.jpg" alt="">
            <p>上海飞三亚五天4晚自由行（春节销售+亲子+蜜月+自由行）</p>      <br>
            <font color="red"> 699</font>
          </div>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <img src="../image/image1/jiangxuan_1.jpg" alt="">
            <p>上海飞三亚五天4晚自由行（春节销售+亲子+蜜月+自由行）</p>      <br>
            <font color="red"> 699</font>
          </div>
        </div>
      </div>
    </div>

  </div>

</div>
<!--页脚部分-->
<footer class="container-fluid">
      <div class="row">
        <img src="../image/image1/footer_service.png" class="img-responsive">
      </div>
  <div class="row company">
    阿里巴巴是一家杭州的互联网公司
  </div>
</footer>
</body>
</html>

qq_41790844
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap响应式旅游网站
09-15
bootstrap响应式旅游网站
bootstrap响应式旅游网站开发
09-18
bootstrap 响应式 旅游网站开发 QQ临时会话 百度地图api调用 首页 分页 登录 注册 仿携程网站 bootstrap 响应式 旅游网站开发 QQ临时会话 百度地图api调用 首页 分页 登录 注册 仿携程网站
web前端期末大作业——基于html+css+javascript+jquery+bootstrap响应式户外旅游网站
最新发布
网页设计与制作
06-19 336
🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的
【Java 进阶篇】手把手教你创建 Bootstrap 旅游网站
繁依Fanyi的博客
10-22 559
上述示例提供了创建旅游网站的基本结构。现在，让我们进行一些自定义，以使您的网站更加吸引人。Bootstrap 提供了许多默认样式，但您可以轻松地自定义它们以适应您的品牌和设计需求。您可以通过编写自定义 CSS 来修改颜色、字体、边距等样式。以下是一个示例：< style > /* 修改导航栏背景颜色和文字颜色 */ .navbar {} /* 修改轮播图高度和文字样式 */ .carousel {} /* 修改按钮样式 */ .btn-primary {
Bootstrap响应式旅游网页练习打卡~~~
m0_69064503的博客
06-01 292
bootstrap响应式旅游网页练习打卡！！！
基于Bootstrap的旅游官网页面实例
05-25
基于Bootstrap做的旅游官网实例，使用到轮播图等，很实用，资源中不仅包含源码，还有引用的所有图片资源，可以直接使用。
国外著名旅游景点线路bootstrap模板
04-09
9. **页面布局**：除了首页，可能还包括景点详情页、旅游线路介绍页、预订页等多个页面模板，满足网站多样化的需求。 10. **SEO优化**：考虑到搜索引擎优化的重要性，模板可能已经按照最佳实践进行了代码结构和元...
旅游景点线路bootstrap模板
11-24
"旅游景点线路bootstrap模板"是专为旅游相关业务设计的一款网页模板，旨在帮助企业和个人快速搭建具有吸引力且功能完善的旅游线路展示平台。 该模板采用了Bootstrap的核心理念，即模块化和响应式设计。模块化让...
自驾游旅游线路bootstrap网站模板_旅游 自驾游 线路 整站 企业 bootstrap 手机 响应式 标准 相册 展示 景
02-24
自驾游旅游线路bootstrap网站模板_旅游 自驾游 线路 整站 企业 bootstrap 手机 响应式 标准 相册 展示 景自驾游旅游线路bootstrap网站模板_旅游 自驾游 线路 整站 企业 bootstrap 手机 响应式 标准 相册 展示 景 ...
BootStrap案例-旅游网首页.zip
08-09
在这个“BootStrap案例-旅游网首页.zip”压缩包中，我们可以深入学习如何利用Bootstrap来创建一个具有轮播图、导航栏以及栅格系统布局的旅游网站首页。 首先，轮播图（Carousel）是Bootstrap的一个核心组件，用于...
bootstrap仿旅游网站+登录首页
09-17
bootstrap响应式仿旅游网站+登录首页 bootstrap响应式仿旅游网站+登录首页 bootstrap响应式仿旅游网站+登录首页
bootstrap旅游网站
02-09
bootstrap旅游网站
个性旅游景点响应式bootstrap网站模板
04-02
个性旅游景点响应式bootstrap网站模板
Bootstrap实现黑马旅游网
qq_41870790的博客
02-27 457
Bootstrap 概念： 一个前端开发框架 好处： 一、定义了很多的css样式和js插件。开发人员可以直接使用这些样式和插件得到丰富的页面效果 二、响应式布局。 1.同一套页面可以兼容不同分辨率的设备 快速入门： 1.下载Bootstrap 2.将三个文件夹复制到项目中 3.创建html页面，引入必要的资源文件 4.基本模板 <!DOCTYPE html> <html lang...
Bootstrap开发旅游网站
liuzuoping的博客
04-01 2053
Bootstrap开发旅游网站 Bootstrap： 1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式和js...
使用Bootstrap制作简单的旅游网站页面（非功能型）
weixin_43305674的博客
10-16 3254
首先进入BootStrap网站页面下下载Bootstrap文件，如下图所示 然后解压压缩包，并将相应的包复制到当前你所建项目的源文件下，如下图所示： 解压后的文档如下图： 将上述的包导入到项目源文件下： 然后依据Bootstrap在线文档教程，创建简单的旅游html网页，具体：代码如下： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> ...
BootStrap框架-旅游网页设计
qq_33755492的博客
06-24 1496
使用BootStrap框架，设计一个旅游页面 其中，使用Carousel轮播图等JavaScript插件，以及导航条等组件完成 <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co
sudo keystone-manage bootstrap --bootstrap-password cqu2022\ --bootstrap-admin-url http://localhost:5000/v3/ \ --bootstrap-internal-url http://localhost:5000/v3/ \ --bootstrap-public-url http://localhost:5000/v3/ \ --bootstrap-region-id RegionOne
06-12
- `--bootstrap-admin-url`：用于设置管理员API终端的URL。 - `--bootstrap-internal-url`：用于设置内部API终端的URL。 - `--bootstrap-public-url`：用于设置公共API终端的URL。 - `--bootstrap-region-id`：用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值