bootstrap—响应式布局

于 2018-10-11 11:10:40 发布
阅读量136 收藏
点赞数
分类专栏： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41155191/article/details/83009595
版权

 

<!DOCTYPE html>
<html lang="en">
<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>bootstrap—响应式布局</title>
    <link href=css/bootstrap.css rel="stylesheet">
    <style>
        .container h3,.container p{
            text-align: center;
        }
    </style>
</head>
<body>
    <!--先写容器-->
    <div class="container">
        <!--在容器没有固定的情况下，可以只写一个row（栅格系统超过了会自动换行）-->
        <div class="row">
            <!--分栏 col-lg-3 col-md-4 col-sm-6 col-xs-12 -->
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="img1.png" />
                    <h3>优站精选</h3>
                    <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="img1.png" />
                    <h3>优站精选</h3>
                    <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="img1.png" />
                    <h3>优站精选</h3>
                    <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="img1.png" />
                    <h3>优站精选</h3>
                    <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="img1.png" />
                    <h3>优站精选</h3>
                    <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="img1.png" />
                    <h3>优站精选</h3>
                    <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="img1.png" />
                    <h3>优站精选</h3>
                    <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="img1.png" />
                    <h3>优站精选</h3>
                    <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="img1.png" />
                    <h3>优站精选</h3>
                    <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="img1.png" />
                    <h3>优站精选</h3>
                    <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="img1.png" />
                    <h3>优站精选</h3>
                    <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="img1.png" />
                    <h3>优站精选</h3>
                    <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                </div>
            </div>
        </div>
    </div>
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/bootstrap.js"></script>
</body>
</html>

 

