[JavaWeb-Bootstrap]Bootstrap响应式布局

响应式布局

* 同一套页面可以兼容不同分辨率的设备。
* 实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子
* 步骤:1. 定义容器。相当于之前的table、* 容器分类:1. container:两边留白2. container-fluid:每一种设备都是100%宽度2. 定义行。相当于之前的tr   样式:row3. 定义元素。指定该元素在不同的设备上,所占的格子数目。样式:col-设备代号-格子数目* 设备代号:1. xs:超小屏幕 手机 (<768px):col-xs-122. sm:小屏幕 平板 (≥768px)3. md:中等屏幕 桌面显示器 (≥992px)4. lg:大屏幕 大桌面显示器 (≥1200px)* 注意:1. 一行中如果格子数目超过12,则超出部分自动换行。2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素沾满一整行。

示例代码如下:

<!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>Bootstrap HelloWorld</title><!-- Bootstrap --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) --><script src="js/jquery-3.2.1.min.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="js/bootstrap.min.js"></script><style>.inner{border:1px solid red;}</style>
</head>
<body><!--1.定义容器--><div class="container"><!--2.定义行--><div class="row"><!--3.定义元素在大显示器一行12个格子在pad上一行6个格子--><!--<div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div>--><div class="col-md-4 inner">栅格</div><div class="col-md-4 inner">栅格</div><div class="col-md-4 inner">栅格</div></div></div></body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/309346.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

N的阶乘的长度 V2(斯特林近似) 51Nod - 1130

题目&#xff1a; 输入N求N的阶乘的10进制表示的长度。例如6! 720&#xff0c;长度为3。 Input 第1行&#xff1a;一个数T&#xff0c;表示后面用作输入测试的数的数量。&#xff08;1 < T < 1000) 第2 - T 1行&#xff1a;每行1个数N。&#xff08;1 < N < 1…

Azure App Service 如何在第一时间用上最新版 .NET Core

点击上方关注“汪宇杰博客” ^_^导语微软会经常对 .NET Core 发布更新&#xff0c;通常为安全补丁。这不&#xff0c;今天早上&#xff0c;.NET Core 3.1.5 更新发布了。然而 Azure App Service 自身的 .NET Core runtime 并不会在第一时间更新&#xff0c;每次都要等几周后微软…

[JS-DOM]事件监听机制

事件监听机制 概念:某些组件被执行了某些操作后&#xff0c;触发某些代码的指行。*事件: 某些操作。如:单击&#xff0c;双击&#xff0c;键盘按下了&#xff0c;鼠标移动了。*事件源:组件。如:按钮&#xff0c;文本输入框...*监听器:代码。*注册监听:将事件&#xff0c;事件源…

Last non-zero Digit in N! HDU - 1066

题意&#xff1a; 求n!的最后一位非零数。 题目&#xff1a; The expression N!, read as “N factorial,” denotes the product of the first N positive integers, where N is nonnegative. So, for example, N N! 0 1 1 1 2 2 3 6 4 24 5 120 10 3628800 For this prob…

我们是如何做DevOps的?

一、DevOps的理解DevOps的概念理解DevOps 的概念在软件开发行业中逐渐流行起来。越来越多的团队希望实现产品的敏捷开发&#xff0c;DevOps 使一切成为可能。有了 DevOps &#xff0c;团队可以定期发布代码、自动化部署、并将持续集成 / 持续交付作为发布过程的一部分。一句话概…

word文档相关使用

主要是为了记忆&#xff0c;有的时候&#xff0c;之前查阅过&#xff0c;后来使用又忘记了&#xff0c;以后碰了就陆续添加吧&#xff0c;先开一个博文 文章目录插入图片&#xff0c;显示不全的问题&#xff1a;方法一&#xff1a;方法二&#xff1a;方法三&#xff1a;在左侧显…

[JavaWeb-XML]XML概述

XML&#xff1a; 1. 概念&#xff1a;Extensible Markup Language 可扩展标记语言* 可扩展&#xff1a;标签都是自定义的。 <user> <student>* 功能* 存储数据1. 配置文件2. 在网络中传输* xml与html的区别1. xml标签都是自定义的&#xff0c;html标签是预定义。…

调试实战 —— dll 加载失败之 Debug Release争锋篇

缘起 最近&#xff0c;项目里遇到一个 dll 加载不上的问题。实际项目比较复杂&#xff0c;但是解决后&#xff0c;又是这么的简单&#xff0c;合情合理。本文是我使用示例工程模拟的&#xff0c;实际项目中另有玄机&#xff0c;但问题的本质是一样的。本文从行文上与 《调试实战…

汉诺塔 X HDU - 2511

