一个Bootstrap页面

最新推荐文章于 2024-03-10 09:15:00 发布
最新推荐文章于 2024-03-10 09:15:00 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： Bootstrap框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yingzizizizizizzz/article/details/68483154
版权

        这几天一直在看bootstrap框架的基础，学到一半发现，其实你再看的多，忘得其实也多，还不如实打实的多练习练习，所以我义无反顾的用Bootstrap框架写了一个页面。完成的功能有一下几点：

  • 导航栏
  • 下拉菜单
  • 图片轮播
  • 三栏布局
  • 标签页
  • 返回顶部
  • 弹出框

这些功能参照菜鸟教程，Bootstrap中文官网点击打开链接以及慕课网的基于Bootstrap的网页开发教程完成的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <title>现代浏览器博物馆</title>
    <style>
        body{
            padding-top: 50px;
            padding-bottom: 50px;
        }
        .carousel{
            height: 500px;

        }
        .carousel .item{
            height:500px;
            background-color: #000000;
        }
        .carousel img{
            width: 100%;
        }
        .carousel-caption p{
            font-size: 20px;
            margin-bottom: 20px;
            line-height:1.8;
        }
        #summary-container .col-md-4{
            text-align: center;
            margin-top: 60px;
        }
        .divider{
            margin: 40px 0px;
        }

        .feature{
            padding:30px 0px;
        }
        .feature-heading{
            font-size: 50px;
            color: #2a6496;
            margin-top: 120px;
        }
        .feature-heading .text-muted{
            font-size: 28px;
        }

        /* 响应式布局，没有这个字不会随着浏览器的改变而改变 */

        @media (max-width: 768px) {

            .summary {
                padding-right: 3px;
                padding-left: 3px;
            }

            .carousel {
                height: 300px;
                margin-bottom: 30px;
            }

            .carousel .item {
                height: 300px;
            }

            .carousel img {
                min-height: 300px;
            }

            .carousel-caption p {
                font-size: 16px;
                line-height: 1.4;
            }

            .feature-heading {
                font-size: 34px;
            }

            .feature-heading .text-muted {
                font-size: 22px;
            }
        }

        @media (min-width: 992px) {
            .feature-heading {
                margin-top: 120px;
            }
        }
    </style>
</head>
<body>
<!--导航栏-->
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">现代浏览器博物馆</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">综述</a></li>
                <li><a href="#summary-container">简述</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        特点 <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu" id="dropdown-tab">
                        <li><a href="#tab-chrome">Chrome</a></li>
                        <li><a href="#tab-Firefox">FireFox</a></li>
                        <li><a href="#tab-Opera">Opera</a></li>
                        <li><a href="#tab-Safari">Safari</a></li>
                        <li><a href="#tab-IE">IE</a></li>
                    </ul>
                </li>
                <li><a href="#" data-toggle="modal" data-target="#about">关于</a></li>
            </ul>
        </div>
    </div>
</nav><!--导航栏完成-->
<!--图片轮播 问题：浏览器缩小后字缩小不了，并且还有黑色；解决：添加响应式布局-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- 轮播（Carousel）指标 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
        <li data-target="#myCarousel" data-slide-to="4"></li>
    </ol>
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/chrome-big.jpg" alt="Chrome">
            <div class="container">
                <div class="carousel-caption">
                    <h1>Chrome</h1>

                    <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>

                    <p><a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser/"
                          role="button" target="_blank">点我下载</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="images/firefox-big.jpg" alt="FireFox">
            <div class="container">
                <div class="carousel-caption">
                    <h1>Firefox</h1>

                    <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p>

                    <p><a class="btn btn-lg btn-primary" href="http://www.firefox.com.cn/download/" target="_blank"
                          role="button">点我下载</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="images/opera-big.jpg" alt="Opera">
            <div class="container">
                <div class="carousel-caption">
                    <h1>Opera</h1>

                    <p>Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。</p>

                    <p><a class="btn btn-lg btn-primary" href="http://www.opera.com/zh-cn" target="_blank"
                          role="button">点我下载</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="images/safari-big.jpg" alt="Safari">
            <div class="container">
                <div class="carousel-caption">
                    <h1>Safari</h1>

                    <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>

                    <p><a class="btn btn-lg btn-primary" href="http://www.apple.com/cn/safari/" target="_blank"
                          role="button">点我下载</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="images/ie-big.jpg" alt="IE">
            <div class="container">
                <div class="carousel-caption">
                    <h1>IE</h1>

                    <p>Internet Explorer，简称 IE，是微软公司推出的一款网页浏览器。</p>

                    <p><a class="btn btn-lg btn-primary" href="http://ie.microsoft.com/" target="_blank"
                          role="button">点我下载</a></p>
                </div>
            </div>
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span
            class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next"><span
            class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<!--图片轮播结束-->

