用Bootstrap网站主页(轮播图、导航栏、栅格系统)

最新推荐文章于 2024-09-08 23:43:26 发布
最新推荐文章于 2024-09-08 23:43:26 发布
阅读量3.5k 收藏 52
点赞数 5
分类专栏： JavaWeb 文章标签： css bootstrap html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44531966/article/details/109609035
版权

效果如图：

在这里插入图片描述
主要代码：
index.html

<!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">
    <title>黑马旅游网</title>
    <!--导入bootstrap框架-->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<header class="container-fluid">
    <!--第一行-->
    <div class="row">
        <img src="img/top_banner.jpg" class="img-responsive">
    </div>
    <!--第二行-->
    <div class="row padd-top">
        <div class="col-md-4">
            <img src="img/logo.jpg" class="text-center">
        </div>
        <div class="col-md-5 padd-top">
            <input class="search_input" type="text" placeholder="请输入线路名称">
            <a class="search_button" href="#">搜索</a>
        </div>
        <div class="col-md-3">
            <img src="img/hotel_tel.png">
        </div>
    </div>
    <!--第三行-->
    <div class="row">
        <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">
                        <span class="glyphicon glyphicon-th-list" style="color: white"></span>
                    </button>
                    <a class="navbar-brand" href="#">传智播客</a>
                </div>

                <!-- 下拉菜单，表单等-->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">JavaEE <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">Android</a></li>
                        <li><a href="#">Android</a></li>
                        <li><a href="#">Android</a></li>
                        <li><a href="#">Android</a></li>
                        <li><a href="#">Android</a></li>
                        <li><a href="#">Android</a></li>
                        <li><a href="#">Android</a></li>
                        <li><a href="#">Android</a></li>
                        <li><a href="#">Android</a></li>
                        <li><a href="#">Android</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </div>

    <!--第四行：轮播图-->
    <div class="row">
        <div id="carousel-example-generic" data-interval="2000" class="carousel slide" data-ride="carousel">
            <!-- 中间的小圆点 -->
            <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>

            <!-- 包含图片 -->
            <div class="carousel-inner" role="listbox">
                <!--每个div是一张图片-->
                <div class="item active">
                    <img src="img/banner_1.jpg">
                    <div class="carousel-caption">
                        弓箭手
                    </div>
                </div>
                <div class="item">
                    <img src="img/banner_2.jpg" alt="...">
                    <div class="carousel-caption">
                        我是歌手
                    </div>
                </div>
                <div class="item">
                    <img src="img/banner_3.jpg" alt="...">
                    <div class="carousel-caption">
                        花木兰
                    </div>
                </div>
            </div>

            <!-- 控制按钮 -->
            <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>
    </div>
</header>
<div class="container">
    <!--黑马精选-->
    <div class="row">
        <div class="jx_top">
            <img src="img/icon_5.jpg">
            黑马精选
        </div>
    </div>

    <div class="row">
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="img/jiangxuan_1.jpg" alt="...">
                <div class="caption">
                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                    <span style="color: red">&yen;888</span>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="img/jiangxuan_1.jpg" alt="...">
                <div class="caption">
                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                    <span style="color: red">&yen;888</span>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="img/jiangxuan_1.jpg" alt="...">
                <div class="caption">
                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                    <span style="color: red">&yen;888</span>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="img/jiangxuan_1.jpg" alt="...">
                <div class="caption">
                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                    <span style="color: red">&yen;888</span>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="jx_top">
            <img src="img/icon_6.jpg">
            国内游
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <img src="img/guonei_1.jpg" class="img-responsive">
        </div>
        <div class="col-md-8">
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="img/jiangxuan_1.jpg" alt="...">
                    <div class="caption">
                        <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                        <span style="color: red">&yen;888</span>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="img/jiangxuan_1.jpg" alt="...">
                    <div class="caption">
                        <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                        <span style="color: red">&yen;888</span>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="img/jiangxuan_1.jpg" alt="...">
                    <div class="caption">
                        <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                        <span style="color: red">&yen;888</span>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="img/jiangxuan_1.jpg" alt="...">
                    <div class="caption">
                        <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                        <span style="color: red">&yen;888</span>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="img/jiangxuan_1.jpg" alt="...">
                    <div class="caption">
                        <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                        <span style="color: red">&yen;888</span>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="img/jiangxuan_1.jpg" alt="...">
                    <div class="caption">
                        <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                        <span style="color: red">&yen;888</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<footer class="container-fluid">
    <div class="row">
        <img src="img/footer_service.png" class="img-responsive">
    </div>
    <div class="row company">
        江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882
    </div>