题目&#xff1a; 1,2,…,n表示n个盘子&#xff0e;数字大盘子就大&#xff0e;n个盘子放在第&#xff11;根柱子上&#xff0e;大盘不能放在小盘上&#xff0e;在第&#xff11;根柱子上的盘子是a[1],a[2],…,a[n]. a[1]n,a[2]n-1,…,a[n]1.即a[1]是最下面的盘子&#xff0e;…

[JavaWeb-XML]XML基本语法与快速入门

语法&#xff1a; * 基本语法&#xff1a;1. xml文档的后缀名 .xml2. xml第一行必须定义为文档声明3. xml文档中有且仅有一个根标签4. 属性值必须使用引号(单双都可)引起来5. 标签必须正确关闭6. xml标签名称区分大小写示例代码如下: <?xml version1.0 ?><users>…

Beetlex.Redis之Stream功能详解

有一段时间没有写文章&#xff0c;techempower的测试规则评分竟然发生了变化&#xff0c;只能忘着补充一下占比权重最多的数据更新示例了和深入设计一下组件模块化加载的设计。但在不久前有用户问了一下组件是否支持redis的Stream功能&#xff0c;看了一样相关资料后把功能实现…

一文说通Dotnet Core的后台任务

这是一文说通系列的第二篇&#xff0c;里面有些内容会用到第一篇中间件的部分概念。如果需要&#xff0c;可以参看第一篇&#xff1a;一文说通Dotnet Core的中间件一、前言后台任务在一些特殊的应用场合&#xff0c;有相当的需求。比方&#xff0c;我们需要实现一个定时任务、或…

[JavaWeb-XML]XML组成部分

组成部分&#xff1a; 1. 文档声明1. 格式&#xff1a;<?xml 属性列表 ?>2. 属性列表&#xff1a;* version&#xff1a;版本号&#xff0c;必须的属性* encoding&#xff1a;编码方式。告知解析引擎当前文档使用的字符集&#xff0c;默认值&#xff1a;ISO-8859-1* st…

2021年度训练联盟热身训练赛第五场 H题In-place Sorting+贪心构造

题意&#xff1a; 给你n个小于101810^{18}1018的大数&#xff0c;问在可以再不改变序列位置&#xff0c;之改变数值中某数位的‘9’变为‘6’或将‘6’变为‘9’&#xff0c;求的最终序列由小到大&#xff0c;且字典序最小。 题目&#xff1a; 链接&#xff1a;https://ac.n…

用.NET进行客户端Web开发?看这个Bootstrap风格的BlazorUI组件库

点击上方“Dotnet9”添加关注哦Blazor一、前言今天在下班的路上&#xff08;地铁上&#xff09;&#xff0c;站长习惯性的掏出手机&#xff0c;就收到知乎向站长推送的一篇BlazorUI组件库推荐文章&#xff0c;是码云官方的&#xff1a;原文链接[1]&#xff0c;于是我立即打开码…

2021年度训练联盟热身训练赛第五场F题Group Project

题意&#xff1a; 有n个人&#xff0c;其中有m组&#xff0c;两两互斥&#xff0c;现在要分成两个班&#xff0c;但最终求的确是最多有多少对不互斥的。 题目&#xff1a; 链接&#xff1a;https://ac.nowcoder.com/acm/contest/16741/F 来源&#xff1a;牛客网 The big day…

[JavaWeb-XML]XML约束概述

约束&#xff1a;规定xml文档的书写规则 * 作为框架的使用者(程序员)&#xff1a;1. 能够在xml中引入约束文档2. 能够简单的读懂约束文档* 分类&#xff1a;1. DTD:一种简单的约束技术2. Schema:一种复杂的约束技术

在Asp.NET Core中如何优雅的管理用户机密数据

在Asp.NET Core中如何优雅的管理用户机密数据背景回顾在软件开发过程中&#xff0c;使用配置文件来管理某些对应用程序运行中需要使用的参数是常见的作法。在早期VB/VB.NET时代&#xff0c;经常使用.ini文件来进行配置管理&#xff1b;而在.NET FX开发中&#xff0c;我们则倾向…

食物链 POJ - 1182

题目&#xff1a; 动物王国中有三类动物A,B,C&#xff0c;这三类动物的食物链构成了有趣的环形。A吃B&#xff0c; B吃C&#xff0c;C吃A。 现有N个动物&#xff0c;以1&#xff0d;N编号。每个动物都是A,B,C中的一种&#xff0c;但是我们并不知道它到底是哪一种。 有人用两种…

[XML-Jsoup]Jsoup_解析_快速入门

xml常见的解析器&#xff1a; 1. JAXP&#xff1a;sun公司提供的解析器&#xff0c;支持dom和sax两种思想2. DOM4J&#xff1a;一款非常优秀的解析器3. Jsoup&#xff1a;jsoup 是一款Java 的HTML解析器&#xff0c;可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力…