<div class="container summary">

    <!-- 简介 -->
    <!--三栏布局-->
    <div class="row" id="summary-container">
        <div class="col-md-4">
            <img class="img-circle" src="images/chrome-logo-small.jpg" alt="chrome">

            <h2>Chrome</h2>

            <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>

            <p><a class="btn btn-default" href="#" role="button">点我下载</a></p>
        </div>
        <div class="col-md-4">
            <img class="img-circle" src="images/firefox-logo-small.jpg" alt="firefox">

            <h2>Firefox</h2>

            <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p>

            <p><a class="btn btn-default" href="#" role="button">点我下载</a></p>
        </div>
        <div class="col-md-4">
            <img class="img-circle" src="images/safari-logo-small.jpg" alt="safari">

            <h2>Safari</h2>

            <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>

            <p><a class="btn btn-default" href="#" role="button">点我下载</a></p>
        </div>
    </div>
    <!--三栏布局结束-->
    <hr class="divider">
    <!--标签页-->
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#tab-chrome" aria-controls="tab-chrome" role="tab" data-toggle="tab">Chrome</a></li>
        <li role="presentation"><a href="#tab-Firefox" aria-controls="tab-Firefox" role="tab" data-toggle="tab">Firefox</a></li>
        <li role="presentation"><a href="#tab-Opera" aria-controls="tab-Opera" role="tab" data-toggle="tab">Opera</a></li>
        <li role="presentation"><a href="#tab-Safari" aria-controls="tab-Safari" role="tab" data-toggle="tab">Safari</a></li>
        <li role="presentation"><a href="#tab-IE" aria-controls="tab-IE" role="tab" data-toggle="tab">IE</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="tab-chrome">
            <div class="row feature">
                <div class="col-md-7">
                    <h2 class="feature-heading">Google Chrome <small
                            class="text-muted">使用最广的浏览器</small></h2>

                    <p class="lead">Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。
                        该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。</p>
                </div>
                <div class="col-md-5" >
                    <img src="images/chrome-logo.jpg" alt="chrome">
                </div>
            </div>
        </div>
        <div role="tabpane2" class="tab-pane" id="tab-Firefox">
            <div class="row feature">
                <div class="col-md-5" >
                    <img src="images/firefox-logo.jpg" alt="chrome">
                </div>
                <div class="col-md-7">
                    <h2 class="feature-heading">Mozilla Firefox <span class="text-muted">美丽的狐狸</span>
                    </h2>

                    <p class="lead">Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器，
                        使用Gecko引擎（非ie内核），支持多种操作系统如Windows、Mac和linux。</p>
                </div>
            </div>
        </div>
        <div role="tabpane3" class="tab-pane" id="tab-Opera">
            <div class="row feature">
                <div class="col-md-7">
                    <h2 class="feature-heading">Google Chrome <small
                            class="text-muted">使用最广的浏览器</small></h2>

                    <p class="lead">Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。
                        该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。</p>
                </div>
                <div class="col-md-5" >
                    <img src="images/opera-logo.jpg" alt="chrome">
                </div>
            </div>
        </div>
        <div role="tabpane4" class="tab-pane" id="tab-Safari">
            <div class="row feature">
                <div class="col-md-5" >
                    <img src="images/safari-logo.jpg" alt="chrome">
                </div>
                <div class="col-md-7">
                    <h2 class="feature-heading">Mozilla Firefox <span class="text-muted">美丽的狐狸</span>
                    </h2>

                    <p class="lead">Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器，
                        使用Gecko引擎（非ie内核），支持多种操作系统如Windows、Mac和linux。</p>
                </div>
            </div>
        </div>
        <div role="tabpane5" class="tab-pane" id="tab-IE">
            <div class="row feature">
                <div class="col-md-7">
                    <h2 class="feature-heading">Google Chrome <small
                            class="text-muted">使用最广的浏览器</small></h2>

                    <p class="lead">Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。
                        该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。</p>
                </div>
                <div class="col-md-5" >
                    <img src="images/ie-logo.jpg" alt="chrome">
                </div>
            </div>
        </div>
    </div>
    <!--标签页结束-->
    <hr class="divider">
    <footer>
        <p class="pull-right"><a href="#top">回到顶部</a></p>
        <p>&copy; 2014 慕课网</p>
    </footer>



    <!--关于 弹出框（模态框）-->
    <div class="modal fade" tabindex="-1" role="dialog" id="about">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">关于</h4>
                </div>
                <div class="modal-body">
                    <p>慕课网隶属于北京慕课科技中心(有限合伙)，是一家从事互联网免费教学的网络教育公司。秉承“开拓、创新、公平、分享”的精神，
                        将互联网特性全面的应用在教育领域，致力于为教育机构及求学者打造一站式互动在线教育品牌。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">了解了</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    $(document).ready(function () {
       $(".dropdown-menu a").click(function () {
           var href=$(this).attr("href");
           $("#dropdown-tab a[href='"+href+"']").tab('show');
       });
    });

