当屏幕在XS上时，如何使用Bootstrap将div居中 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

Web-第五天 BootStrap学习

Bootstrap基础入门使用的都是自带CSS样式，高级开发中需要使用HTML5、CSS3、动态CSS语言Less 进行自定义开发，JavaEE课程中学习时“基础入门”。...视口的作用：在移动浏览器中，当页面宽度超出设备(device)，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示取值： width=device-width, 视口的宽度，大多手机浏览器视口的宽度是...行使用的样式“.row”，列使用样式“col-*-*” 内容应当放置于“列（column）”内列大于12时，将另起一行排列栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类...-- 1.整个topbar划分比例：1:2:1 2.中间区域只在“大屏幕”和“中等屏幕”显示 3.整个区域在“超小屏幕”英寸 --> div class="container topbar hidden-xs...> 1.7 重写首页之footer 1.7.1 案例分析通过分析，该模块需要使用栅格划分上下两行，第二行的文字信息准备使用“列表”，内容的居中将提供两种方案：文字居中，栅格列偏移 ?

6.1K5 0

Bootstrap基本入门大全

http://www.bootcss.com 选择自己在使用的版本，进入中文手册 ? 按照分类找自己需要的样式，复制粘贴class就可以啦 ?...下面有常用的bootstrap介绍，基本上就够用了，但是有些样式也没有写全，先自己学会怎么使用，再去官网上深入研究吧 1.栅格系统定义：一系列行和列构建的布局，可以跟着屏幕自动布局最多可以展示12个列...网页上所有的内容都放在这个容器中两种布局：固定布局-container（自动居中），流式布局-container-fluid（铺满整个屏幕） div class="container"> 创建行：（...一般最多显示12列，如果只想要显示四列，可以将12列均分到四列上） div class="col-lg-3"> 参数介绍： col-lg-3：lg（当屏幕大于1200时，大屏幕） con-md-3：md...（在002-1200之间的屏幕） con-sm-3：sm（768-992之间的屏幕） con-xs-3：xs（小于758的屏幕） 2.辅助类文字类:text- text-primary：默认基础字体颜色

3.2K10 0

您找到你想要的搜索结果了吗？

是的

没有找到

Bootstrap基本入门大全

http://www.bootcss.com 选择自己在使用的版本，进入中文手册 ? 按照分类找自己需要的样式，复制粘贴class就可以啦 ?...下面有常用的bootstrap介绍，基本上就够用了，但是有些样式也没有写全，先自己学会怎么使用，再去官网上深入研究吧 1.栅格系统定义：一系列行和列构建的布局，可以跟着屏幕自动布局最多可以展示12个列...网页上所有的内容都放在这个容器中两种布局：固定布局-container（自动居中），流式布局-container-fluid（铺满整个屏幕） div class="container"> 创建行：（...一般最多显示12列，如果只想要显示四列，可以将12列均分到四列上） div class="col-lg-3"> 参数介绍： col-lg-3：lg（当屏幕大于1200时，大屏幕） con-md-3：md...（在002-1200之间的屏幕） con-sm-3：sm（768-992之间的屏幕） con-xs-3：xs（小于758的屏幕） 2.辅助类文字类:text- text-primary：默认基础字体颜色

2.6K1 0

Jump Start Bootstrap 第2章

我们将学会网格系统如何工作；我们如何在应用中使用网格系统；我们也将创建简单的网页布局去更好的理解它。什么是网格系统？...Bootstrap网格系统将屏幕划分为每行12列；列的宽度根据屏幕的大小而变化。因此，网格系统是响应式的，当浏览器窗口的大小发生变化时，这些列会动态地调整自身大小。...中型显示器 (屏幕宽度 ≥ 992px) col-lg 大型显示器 (屏幕宽度 ≥ 1200px) 当我们指定类col-xs-12，它意味着在超小型显示器上，这个元素将跨越全部12格。...但在大型显示器上如何呢？在上面的代码中，我们没有指定该div>元素在大型显示器上的表现。进一步的，Bootstrap将自动沿用在超小显示器上指定的布局。...这是一种实现占屏幕宽度一半的列居中的好办法。手工渲染网格（重新排序）我们也可以不理睬列在代码中的顺序，对它重新排序。

4.1K4 0

第122天：移动端开发常见事件和流式布局