</footer>
</body>
</html>

源码下载：
链接: https://pan.baidu.com/s/1O7o8rNBJ_xOxH5VVNJnKWg
提取码:199o
复制这段内容后打开百度网盘App，操作更方便哦。

来lai
关注
专栏目录
带有导航条和轮播图效果的网站设计.zip
08-05
使用DW工具，带有轮播图效果和导航条的网站设计工程实训，有十余个静态网页组成，制作较为精美，可以评论进行了解查看
利用Bootstrap快速搭建个人响应式主页（附演示+源码）
weixin_34107955的博客
04-24 2027
1.前言 我们每个程序员都渴望搭建自己的技术博客平台与他人进行交流分享,但使用别人的博客模板没有创意。做网站后台的开发人员可能了解前端，可是自己写一个不错的前端还是很费事的。幸好我们有Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。我以后端程序员的角度讲一下...
WEB前端开发：轮播图的实现（H5+C3+JavaScript）(JQuery)
热门推荐
嘻嘻的博客
11-11 6万+
一、轮播图的概念 轮播图就是一种网站在介绍自己的主打产品或重要信息的传播方式。说的简单点就是将承载着重要信息的几张图片，在网页的某一部位进行轮流的呈现，从而做到让浏览者很快的了解到网站想要表达的主要信息。例如：淘宝，京东，等大型的购物平台。以及各种新闻网站的头版头条都是用这种方式呈现的重要信息。 二、轮播图的设计思想 轮播图的实现方式：例如：有5张轮播的图片，每张图片的宽度为...
Bootstrap 5.3版本创建常用页面
最新发布
强者征服今天，懦夫哀叹昨天，懒汉坐等明天。
09-08 857
你可以根据自己的主题需求来自定义样式。Bootstrap提供了丰富的CSS类和组件，使得创建响应式、移动优先的网站变得简单。下面我将指导你如何基于Bootstrap 5.3来编写一个简单但自定义主题的页面。以上是使用Bootstrap 5.3创建自定义主题页面的基本步骤。你可以根据自己的需求添加更多的内容和样式。
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
而风不止
11-14 2万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
网页设计期末大作业-景点旅游网站（含导航栏，轮播图，样式精美）
weixin_43474701的博客
06-01 863
页设计期末结课的作业（资源链接在文末），样式很精美，链接基本正常，详细情况入下图所示：
Bootstrap（导航栏&轮播图&按钮组&画像）
weixin_56996467的博客
04-01 1538
目录 准备工作 一、导航栏 二、轮播图 三、按钮组 准备工作 将Bootstrap的js库和css样式都导入到项目中 一、导航栏 HTML代码： <!-- 导航条组件 --> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <!-- 固定容器 --> <div class="container"> <a class="navbar...
仿京东商城首页（图片轮播、左侧悬浮导航栏、头部悬浮搜索框、右侧悬浮栏）
积极废人的博客
08-10 1万+
首页太长截成几个小部分写的东西基本都在里面了 基本的html+css布局，图片轮播，左侧悬浮导航栏 头部悬浮搜索框 右侧导航按钮（详情见图5） 。适合学完html+css对js，jquery有一定了解的人学习。代码太多，来个大神教一下怎么上传代码 要资源的给个赞呗？ ...
bootstrap学习使用（导航条、下拉菜单、轮播、栅格布局等）
01-19
本文算是bootstrap学习使用的年底大总结，供大家参考，具体内容如下 bootstrap框架 BootStrap学习从现在开始，前端开发框架Bootstrap，可大大简化网站开发过程，从而深受广大开发者的喜欢。 <!DOCTYPE html> &lt...
Bootstrap栅格系统简单实现代码
08-31
在实际开发中，Bootstrap栅格系统可以与其他Bootstrap组件结合使用，例如，导航栏（nav）、面板（panel）、警告框（alert）等。Bootstrap栅格系统也可以与其他前端框架结合使用，例如，Angular、React等。 ...
bootstrap栅格系统示例代码分享
08-30
栅格系统也可以与其他Bootstrap组件结合使用，例如与导航栏（nav）组件结合使用，创建一个完整的响应式布局。 栅格系统的示例代码 以下是Bootstrap栅格系统的示例代码： ```html <div class="col-md-1 a">1 ...
BootStrap导航栏问题记录
08-29
在本文中，我们将深入探讨在使用Bootstrap导航栏时可能会遇到的问题，以及如何解决这些问题。 首先，让我们分析一下描述中提到的问题：实现响应式导航栏的垂直平分和下拉列表的居中。在Bootstrap的默认样式中，导航...
Bootstrap02(导航栏，轮播图及增加界面的制作)
weixin_65474399的博客
05-07 2415
前言： 上篇给大家介绍了省市联动的制作和一些bootstrap的基本使用，今天来继续给大家介绍一下如何用bootstrap来排出比上篇更好看的界面。 目录 前言： 一，主界面的制作 1.效果图： 主界面： 增加界面： 2.代码详情： index.jsp：（主界面） insert.jsp:（增加界面） biz包 IGoodsBiz.java： IRegionBiz.java： dao包 IGoodsDao.java： IRegionDao.java： filter包 En.
Bootstrap实战练习---模仿前端网页(导航栏+轮播图+Media)
Season CSDN博客
07-24 1575
Bootstrap实战—模仿前端网页 原网页效果图 连接 我的网页效果 -我的代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>融职教育</title> <!--移动设备优先--> <meta name="viewport" content="width=device-width, initi..
19Bootstrap5导航栏
醉瑾_的博客
12-18 1320
19Bootstrap5导航栏 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>菜鸟教程Bootstrap5导航栏</title> <link rel="s
BootStrap 实现轮播图
christmassss的博客
01-15 2361
在下载好的文件夹中找到下面的文件，复制到自己的项目中并引入。复制下面的代码到我们的html页面中。添加自己的图片，就可以实现轮播图了。
web课程设计网页规划与设计----公司官网带轮播图 (页面精美 1页)
而风不止
11-18 419
公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
使用BootStrap制作网页页面
m0_65725031的博客
05-05 9195
今天主要是大家使用BootStrap制作网页页面，在上一篇文章中我们的网页制作就使BootStrap，但是由于涉及的不是很多，也没有和大家讲解，今天主要是教大家BootStrap 5,该版本是最新的相对4来说更加简单，方便我们使用。 BootStrap的基本使用 在百度上面搜索BootStrap的官网，去到官网，官网上有各种我们需要在页面上使用的代码。 我们只需要将代码复制，放置到页面上使用，大家根据需求去对代码进行更改。 BootStrap上手是非常简单的。 BootStrap实操 将我...
Bootstrap——网格系统，导航栏，轮播
qq_63341586的博客
11-21 1368
文章目录bootstrap简介及其相关内容网格系统导航栏轮播 bootstrap简介及其相关内容 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。引用其时需要具备一定的基本模板： <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width
Bootstrap网站导航栏功能及特点
通过使用Bootstrap的栅格系统，我们可以进一步优化导航栏的布局。栅格系统允许将页面分割为12列，通过使用不同的col-xx-xx类，可以定义不同大小的列。这样可以确保导航栏在不同设备上都能够正确显示，并提供良好的...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

来lai

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值