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

最新推荐文章于 2024-04-20 12:00:51 发布
最新推荐文章于 2024-04-20 12:00:51 发布
阅读量3.2k 收藏 51
点赞数 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
关注
  • 5
    点赞
  • 踩
  • 51
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
使用BootStrap制作网页页面
m0_65725031的博客
05-05 8968
今天主要是大家使用BootStrap制作网页页面，在上一篇文章中我们的网页制作就使BootStrap，但是由于涉及的不是很多，也没有和大家讲解，今天主要是教大家BootStrap 5,该版本是最新的相对4来说更加简单，方便我们使用。 BootStrap的基本使用 在百度上面搜索BootStrap的官网，去到官网，官网上有各种我们需要在页面上使用的代码。 我们只需要将代码复制，放置到页面上使用，大家根据需求去对代码进行更改。 BootStrap上手是非常简单的。 BootStrap实操 将我...
bootstrap学习使用（导航条、下拉菜单、轮播、栅格布局等）
01-19
本文算是bootstrap学习使用的年底大总结，供大家参考，具体内容如下 bootstrap框架 BootStrap学习从现在开始，前端开发框架Bootstrap，可大大简化网站开发过程，从而深受广大开发者的喜欢。 <!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, ini
Web移动端html+css+js实现轮播图
个人博客：www.chaichaisocute.top
11-28 640
解读在代码注释里面，如果看不懂或者不理解，可以评论区留言或私信我 网页布局部分： <div class="focus"> <ul> <li><img src="./images/myq1.jpg" alt=""></li> <li><img src="./images/myq1.jpg" alt=""></li> ...
Bootstrap 5 保姆级教程（十）：导航栏 & 轮播
Flag少侠的博客
04-20 956
导航栏一般放在页面的顶部。我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xxl|xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。导航栏上的选项可以使用 元素并添加 class="navbar-nav" 类。
Bootstrap——网格系统，导航栏，轮播
qq_63341586的博客
11-21 1212
文章目录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实战练习---模仿前端网页(导航栏+轮播图+Media)
Season CSDN博客
07-24 1473
Bootstrap实战—模仿前端网页 原网页效果图 连接 我的网页效果 -我的代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>融职教育</title> <!--移动设备优先--> <meta name="viewport" content="width=device-width, initi..
19Bootstrap5导航栏
醉瑾_的博客
12-18 1236
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 1613
在下载好的文件夹中找到下面的文件，复制到自己的项目中并引入。复制下面的代码到我们的html页面中。添加自己的图片，就可以实现轮播图了。
带有导航条和轮播图效果的网站设计.zip
08-05
使用DW工具，带有轮播图效果和导航条的网站设计工程实训，有十余个静态网页组成，制作较为精美，可以评论进行了解查看
基于bootstrap实现的宽屏大气写字楼html5网站模板
06-12
功能方面，该模板包含了丰富的页面元素和组件，如导航栏、轮播图、表单、按钮等，满足了写字楼网站常见的展示需求。导航栏设计简洁明了，便于用户快速找到所需信息；轮播图则能够直观地展示写字楼的外观、内部设施等...
基于bootstrap实现的女性奢侈品商城html5网站模板
最新发布
06-13
丰富的组件库：Bootstrap提供了丰富的UI组件，如导航栏、轮播图、表单等，使得商城网站能够快速搭建出美观且功能完备的界面，提升用户体验。 便捷的购物车功能：通过Ajax技术实现商品的动态添加和删除，用户无需刷新...
Bootstrap期末作品
12-18
整体运用了栅格系统布局，局部应用了固定到顶部的导航栏组件，下拉菜单组件，轮播图插件，以及Bootstrap自带的按钮样式。希望通过学习Bootstrap从这种布局的思想，实现的方式中加深对CSS html 的理解
精致摄影网站模板 Bootstrap4
anananajiushiwo的博客
04-17 183
这是一个相机摄影网站。网站结构包括以下部分：导航栏部分：位于页面顶部，包含了Logo和若干导航链接，如Home、About、Gallery、Services、Testimonial和Contact。横幅部分：位于页面顶部以下，是一个轮播图，展示了不同的图片和对应的标题、描述以及阅读更多的按钮。关于部分：介绍了摄影机构的欢迎词和简要描述，并提供了阅读更多的按钮。图库部分：展示了多个图片，每个图片都有一个放大搜索的图标。服务部分：介绍了摄影机构提供的服务，并使用轮播方式展示了不同的服务项目。
BootStrap学习(三)——重写首页之导航栏和轮播图
anjiukonghe77852的博客
08-29 468
1、按钮 1）帮助文档：http://v3.bootcss.com/css/#buttons 2）.btn-lg、.btn-sm、.btn-xs可以设置按钮的不同尺寸 3）.active类设置按钮的激活状态，其表现为被按压下去（底色更深、边框颜色更深、向内投射阴影）。 2、导航栏帮助文档：http://v3.bootcss.com/components/#navbar 　 ...
超好看的30款网站侧边栏设计
设计“1+2”，摹客就够了！
05-19 7728
网站的布局和导航十分重要，想要兼顾美观简洁的设计又要保障友好的用户体验，使用侧边栏导航会是一种不错的选择。目前，已经有大量的网站摈弃了传统的导航模式，改为使用侧边栏导航，今天我们精选了其中的30个作为灵感案例，一定会给你带来启发。
JAVAWEB-js实现轮播图和二级菜单
qq_42072733的博客
07-13 2759
简单美食网站的demonotice：1.二级菜单需设置绝对定位并将其z-index值加大，母栏设置相对定位              2.轮播图部分设置定时器，通过改变函数来控制图片的原路径成果展示：      &lt;!DOCTYPE html&gt; ...
淘宝轮播图--web前端20200309学习笔记
qq_44850917的博客
03-09 432
1.外边距合并问题：解决方法 浮动元素，绝对定位（固定）元素都不会触发外边距合并问题 2.综合案例-淘宝轮播图 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style&gt...
html制作课程导航页面,学成在线页面制作（HTML+CSS部分）（顶部+轮播图部分）...
weixin_29717875的博客
06-04 1688
学成在线页面制作(HTML+CSS部分)(顶部+轮播图部分)成品截图前期准备素材一、项目页面PSD源文件二、前期准备工作三、CSS属性书写顺序四、布局分析五、布局流程开始页面制作头部制作banner制作左侧导航栏课程表模块源代码下载成品截图 前期准备素材一、项目页面PSD源文件下载地址https://chuenst.lanzous.com/i7hlggnl6vc二、前期准备工作 创建study目...
基于bootstrap框架的响应式首页
快乐小芍籽
04-22 1136
该网页有首页、魅力福建、高校推荐、国际学术、外教职工、合作交流 等6栏导航，其下设有二级导航福建文化、奖学金、人才中心。该管理平台前台的主要特色有以下几个： 1.布局结构合理，内容充实，图形的表达精简。 2.色调搭配和谐，使得整体界面具有统一性。 3.导航栏板块实现直观性原则，目录分类合理，标题明晰、醒目。 4.采用多列布局，减少对形状和线条的依赖。 5.界面友好，灵活，可在不同移动设备
3、bootstrap主页包含头部、导航、正文、页脚（版权信息）等，使用bootstrap栅格系统、弹性盒子和组件布局网页。
07-10
对于使用Bootstrap来创建主页的布局，你可以按照以下步骤进行操作： 1. 首先，确保你已经将Bootstrap的CSS和JavaScript文件链接到你的HTML文件中。你可以从官方网站下载Bootstrap文件，或者使用CDN链接。 2. 创建一个包含头部、导航、正文和页脚的HTML结构。你可以使用div元素来分隔不同的部分，并为它们添加相应的类名。 3. 使用Bootstrap的栅格系统来设置页面的布局。栅格系统是基于12个列的网格，你可以将每个部分分成不同的列数以适应不同的屏幕大小。例如，你可以使用`col-xs-12`类来指定一个占满整行的元素，在移动设备上显示为全屏宽度。 4. 使用弹性盒子布局来对齐和排列元素。Bootstrap提供了一些类来控制元素在容器中的对齐方式，如`d-flex`用于创建一个弹性盒子容器，`justify-content-center`用于水平居中元素，`align-items-center`用于垂直居中元素等。 5. 使用Bootstrap的组件来添加样式和交互效果。Bootstrap提供了各种组件，如导航栏、卡片、按钮等，你可以根据需要选择并添加到你的页面中。 总之，使用Bootstrap的栅格系统、弹性盒子和组件，你可以轻松地创建一个包含头部、导航、正文和页脚的主页布局。记得参考Bootstrap的文档和示例来了解更多细节和用法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

来lai

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

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

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

打赏作者

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

抵扣说明：

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

余额充值