touchmove：当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动。...touchend：当手指离开屏幕时触发。 touchcancel：系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用。...-- 4 此处的代码会显示在一个固定宽度且居中的容器中 5 该容器的宽度会跟随屏幕的变化而变化 6 --> 7 div> 8 div> 栅格系统：Bootstrap...中定义了一套响应式的网格系统，其使用方式就是将一个容器划分成12列，然后通过col-xx-xx的类名控制每一列的占比。...div class="container"> div class="row">div> div> col-xx-x类：第一个连接符后边写屏幕尺寸，有xs超小屏幕手机(<768px)、

4.7K4 0

BootStrap应用开发学习入门

（1）.container类出现内边距和外边距，.container-fluid类没有它是将宽度设定为auto，所以当缩放浏览器时，它会保持全屏大小，始终保持100%的宽度。。...偏移列描述:偏移是一个用于更专业的布局的有用功能, 可用来给列腾出更多的空间; 为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-*类,其中 * 范围是从 1 到 11。...#按钮状态 .active #按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）按钮元素 / 锚元素 .disable #禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。...，其他设备上隐藏元素 .sr-only-focusable # 与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户) .close #显示关闭按(使用通用的关闭图标来关闭模态框和警告框...">特别小型 xs">✔ 在特别小型设备上可见 div> div class="col-xs-6

20.7K2 0

BootStrap初始

在Bootstrap出现之前：命名：重复、复杂、无意义（想个名字费劲）样式：重复、冗余、不规范、不和谐页面：错乱、不规范、不和谐在使用Bootstrap之后：各种命名都统一并且规范化。...在栅格列中的内容排成一行。栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。...因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。...因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备。.../当列的宽度小于一定范围的时候会自动变成col-xs-8的格式当列的宽度大于一定的范围的时候会自动变成col-md-12的格式 div class="col-xs-4 col-md-

5.5K1 0

BootStrap应用开发学习入门

（1）.container类出现内边距和外边距，.container-fluid类没有它是将宽度设定为auto，所以当缩放浏览器时，它会保持全屏大小，始终保持100%的宽度。。...偏移列描述:偏移是一个用于更专业的布局的有用功能, 可用来给列腾出更多的空间; 为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-*类,其中 * 范围是从 1 到 11。...#按钮状态 .active #按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）按钮元素 / 锚元素 .disable #禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。...，其他设备上隐藏元素 .sr-only-focusable # 与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户) .close #显示关闭按(使用通用的关闭图标来关闭模态框和警告框...">特别小型 xs">✔ 在特别小型设备上可见 div> div class="col-xs-6

17.5K3 0

Bootstrap实用手册

栅格布局好处：效率高，容易控制，实现响应式不足：没有栅格布局实际上就是由 div 组成的 table 样式的响应式结构使用方法： ①....列根据适用屏幕分成四种类型 A. .col-xs-* a. .col-xs-1 : 在超小屏幕中，占一列的宽(8.33%) b. .col-xs-2 : 在超小屏幕中，占两列的宽(16.66%) c....列偏移数量，每个列都可以指定向右偏移几列位置（不能用float）,偏移的列会影响后续的列,主要作用是列左右留白，列右对齐，列居中 A. .col-xs-offset-n :在 xs 下，当前列向右偏移...适用于不同屏幕的列的 class(xs/sm/md/lg)，可以兼容更大的屏幕大屏幕 class 在小屏幕中，永远是垂直显示 A. .col-xs-* : 适用于 xs/sm/md/lg B. .col-sm...可以在一个 div 中指定在不同屏幕下的宽度占比，相同的占比可简写为一个语法：div class="col-xs-9 col-sm-6 col-md-3">div> 释义：在 xs 中占 9

8.3K2 0

第124天：移动web端-Bootstrap轮播图插件使用

Bootstrap JS插件使用 > 对于Bootstrap的JS插件，我们只需要将文档实例中的代码粘到我们自己的代码中 > 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Carousel...> 二、轮播图使用中的问题 1、由于轮播图片超宽造成的影响　　- 美工为了在不同屏幕下更好地展示将图片两边做的非常宽，但是我们大多数情况的页面宽度都无法满足这样的图片宽度　　- 而且Bootstrap...的样式中默认将图片的max-width设置为100%；　　- 造成界面图片缩放　　- 想在一个较小屏幕下展示一个超宽的图片，并让图片居中显示　　+ 两种办法：　　（1）换用背景图的方式...小图如果还是使用背景的方式，当屏幕特别小时，效果很差　　- 所以当使用小图时，改用img的方式 1 // 因为我们需要小图时尺寸等比例变化，所以小图时我们使用img方式 2 if (isSmallScreen...整个板块在超小屏幕下是隐藏起来的 + 只需要给当前板块加上hidden-xs的class

7.3K4 0

BootStrap 前端框架简介