小嘟啦咪
关注
专栏目录
Bootstrap响应式布局
10-24
Bootstrap响应式布局是一种基于前端开发框架Bootstrap实现的网页设计技术，它使得网页能够在不同设备上自动适应，提供一致且良好的用户体验。Bootstrap是由Twitter推出的一款开源工具包，它包含了一系列CSS和...
腾讯全端Bootstrap响应式布局
06-07
总的来说，实现腾讯全端Bootstrap响应式布局，需要熟练掌握HTML的结构化标签，理解Bootstrap框架的栅格系统和组件，以及灵活运用CSS媒体查询。这不仅有助于创建出高质量的网页，也有助于提升你的前端开发技能，更好...
谈一谈bootstrap响应式布局
09-02
Bootstrap响应式布局是一种广泛应用于现代网页设计的技术，它旨在实现跨平台、跨设备的兼容性，确保网页在不同尺寸的屏幕设备上都能提供良好的用户体验。Bootstrap框架由Twitter开发并开源，它提供了一系列预设的CSS...
bootstrap响应式布局导航效果
06-06
在"bootstrap响应式布局导航效果"中，我们主要关注的是Bootstrap导航条（Navbar）如何适应不同屏幕尺寸。Bootstrap的导航条具有内置的响应式功能，当屏幕宽度变窄时，导航条会折叠成一个汉堡菜单，以节省空间并保持...
MiniGui业务开发基础培训-htk
11-11
MiniGui业务开发基础培训-htk
com.harmonyos.exception.DiskReadWriteException(解决方案).md
11-11
鸿蒙开发中碰到的报错，问题已解决，写个文档记录一下这个问题及解决方案
网络分析-Wireshark数据包筛选技巧详解及应用实例
11-11
内容概要：本文档详细介绍了Wireshark软件中各种数据包筛选规则，主要包括协议、IP地址、端口号、包长以及MAC地址等多个维度的具体筛选方法。同时提供了大量实用案例供读者学习，涵盖HTTP协议相关命令和逻辑条件的综合使用方式。 适合人群：对网络安全或数据分析有一定兴趣的研究者，熟悉基本网络概念和技术的专业人士。 使用场景及目标：适用于需要快速准确捕获特定类型网络流量的情况；如网络安全检测、性能优化分析、教学演示等多种实际应用场景。 阅读建议：本资料侧重于实操技能提升，在学习时最好配合实际操作练习效果更佳。注意掌握不同类型条件组合的高级用法，增强问题解决能力。
com.harmonyos.exception.BatteryOverheatException(解决方案).md
11-11
鸿蒙开发中碰到的报错，问题已解决，写个文档记录一下这个问题及解决方案
com.harmonyos.exception.ServiceUnavailableException(解决方案).md
11-11
鸿蒙开发中碰到的报错，问题已解决，写个文档记录一下这个问题及解决方案
MATLAB上机试题 MATLAB原理及应用实验报告 第3章 MATLAB的符号运算.docx
最新发布
11-11
内容概要：本文档详细介绍了MATLAB的符号运算，涵盖符号对象的命名方法、基本运算、级数求法等多个方面。通过具体的实验案例，如确定符号表达式中的变量、执行四则运算、提取分子分母、因式分解与展开、化简符号表达式、级数符号求和、符号微积分以及符号方程的求解，帮助学生理解和掌握MATLAB中的符号运算技巧。 适合人群：适用于对MATLAB有一定了解的大专院校的学生、研究人员和技术工作者。 使用场景及目标：通过本课程的学习，学员能够熟练使用MATLAB完成复杂的数学问题解决，提高科研项目和工程任务中对数学模型的建模能力和问题解决效率。 其他说明：文档包含详细的实验步骤指导和实例演示，同时提供了丰富的练习题供读者巩固所学知识。对于想要深入研究MATLAB符号运算的人来说是一份宝贵资料。
springboot vue2 mysql 校园美食分享平台 论文.docx
11-11
适合参考论文写作
联通精准营销平台外呼系统HTTP接口规范
11-11
内容概要：文档介绍了联通精准营销平台外呼系统的HTTP接口规范（V2.3），提供了API接口用于外呼业务的各种功能，确保企业的市场拓展和技术操作的无缝衔接。主要涵盖接口列表如坐席登录、数据获取、企业修改密码等，并详细说明了每个接口的方法、路径、请求参数及返回状态。针对外呼过程中的常见问题给出了处理指导，旨在帮助企业高效开展外呼业务，同时保障数据的安全性和合规性。 适用人群：适用于企业IT技术人员、营销人员以及任何希望利用电信运营商提供的API来增强自身外呼和数据分析能力的专业人士。 使用场景及目标：企业可通过这些API实现与联通平台的数据交互，包括但不限于获取客户资料、发起呼叫、管理和统计外呼数据，从而提升营销效率和客户服务体验。特别强调在外呼过程中涉及的身份认证、信息安全等方面的处理措施。 其他说明：此接口文档更新频繁，版本为2.3。企业需要及时关注最新动态以便充分利用各项功能优化营销策略。同时应注意遵守中国联通关于数据安全的相关政策法规。
springboot vue2 mysql 图书馆管理系统 论文.docx
11-11
适合参考论文写作
java项目，课程设计-springboot校园在线拍卖系统
11-11
java项目，课程设计-springboot校园在线拍卖系统，随着互联网技术的高速发展，人们生活的各方面都受到互联网技术的影响。现在人们可以通过互联网技术就能实现不出家门就可以通过网络进行系统管理，交易等，而且过程简单、快捷。同样的，在人们的工作生活中，也就需要互联网技术来方便人们的日常工作生活，实现工作办公的自动化处理，实现信息化，无纸化办公。 本课题在充分研究了在Springboot框架基础上，采用B/S模式，以Java为开发语言，MyEclipse为开发工具，MySQL为数据管理平台，实现的内容主要包括首页，个人中心，综合管理等功能。
全媒体运营+江苏工匠比赛
11-11
全媒体运营+江苏工匠比赛
com.pureharmony.exception.CredentialValidationException.md
11-11
鸿蒙开发中碰到的报错，问题已解决，写个文档记录一下这个问题及解决方案
com.harmonyos.exception.CloudServiceConnectionException(解决方案).md
11-11
鸿蒙开发中碰到的报错，问题已解决，写个文档记录一下这个问题及解决方案
com.harmonyos4.exception.VirtualMemoryAllocationException
11-11
鸿蒙开发中碰到的报错，问题已解决，写个文档记录一下这个问题及解决方案
IEC 60598-1-2020中文翻译.pdf
11-11
IEC 60598-1-2020中文翻译
BootStrap响应式布局实战教程
这个资源提供了一个全面的学习路径，不仅教授了BootStrap响应式布局的基础知识，还通过实践案例强化了理论理解，对于想要提升Web界面设计能力的开发者来说，是一份宝贵的资料。通过学习，开发者可以有效地构建适应...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值