响应式栅格布局系统demo

最新推荐文章于 2023-06-04 18:49:59 发布
最新推荐文章于 2023-06-04 18:49:59 发布
阅读量269 收藏
点赞数
文章标签： javascript 操作系统 ViewUI
原文链接：http://www.cnblogs.com/yuebing/p/6403323.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.0, user-scalable=no">
    <title></title>

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


    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <style>
        div{
            /*border : 1px solid #000;*/
        }
    </style>
</head>
<body>
    <div class="container">
            <h1>响应式栅格布局系统demo</h1>
        <!--页头-->
    <div class="row">
        <div class="col-md-4 col-sm-6 col-xs-12">
            <ul class="list-inline">
                <li class="bg-info btn-sm table-hover"><a href="#">Home</a></li>
                <li class="bg-info btn-sm"><a href="#">News</a></li>
                <li class="bg-info btn-sm"><a href="#">Product</a></li>
            </ul>
        </div>
        <div class="col-md-offset-5 col-md-3 col-sm-5 col-sm-offset-1 col-xs-12">
            <input class="form-control" type="text">
        </div>
    </div>    
    <!--页面主体-->
    <div class="row">
        <div class="col-md-2 col-sm-3 col-xs-12">左侧的导航 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consectetur culpa excepturi, facilis maiores numquam quisquam quod temporibus! Aperiam ea officiis voluptate. Dolores libero minima numquam quasi repellat reprehenderit tenetur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque eaque facilis nulla omnis perspiciatis? Architecto cupiditate debitis deleniti deserunt, dolore eos fugiat voluptatibus. Autem cupiditate doloremque placeat quibusdam temporibus vero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad at autem dolorem excepturi incidunt labore laborum optio perspiciatis quaerat reprehenderit saepe, soluta velit veritatis voluptatem? Laborum sunt velit voluptatem!</div>
        <div class="col-md-8 col-sm-9 col-xs-12">
            <div class="row">
                <div class="col-sm-3 col-xs-6"><img class="img-responsive" src="img/1.jpg" alt=""></div>
                <div class="col-sm-3 col-xs-6"><img class="img-responsive" src="img/2.jpg" alt=""></div>
                <div class="col-sm-3 col-xs-6"><img class="img-responsive" src="img/3.jpg" alt=""></div>
                <div class="col-sm-3 col-xs-6"><img class="img-responsive" src="img/4.jpg" alt=""></div>
            </div>
            中央的主体 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores consectetur culpa eveniet facilis ipsum laudantium maiores numquam, porro praesentium quaerat quisquam repellat repellendus sed suscipit temporibus, ut vero voluptatem, voluptatum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque aut corporis, cupiditate eaque impedit iure modi neque nisi numquam quae repellat tempore! Facilis id ipsa laboriosam odit porro repellat sit!lorem     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam commodi, voluptatem. Iusto magnam molestias praesentium repellat suscipit! At laborum nam optio tempora! A alias cum facere laboriosam laborum numquam sed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores culpa cumque quidem reprehenderit rerum voluptatum! Amet aut cumque cupiditate eligendi ipsa iure labore nobis perferendis recusandae repellendus similique totam, ullam?</div>
        <div class="col-md-2 hidden-sm hidden-xs">右侧的广告 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid autem, earum eligendi est et iure magni nemo optio, perferendis placeat quaerat quo rem voluptatum. Consequatur consequuntur impedit nesciunt perferendis rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad assumenda doloremque omnis sunt voluptatibus? Aliquid animi at doloribus earum eius, enim fugiat hic modi molestiae placeat quos, similique? Ad, magni! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias architecto consectetur dicta doloremque enim esse est fugiat harum hic ipsam laudantium modi mollitia nesciunt quidem, recusandae saepe tempore tenetur? Tempore?</div>
    </div>
    </div>

<br><br><br><br><br><br><br><br><br><br>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>
<script>
    (function () {
        var s = document.createElement("script");
        s.onload = function () {
            bootlint.showLintReportForCurrentDocument([]);
        };
        s.src = "js/bootlint.js";
        document.body.appendChild(s)
    })();
</script>
</body>
</html>

转载于:https://www.cnblogs.com/yuebing/p/6403323.html