，可是现在随着用户使用终端设备的多样化，平板手机已经很常见，所以如何制作适合手机使用的网页？...还是使用以前的固定单位去布局，会引发两个问题：（1）分辨率太大，网页两边留白太多（2）分辨率太小，页面显示不完全概念：设备无关性布局方式；在css的发展过程中，逐渐出现了许多的响应式布局方式，今天将介绍的...1.3.3 网格视图在设计网页时，使用网格视图非常有用。它可以更轻松地在页面上放置元素。响应式网格视图通常有12列，总宽度为100％，并在调整浏览器窗口大小时缩小和展开。...并且为什么叫它是全局样式，主要是它的使用比较自由，可以在页面中的任意位置使用，也可以放在Bootstrap组件里使用。..."> 移动 div> div> div> 3.2导航元素本章我们将讲解 Bootstrap 提供的用于定义导航元素的一些选项

5.8K1 0

Bootstrap学习文档（一）

Bootstrap 是什么 Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目，使用这个框架可以简单高效的开发出适配各种屏幕的网站应用，...Bootstrap 相比其他框架，自由度更高，它提供了基本的样式和基本的组件，而不会在创造上约束开发者的思维。...: center; 经过 Bootstrap封装后的类（class）名为 text-center，这样我们就可以直接使用text-center来使一个 p 标签或者 div 标签里面的内容居中了，从而实现我们软件工程中所说的代码重用...-- 使360浏览器渲染页面时默认使用极速模式，考虑到国内360的大量用户 --> Bootstrap...: red;">错误写法div> div> Bootstrap 的栅格系统在 Bootstrap 中一行分为 12列，也即是屏幕的宽度被分为了 12份，一份就是十二分之一的屏幕宽度，源码是通过宽度为百分比以及浮动实现的

3.2K2 0

BootStrap响应式项目实战之世界杯网页设计

a)新建一个index.html b)将jquery.3.3.1.js复制到bootstrap下的js目录里面； c)在index.html里面做下引用；引用顺序bootstrap.css->jquery...通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。...超小屏幕手机 (屏幕平板 (≥768px) 中等屏幕桌面显示器 (≥992px) 大屏幕大桌面显示器 (≥1200px) 栅格系统行为总是水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列...- 注意： 1.屏幕适配的时候，从大到小的适配，当无法显示的时候，一行占据小屏的最大宽度； 2.当设计的是小屏幕尺寸，变为大屏的时候，向上兼容模式；三.项目 3.1 设计布局 div class...1.max-width 最大宽度，当有多个媒体查询书写时，顺序从大到小 2.mix-width 最小宽度，当有多个媒体查询书写时，顺序从小到大媒体查询完整写法： @media 关键词媒体类型 and

1.3K1 0

BootStrap框架总结

格栅系统: "在不同分辨率的屏幕下展示不同的效果,根据不同的上网设备,栅格系统将屏幕分层一系列的行(row)和列(column),由行和列来创建页面布局,注意栅格系统必须放在布局容器内使用" 行:..."通过class = "row" 来设置一个行" 列(最多将视口分为12列) "通过class属性来设置在不同屏幕时所占的列 n表示每格占的份数" col-lg-n 大屏 col-md-n...中屏 col-sm-n 小屏 col-xs-n 超小屏响应式工具: 显示: visible-xs 超小屏可见 visible-sm 小屏可见 visible-md 中等屏幕可见...visible-lg 大屏幕可见隐藏: hidden-xs 嘲笑屏时隐藏 hidden-sm 小屏幕时隐藏 hidden-md 中等屏幕时隐藏 hidden-lg 大屏幕时隐藏...移除默认的列表样式 list-inline : 将所有列表项放置同一行表格: bootstrap给表格添加了默认样式 tble 普通表格 table-striped

4.2K2 0

前端移动web-day05学习笔记

框架作用：提高开发人员的工作效率（ctrl + c/v 复制粘贴即可） 2.如何使用Bootstrap框架（该流程适用于所有的第三方框架） a.进官网:http://www.bootcss.com/..."> 初始化模板：就是官网里面教你在创建html的时候需要导入哪些依赖包 bootstrao官方模板：不推荐使用，太过于冗余，有些用不上的也写上了自定义bootstrap模板：推荐使用，简洁明了官方模板...sm:小栅格,这种栅格在屏幕宽度大于等于768时可以排成一行，小于768时每个栅格独占一行 xs:超小栅格,这种栅格所有屏幕宽度下都会排成一行 x(1-12之间的数字，尺寸比例)：bootstrap将水平方向分为...在屏幕宽度小于768起作用 6-栅格隐藏 zz.jpg 在某个查询区间，将栅格隐藏，可以用隐藏的样式，这个样式包括四个： 1、.hidden-xs 在屏幕小于768时将栅格隐藏 2、.hidden-sm...在屏幕大于等于768小于992时将栅格隐藏 3、.hidden-md 在屏幕大于等于992小于1200时将栅格隐藏 4、.hidden-lg 在屏幕大于等于1200时将栅格隐藏注意点 a：如果设置一个栅格隐藏样式为

3.6K2 0

01_Bootstrap基础组件01

) 栅格系统行为总是水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列 .container...> div class="col-xs-6 col-sm-3 col-md-2">col-xs-6 col-sm-3 col-md-2div> div> Bootstrap 在超小屏幕中...，会查找带有 col-xs-* 的类，在小屏幕设备中，会查找带有 col-sm-* 的类，在中等屏幕设备中，会查找带有 col-md-* 的类，并使用它们。...为了克服这一问题，建议联合使用 .clearfix visible-*-block （星号代表屏幕的大小）在某个阈值下显示，可以为 xs、sm、md、lg div class="row"> 使用列偏移只需在列元素上添加类名 .col-md-offset-* （星号代表要偏移的列组合数），具有这个类名的列就会偏移，如：在列元素上添加 .col-md-offset-4，表示该列向右偏移4个列的宽度

