使用Bootstrap的栅格布局实现一个简单的demo

最新推荐文章于 2022-11-20 16:57:03 发布
最新推荐文章于 2022-11-20 16:57:03 发布
阅读量525 收藏 3
点赞数
分类专栏： 响应式布局 Bootstrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46872121/article/details/109838103
版权 
<!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>响应式布局</title>
    <!-- Bootstrap -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <style>
        /*
          注意：要新加样式时，最好自己自定义类或id去增加，不要再原来bootstrap的类或id上添加，防止覆盖掉原来的，产生结构上的混乱
          图片要设置相应式时：w：100%；
          不是响应式时，一般：w：auto
        */
        img {
            width: 100%;
        }

        .zidingyi,
        .zidingyi .item {
            height: 500px;
            overflow: hidden;
        }

        .zidingyi {
            margin-top: 50px;
        }

        @media only screen and (max-width:768px) {
            .zidingyi {
                height: 300px;
            }
        }

        .damu-thumbnail {
            border: none;
        }

        .damu-thumbnail img {
            width: auto;
        }

        .damu-three {
            margin-top: 50px;
        }

        .damu-hr {
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <!-- 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="#">简述</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">特点 <span class="caret"></span></a>
                        <ul class="dropdown-menu" id="damu-nav">
                            <li><a href="#Chrome">Chrome</a></li>
                            <li><a href="#Firefox">Firefox</a></li>
                            <li><a href="#safari">safari</a></li>
                            <li><a href="#Opera">Opera</a></li>
                            <li><a href="#ie">IE</a></li>
                        </ul>
                    </li>
                    <li><a href="#" data-toggle="modal" data-target="#exampleModal">关于</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div id="carousel-example-generic" class="carousel slide zidingyi" data-ride="carousel" data-interval="2000"
        data-wrap="ture">
        <!-- 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>
            <li data-target="#carousel-example-generic" data-slide-to="3"></li>
            <li data-target="#carousel-example-generic" data-slide-to="4"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="./imgs/chrome-big.jpg" alt="..." />
            </div>
            <div class="item">
                <img src="./imgs/firefox-big.jpg" alt="..." />
            </div>
            <div class="item">
                <img src="./imgs/ie-big.jpg" alt="..." />
            </div>
            <div class="item">
                <img src="./imgs/opera-big.jpg" alt="..." />
            </div>
            <div class="item">
                <img src="./imgs/safari-big.jpg" alt="..." />
            </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>

    <!--三列图-->
    <div class="container damu-three">

        <div class="row">
            <div class="col-md-4 ">
                <div class="thumbnail damu-thumbnail text-center">
                    <img src="./imgs/chrome-logo-small.jpg" alt="...">
                    <div class="caption">
                        <h3>Chrome</h3>
                        <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
                        <p>
                            <a href="#" class="btn btn-default" role="button">点我下载</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail damu-thumbnail text-center">
                    <img src="./imgs/firefox-logo-small.jpg" alt="...">
                    <div class="caption">
                        <h3>Chrome</h3>
                        <p">Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
                            <p>
                                <a href="#" class="btn btn-default" role="button">点我下载</a>
                            </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail damu-thumbnail text-center">
                    <img src="./imgs/safari-logo-small.jpg" alt="...">
                    <div class="caption">
                        <h3>Chrome</h3>
                        <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
                        <p>
                            <a href="#" class="btn btn-default" role="button">点我下载</a>
                        </p>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="container damu-hr">
        <hr />
    </div>


    <!--标签页-->
    <div class="container" id="damu-tab">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist" id="damu-list">
            <li role="presentation" class="active"><a href="#Chrome" aria-controls="Chrome" role="tab"
                    data-toggle="tab">Chrome</a></li>
            <li role="presentation"><a href="#Firefox" aria-controls="Firefox" role="tab" data-toggle="tab">Firefox</a>
            </li>
            <li role="presentation"><a href="#safari" aria-controls="safari" role="tab" data-toggle="tab">Safari</a>
            </li>
            <li role="presentation"><a href="#Opera" aria-controls="Opera" role="tab" data-toggle="tab">Opera</a></li>
            <li role="presentation"><a href="#ie" aria-controls="ie" role="tab" data-toggle="tab">IE</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="Chrome">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-7">
                            <h2>IE 你懂的</h2>
                            <h4>Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet
                                Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。</h4>
                        </div>
                        <div class="col-md-5"><img class="img-circle" src="imgs/Chrome-logo.jpg"></div>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="Firefox">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-5"><img class="img-circle" src="imgs/firefox-logo.jpg"></div>
                        <div class="col-md-7">
                            <h2>IE 你懂的</h2>
                            <h4>Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet
                                Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。</h4>
                        </div>

                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="safari">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-7">
                            <h2>IE 你懂的</h2>
                            <h4>Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet
                                Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。</h4>
                        </div>
                        <div class="col-md-5"><img class="img-circle" src="imgs/safari-logo.jpg"></div>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="Opera">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-5"><img class="img-circle" src="imgs/opera-logo.jpg"></div>
                        <div class="col-md-7">
                            <h2>IE 你懂的</h2>
                            <h4>Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet
                                Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。</h4>
                        </div>

                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="ie">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-7">
                            <h2>IE 你懂的</h2>
                            <h4>Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet
                                Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。</h4>
                        </div>
                        <div class="col-md-5"><img class="img-circle" src="imgs/ie-logo.jpg"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>


    <!--版权内容-->
    <div class="container">

        &copyAmelian
    </div>


    <!--模态框 触发事件时才会调用-->
    <div class="modal fade" tabindex="-1" role="dialog" id="exampleModal">
        <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">&times;</span></button>
                    <h4 class="modal-title">Modal title</h4>
                </div>
                <div class="modal-body">
                    <p>One fine body&hellip;</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="./js/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="./js/bootstrap.min.js"></script>
    <script>
        //点击到导航条上的a标签，跳转到标签页
        $(function () {
           /* $("#damu-nav > li > a").click(function (e) {
                var href = $(this).attr("href");
                console.log("#damu-list > li > a[href=" + (href) + "]");
                $("#damu-list > li > a[href=" + (href) + "]").tab('show');
                e.preventDefault();
            })*/
            $("#damu-nav li a").click(function(e){
                var href = $(this).attr("href");
                console.log(href)
                $(document).scrollTop($("#damu-tab").offset().top-100);
                console.log("#damu-list > li > a[href=" + (href) +"]");
				$('#damu-list li a[href="+href+"]').tab('show');
				e.preventDefault();
			})
				
        })
    </script>
</body>

</html>

在这里插入图片描述

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

学学学无止境
关注
专栏目录
bootstrap4 网格布局实例_Bootstrap实现的经典栅格布局效果实例【附demo源码】
weixin_30300027的博客
01-14 769
本文实例讲述了Bootstrap实现的经典栅格布局效果。分享给大家供大家参考，具体如下：先来看看效果图：具体代码如下(某管理系统的Bootstrap实现)：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">XXXXX系统body {padding-top: 50px;padding-bottom: 40px;col...
使用Bootstrap的栅格布局实现一个简单的demo(1)，web前端开发实战项目
2401_84097520的博客
04-05 623
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可免费领取！由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】
Bootstrap实现的经典栅格布局效果实例【附demo源码】
11-28
本文实例讲述了Bootstrap实现的经典栅格布局效果。分享给大家供大家参考，具体如下： 先来看看效果图： 具体代码如下（某管理系统的Bootstrap实现）： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="tex
bootstrap table 的简单Demo
weixin_33671935的博客
03-03 115
 暂时够用，不够用再补充 T_T   script: &lt;link rel="stylesheet" href="lib/bootstrap.min.css"&gt; &lt;!-- table css--&gt; &lt;link rel="stylesheet" href="lib/bootstrap-table.css"&gt; &lt;s
Bootstrap布局的网站首页DEMO
10-03
用bootstrap前端框架搭建的简洁风格网站首页。框架首页：http://www.bootcss.com/
Bootstrap实战---成长平台(栅格布局)
Season CSDN博客
07-20 292
Bootstrap实战—成长平台(栅格布局) 目标布局 我的布局：不含JS和CSS特效 我的代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>融职教育</title> <!--移动设备优先--> <meta name="viewport" content="width=device-wid..
如何使用bootstrap栅格布局？
weixin_41506097的博客
06-02 2687
一、背景介绍Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。今天分享的知识点：*栅格系统实现原理*container/row/col之间的关系*自定义列*用媒体查询实现响应式布局二、知识剖析（一）栅格布局实现原理“行（row）”必须包含在 .container （固定...
bootstrap中自己总结的各种demo
11-11
Bootstrap是世界上最流行的前端开发框架之一，它为...对于初学者来说，这是一个宝贵的资源库，可以帮助他们快速上手并进阶；对于经验丰富的开发者，这些示例也能作为灵感来源，帮助他们在项目中更好地利用Bootstrap。
23种bootstrap导航菜单布局
01-08
在HTML和CSS方面，Bootstrap使用栅格系统（Grid System）和预处理器（如SASS或LESS）来实现响应式布局。通过调整栅格列数和断点，可以轻松地适应不同设备屏幕尺寸。CSS样式表提供了丰富的预定义样式，如字体、颜色、...
Bootstrap简单Demo（2015年05月-18日）
dizhouna1906的博客
05-27 133
Bootstrap的简单使用 1、Bootstrap是什么？ 这是Bootstrap官网上对它的描述：Bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目 2、Bootstrap的使用需求 1.Bootstrap是一个快速开发Web应用程序的前端框架，并且有丰富的组件、插件，可以用于我们快速开发出用户友好的WEB界面 2.支持移...
bootstrap案例包括： 响应式导航菜单；banner轮播；栅格布局；固定定位
05-19
bootstrap案例包括： 响应式导航菜单；banner轮播；栅格布局；固定定位。
bootstrap栅格系统响应式布局
02-05
bootstrap栅格系统响应式布局，根据浏览器不同宽度进行自适应地样式响应调整，使pc、平板、手机三端不同风格完美融合~
bootstrap完整Demo
01-08
bootstrap完整Demo。 BootStrap是基于HTML、CSS和JavaScript的框架，使你只需要写简单的代码就可以很快的搭建一个还不错的前端框架，他是后端程序员的福音，使他们只需要专注业务逻辑，而无须浪费太多的精力在界面设计上。 它可以开发全响应式网页——不论你使用手机、平板电脑、普通个人电脑浏览网站内容，所有的元素都可以很优雅的呈现。所以，可以用他来开发适合各种设备浏览的页面，避免了大量的因为兼容性而导致的重复劳动。 它的最新版本是4.0，国内目前用的较多的是3.x,我们的教程也基于BootStrap3.x版本，也是目前最受欢迎的前端框架之一。 你可以使用默认的BootStrap样式和组件，你也可以对代码简洁。
bootstrap栅格布局和常用案例
weixin_42056687的博客
07-30 773
1，bootstrap 中文网 ： http://www.bootcss.com/ 英文网 : http://getbootstrap.com/ 2，容器 2.1流体布局容器 容器的width为auto，只是两边加了15px的padding。 2.2固定布局 容器的width会随设备分辨率的不同而生产变化 分辨率阈值 w >=1200 容器的width为1170 左右padding为15 （注意是borderBox） 1200>w >=992 容器的width为970
Bootstrap3栅格系统布局实例
歪脖先生的博客
05-02 3859
布局实例 Bootstrap3栅格系统的核心理念是移动设备优先，其实也就是小设备优先。使用这些栅格类，再结合栅格系统的规则，就可以构建出千变万化的页面布局。 先看一个简单实例，来加深对移动设备优先的理解。假设我们只使用单一的一组 .col-md-* 栅格类来创建一个栅格系统： <divclass="row"> <divclass="col-md-4"&g...
Bootstrap框架实战教程（栅格布局的应用）
巴胡子
03-22 1120
最近用Bootstrap框架学着做了一个项目，用时3天，很是粗糙，不过每个模块讲解都很详细，项目模板、素材已经放到github，欢迎下载，试看 https://zouzhuo939.github.io/Bootstrap_3/ 项目分为7大块 前提知识： 在项目中添加下好的Bootstrap框架的项目文件的时候需要下载好的文件 （下载不分前后，使用导入需要注意顺序） 1、jQuery库文件文件...
Bootstrap-栅格实例（二）
dengfengling999的博客
11-20 870
yann移动到第一个：class样式添加： col-md-pull-8 据right 往左移动2个位置 8(2*4) 个单位。webpack的calss添加：col-sm-push-6 此时缩小到sm 据left 往右移动1个位置 12/2=6。react的class添加：col-sm-pull-6 此时缩小到sm 据right 往左移动1个位置 6个单位。第二个跟第三个换一换：第二个class添加：col-lg-push-3 据左边移动3个单位，往右移一个位置。
bootstrap4 网格布局实例_Bootstrap4响应式布局之栅格系统
weixin_39549312的博客
12-24 475
前面说了Bootstrap4的下载和简单使用，现在我们接着往下学习，Bootstrap4的响应式布局主要依靠栅格系统来实现的。面老K先来讲解一下Bootstrap4的栅格系统，让你能够更快的了解Bootstrap4.(PS：更详细的介绍请访问原K先生的博客)Bootstrap4栅格系统栅格系统是基于一个12列、有5种响应尺寸(对应不同的屏幕)的布局。Bootstrap4栅格系统共有五个类：.col...
Bootstrap栅格布局响应式
最新发布
06-15
1. **栅格系统**：Bootstrap的栅格由12个等宽的列构成，每一列代表一个屏幕宽度的百分比。例如，`<div class="col-md-6">`表示在中等屏幕（md）及以上设备上占据6列。 2. **响应式列**：Bootstrap提供了多个屏幕...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值