weixin_34384915
关注
响应式网站demo
10-22
用的响应式布局，初学者可以看看
demo-响应式
01-24
3. **弹性图片和网格**：使用`max-width: 100%`可以使图片在任何容器内都能自适应，而弹性网格系统，如Bootstrap的栅格系统，能帮助创建可伸缩的布局。 4. **自适应视频和图片**：响应式设计也应考虑多媒体元素，如...
响应式布局框架 Pure-CSS 5.0 示例中文版-下
weixin_33984032的博客
01-08 167
10. 表格 Tables 在 table 标签增加 .pure-table 类 &lt;table class="pure-table"&gt;     &lt;thead&gt;         &lt;tr&gt;             &lt;th&gt;#&lt;/th&gt;             &lt;th&gt;Make&lt;/th&gt;
CSS响应式设计之栅格系统
weixin_34220963的博客
10-24 649
2019独角兽企业重金招聘Python工程师标准>>> ...
响应式栅格系统
qq_42788101的博客
06-24 396
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>响应式栅格系统</title> <style> .row{ width: 100%; } ...
Bootstrap4响应式布局之栅格系统
weixin_30515513的博客
11-16 225
前面说了Bootstrap4的下载和简单使用，现在我们接着往下学习，Bootstrap4的响应式布局主要依靠栅格系统来实现的。面老K先来讲解一下Bootstrap4的栅格系统，让你能够更快的了解Bootstrap4.（PS：更详细的介绍请访问原K先生的博客） Bootstrap4栅格系统 栅格系统是基于一个12列、有5种响应尺寸(对应不同的屏幕）的布局。Bootstrap4栅格系统共...
响应式多平台前端demo
05-28
响应式设计是一种现代网页开发技术，它允许网页根据用户的设备和屏幕尺寸自动调整布局、内容和功能，确保在不同平台上提供一致且优化的用户体验。"响应式多平台前端demo"这个项目显然旨在展示如何利用HTML5和CSS3来...
bootstrap 响应式网页demo
01-09
1. **Bootstrap栅格系统**：Bootstrap的栅格系统是其响应式布局的基础，它使用12列的布局模型，允许开发者轻松创建多列布局，并在不同屏幕尺寸下自动调整。例如，`col-sm-4`、`col-md-6`和`col-lg-8`这样的类用于...
Bootstrap实现的经典栅格布局效果实例【附demo源码】
08-30
Bootstrap栅格系统是网页设计和开发中的一个强大工具，它基于12列的响应式布局，可以帮助开发者...学习和理解这个实例，有助于深入掌握Bootstrap的栅格布局机制，以及如何利用其预定义的类和组件快速构建响应式网站。
响应式的网页demo(原创)
01-24
在这个“响应式的网页demo”中，我们可能会看到如何使用Bootstrap的栅格系统和组件来构建一个动态的网页布局。例如，首页可能包含一个响应式的头部，包含品牌标识、导航链接和搜索框；接着是轮播图，展示吸引人的...
bootstrap栅格系统响应式布局
02-05
bootstrap栅格系统响应式布局，根据浏览器不同宽度进行自适应地样式响应调整，使pc、平板、手机三端不同风格完美融合~
响应式栅格系统生成器
11-16
响应式栅格系统生成器响应式栅格系统生成器响应式栅格系统生成器响应式栅格系统生成器
响应式框架Bootstrap栅格系统的实例
08-28
下面小编就为大家分享一篇响应式框架Bootstrap栅格系统的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
CSS3简单的栅格系统
weixin_30284355的博客
11-23 134
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>高仿栅格系统</title> <!--栅格系统--> <link rel="stylesheet" href="css/s...
栅格响应式布局
sundanping_123的博客
09-03 338
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, m...
网格系统：响应式布局
weixin_43706224的博客
05-24 223
窗口小于576像素的时候就会显示一列 List item
【练习】响应式布局
weixin_30770495的博客
07-17 145
本文参考是参考http://www.netmagazine.com/tutorials/build-basic-responsive-site-css做的练习。 文中作者阐述了对于响应式设计不应该针对不同的终端显示不同的内容，当用户在pc上可以查到的内容，在移动端却怎么也找不到，这是很困惑的一件事情。所以响应式设计要做的是适当的缩放，针对不同的设备显示适当的布局，而不是改变内容。...
bootstrap_栅格系统_响应式工具_源码分析
aof26372的博客
12-01 239
-----------------------------------------------------------------------------margin 为负 ​使盒子重叠 ​等高 等高布局 双飞翼布局 ​盒子往一边 推 或者 拉 ----------------------------------------------...
bootstrap响应式栅格布局
最新发布
qq_55299191的博客
06-04 695
需求说明： 1.使用container、row等栅格系统的知识布局一个响应式的网页，需要适配中等屏幕、小屏幕、超小屏幕 2.对于“2000+全球师资 100%欧美外教”等部分的字体大小颜色需要自己写CSS样式 3.页面上的图片部分可以作为背景图片引入进来
bootstrap 3 模态框 栅格布局 DEMO
05-27
以下是一个示例，演示如何在 Bootstrap 3 模态框中使用栅格布局： ```html <!-- 模态框触发按钮 --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">打开模态框</button> <!-- 模态框 --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">模态框标题</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="row"> <div class="col-md-6"> <p>左侧内容</p> </div> <div class="col-md-6"> <p>右侧内容</p> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存更改</button> </div> </div> </div> </div> ``` 在上面的示例中，我们在模态框的 `.modal-body` 中使用了 `.row` 和 `.col-md-6` 类来创建了一个两列的布局。您可以根据需要添加更多的列和行来实现自己的布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值