1.6K0 0

BootStrap

在栅格列中的内容排成一行。栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。...因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。...因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备。...="col-md-9 c1 col-xs-9">div> div> div> 栅格参数通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的...在栅格系统中，是以row为类名起手写在类名为container的div标签中，将.row的div标签等分为12列 <!

4.3K1 0

javaWeb核心技术第六篇之BootStrap

★ 在不同分辨率的屏幕下展示不同的效果,根据不同的上网设备,栅格系统将屏幕分成一系列的行(row)和列(column),由行和列来创建页面布局,注意栅格系统必须放在布局容器内使用...--img1:中等屏幕时占4份,在小屏时占6份,在超小屏时占12份 img2:中等屏幕时占4份,在小屏时隐藏,在超小屏时占12份超链接:中等屏幕时占4份,在小屏时占6份,在超小屏时占...--下div: 左div:中等屏幕时占2份,小屏和超小屏隐藏图片右div:中等屏幕时占10份,小屏和超小屏占12份 middle div:中等屏幕时占6份,小屏和超小屏隐藏...--下div: 左div:中等屏幕时占2份,小屏和超小屏隐藏图片右div:中等屏幕时占10份,小屏和超小屏占12份 middle div:中等屏幕时占6份,小屏和超小屏隐藏...servlet完成用户登录功能需求分析: 用户在表单中填写完用户名和密码后,点击登录的时候,向服务器发送登录的请求, 在服务器上处理请求,处理完毕后将处理信息响应到页面处理结果:

1.5K1 0

从零开始学 Web 之移动Web（七）Bootstrap

当屏幕宽度 > 1200，则页面宽度固定为 1170px 当屏幕宽度 992~1200，则页面宽度固定为 970px 当屏幕宽度 768~992，则页面宽度固定为 750px 当屏幕宽度 div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">div> div> 解释：上面四个div，如果在超小屏幕上就 100%显示（占12栅格）；在小屏幕上...，每个div占50%显示；在中等屏幕上，每个div占25%显示；在大屏幕上，每个div占33.33%显示。...- : 大屏幕大桌面显示器 (≥1200px) 注意： 1.栅格系统是往上兼容的：意味着小屏幕上的效果在大屏幕上也是可以正常显示的人，但是大屏幕上的设置在小屏幕上却无法正常显示。...--在小屏幕下不可见--> div class="col-xs-1 hidden-xs">2div> <!

6.4K3 0

bootstrap框架基础知识点整理

-- viewport:视口，浏览器网页上的可视区域视口作用:用于移动设备将大型页面进行比例缩放演示以下设置只在移动设备上生效 width=device-width:设置视口的宽度...任意元素使用了布局容器的样式，都会称为布局容器，建议使用div作为布局容器 ---- 布局容器之container 特点：居中，两端有留白代码: <!...尺寸 small: sm ------小屏幕,ipad尺寸 x small: xs -----超小屏幕，智能手机屏幕如果没有设置当前屏幕的样式，默认一个元素占据一行设置为xs时: bootstrap.min.js"> ---- 列表内联列表内联列表帮助文档链接内联元素: 位于一行上，元素结束时...small button ---- 激活状态当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。

4.6K4 1

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