</script>
</body>
</html>


最后发现，其实写一个网页并不难，不要将框架想的有多复杂，框架的目的不就是方便我们进行开发的嘛……加油

yingzizizizizizzz
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用BootStrap制作网页页面
m0_65725031的博客
05-05 9061
今天主要是大家使用BootStrap制作网页页面，在上一篇文章中我们的网页制作就使BootStrap，但是由于涉及的不是很多，也没有和大家讲解，今天主要是教大家BootStrap 5,该版本是最新的相对4来说更加简单，方便我们使用。 BootStrap的基本使用 在百度上面搜索BootStrap的官网，去到官网，官网上有各种我们需要在页面上使用的代码。 我们只需要将代码复制，放置到页面上使用，大家根据需求去对代码进行更改。 BootStrap上手是非常简单的。 BootStrap实操 将我...
Bootstrap页面布局
m0_68126539的博客
05-04 447
书籍页面 <title>案例1:实现搜索页面</title> <!-- 引入Bootstrap的css(样式) --> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <style type="text/css"> .navbar-collapse{ flex-grow:0;/* 固定容器中 1代表弹性扩大占用父容
自己动手搭网站（四）：用bootstrap写几个简单的页面
Tao_Shimmer的博客
03-27 1万+
目录前言一、bootstrap简介二、bootstrap环境准备2.1 下载bootstrap2.2 下载jQuery2.3 补充三、bootstrap搭建页面3.1 bootstrap引入项目bootstrap搭建简单页面 前言 这是博主自己动手搭建网站尝试过程的一些记录，上篇electerm远程连接云服务器，部署环境并发布第一个静态页面 自己动手搭建网站系列总目录 上篇写了连接云服务器，并发布一个静态页面，至此，所谓的“网站”总算有了点东西，然而，那确实就是一点东西…接下来的目标是把网站搭建得好看点并实
Bootstrap主页面搭建（十四）
dengfengling999的博客
12-04 1690
创建主页面：index.jsp：引入bootstrap依赖：首先写导航条，复制代码更改： 使用栅格布局： 菜单栏使用手风琴组件，复制代码：修改手风琴代码：手风琴嵌套列表组 用户管理页面跟主页面，导航栏，菜单栏都相同，不同的是页面中心内容部分，所以复制index主页面代码，修改页面中心内容部分的代码： 添加分页、消息提示警告框： 第二个面板： 点击修改：用户列表页list.html面详细代码： 页面联合搭建： 下面分被创建分模块：主页面引用：分别复制list1，l
利用Bootstrap框架制作Bootstrap中文网首页（响应式布局）
Zhang_wang_yun的博客
04-05 5581
利用Bootstrap框架制作Bootstrap中文网首页（响应式布局）
学会Web UI框架--Bootstrap，快速搭建出漂亮的前端界面
最新发布
景天科技苑
03-10 1万+
bootstrap是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件，bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。 Bootstrap诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架。 是一个用于快速开发Web应用程序和网站的前端框架。 Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷。
Bootstrap 创建网页
覃庆奖
08-05 466
前言 Bootstrap是能做什么？那么如何使用Bootstrap？如果感兴趣的话，请看下文！ （1）可以去官网下载文档：https://www.bootcss.com/，然后引到项目中！ （2）结构 （3）代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <...
让你快速搭建一个bootstrap页面
10-20
这个“让你快速搭建一个bootstrap页面”的资源，显然是一个精心整理的Bootstrap模板集合，旨在帮助初学者和有经验的开发者节省时间，快速创建符合现代标准的网页。 Bootstrap的核心特性包括响应式网格系统、预定义...
学做Bootstrap的第一个页面
09-02
一个典型的Bootstrap页面通常包括以下几个部分： 1. **DOCTYPE声明**：`<!DOCTYPE html>`，确保浏览器以标准模式解析HTML文档。 2. **HTML元素**：`<html>`标签是整个HTML文档的根元素。 3. **头部（Head）**：`...
基于bootstrap的一套页面
01-10
总的来说，"基于bootstrap的一套页面"提供了一个完整的网页设计解决方案，无论是对于初学者还是经验丰富的开发者，都是一个宝贵的资源。通过Gentelella-master，你可以快速启动一个新的项目，或者为现有的网站添加新...
一套响应式的bootstrap产品展示页面模板 - Produkta
12-18
一套响应式的bootstrap产品展示页面模板 - Produkta,学习下载使用
bootstrap 免费登陆页面、登陆表单（共三款）
11-09
bootstrap-login-forms.zip bootstrap-login-forms.zip bootstrap 免费登陆页面、登陆表单（共三款）
bootstrap页面模板
09-03
这个"bootstrap页面模板"压缩包提供了两种不同的主题模板，适合不同用户的需求。这些模板可以帮助开发者节省时间，无需从头开始设计页面，而是可以直接在现有的设计基础上进行修改和定制。 Bootstrap框架的核心特性...
bootstrap后台页面
03-18
在"后台"这个压缩包中，可能包含的是使用Bootstrap框架开发的后台管理界面的源代码。开发者通常会用Bootstrap来构建仪表盘、表格、表单、图表等各种后台功能模块，因为它的组件丰富且易于定制。使用Bootstrap，...
Bootstrap布局（一）
m0_69034993的博客
09-29 2696
当移动端浏览器展示PC端网页内容时，由于移动端设备屏幕比较小，布局视口不能像PC端浏览器那样完美地展示网页，网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。视口（Viewport）最早是由苹果公司在推出iPhone手机时发明的，其目的是为了让iPhone的小屏幕尽可能完整显示整个网页，它是浏览器显示页面内容的屏幕区域。视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。
[前端]基于Bootstrap搭建登录页面，保姆级讲解，面面俱到~~~
热门推荐
qq_41604569的博客
04-05 2万+
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。在前端页面设计占有一定份额，今天手把手带你整除登录界面，最后的结果图如下： 页面要求 主要： 用户名 密码 同意单选框 登录按钮 修饰： 边框 阴影 开撸 1.新建一个login_demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>LoginDe
前端——bootstrap响应式网页制作-星游记主题（大作业+源码）
Pan_peter的博客
06-11 1万+
【自制星游记续】十年后，我们再飞行！！！_哔哩哔哩_bilibili六一快乐，伙伴们。！！！！！！！！！！！！！！！！，相关视频：【自制星游记第28站】迷失的方向，最后的倒计时！，【自制星游记第27站】把彩虹海画下来，为自己而活，𝐓𝐌耗时𝟏𝟏𝟒𝟓𝟏𝟒秒修复的星游记《再飞行》，只为让你们带着梦想再次高高的飞起来啊！，纳米核心 第一季，2023，再等星游！，九年相识，三年等待！终将再一次响彻整个宇宙！，星游记，一部曾经有机会触碰那个天花板的作品。
运用 bootstrap 创建简单的登陆界面
m0_73384165的博客
08-15 3294
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。​Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
Bootstrap页面排版
qq_44981598的博客
09-14 135
框架Bootstrap 小标题Bootstrap 框架</p><p class="text-right">Bootstrap 框架</p><p class="text-left">Bootstrap 框架bootatrap框架
f:\JAVA\ideaworkplace\vscodeWorkSpace\BootstrapDemo\第一个BootStrap页面.html:1 <!DOCTYPE html> ^
09-29
但是，您提供的引用内容似乎没有涉及到f:\JAVA\ideaworkplace\vscodeWorkSpace\BootstrapDemo\第一个BootStrap页面.html的内容。如果您有关于该文件的具体问题，请提供更多信息，以便我能够给出更准确的答案。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值