给一个元素的class赋值为container之后,如果显示屏幕小于576,元素将要横向占满屏幕,但是大于576小于576像素的时候,宽度恒定为540,。...就是说你的屏幕很宽的时候,元素永远不会横向占满整个屏幕,与边距有孔隙。但是赋值为.container-fluid的时候,元素永远横向占满屏幕,不会留有孔隙。...class属性解释: .col-6一行有12列,这个列表示占6份,用来调整列元素的宽度 .col-lg-6当视图宽度大于992时,col才起作用,此列占6份。...如果小于,则无效果,等于没有col这个东西。 .col-md-auto当视图大于md时,自动计算宽度,重新排列。 .row-cols-2设置在行元素中,表示一行中最多显示几个列元素。...表示左端对齐,水平居中、右端对齐、水平等距对齐,两端对齐。 .order-给列排序,可以改变列的顺序 .offset- 列偏移几个宽度。
什么是栅格化 在一个有限的、固定的平面上,用水平线和垂直线(虚拟的线,“参考线”),将平面划分成有规律的一系列“格子”(虚拟的格子),并依托这些格子、或以格子的边线为基准线,来进行有规律的版面布局。...通俗点来说,就是人为的把网页中的一行,等比例划分,比如将一行划分为 12 等分。然后在每个格子里进行页面开发,这就栅格化。 ?...如果我将一行划分为 12 等分,那就跟 bootstrap 中的栅格化系统一模一样了,有 12 个格子。...@media 详情请看MDN 相信用过 bootstrap 栅格化系统的都知道,在 bootstrap 栅格化系统中,有一些 col-md col-sm 属性,它们是干什么用的呢?...其实,它们都是栅格化系统的 CSS 类名,只是针对了不同的屏幕宽度。 假如我们有这样的一个需求: 在 PC 上,因为屏幕比较大,我们要求一行显示 4 列的内容。
列 根据适用屏幕分成四种类型 A. .col-xs-* a. .col-xs-1 : 在超小屏幕中,占一列的宽(8.33%) b. .col-xs-2 : 在超小屏幕中,占两列的宽(16.66%) c.....col-xs-12 : 在超小屏幕中,占 12 列的宽(100%) B. .col-sm-*:在小型屏幕中 所占列宽数 C. .col-md-*:在中型屏幕中 所占列宽数 D. .col-lg-*:...适用于不同屏幕的列的 class(xs/sm/md/lg),可以兼容更大的屏幕 大屏幕 class 在小屏幕中,永远是垂直显示 A. .col-xs-* : 适用于 xs/sm/md/lg B. .col-sm...可以在一个 div 中指定在不同屏幕下的宽度占比,相同的占比可简写为一个 语法: 释义:在 xs 中 占 9...Bootstrap 组件 - 图标字体.glyphicons 在页面中,显示为图标,本质上是文字,可以设置字体,颜色,大小,阴影等,Web程序中常用的图标字体: (1).
当屏幕大于 768px 宽度时,水平滚动条消失。 a,垂直方向的内容截断: 响应式表格使用了 overflow-y: hidden 属性,这样就能将超出表格底部和顶部的内容截断。...将 label元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。 ...只适用于视口(viewport)至少在 768px 宽度时 a,可能需要手动设置宽度: 在 Bootstrap 中,输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。...在内联表单,我 们将这些元素的宽度设置为 width: auto;,因此,多个控件可以排列在同一行。根据你的布局需 求,可能需要一些额外的定制化组件。 ...b,一定要添加 label 标签: 3,水平排列的表单.form-horizontal 类:联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。
,因为其原理是检测屏幕可视区的宽高比例,从而检测屏幕垂直或者水平。...){} 屏幕水平 2、特点 2.1 媒体有覆盖性(当width: 1200px 时,符合下面两个条件,但是靠媒体样式的覆盖性,所以会采用第二个样式) @media... 1、使用: 引入js文件,用class的方式使用 2、栅(shan)格系统:将页面均分为最多12列 2.1 布局容器 .container....column 可以作为 .row 的直接子元素 2.3.1 设置响应式列布局 col-lg 大屏幕、大桌面显示器(>=1200px) ...1 col-md-2 col-sm-4"> //响应式:共12列,当超大屏幕时,每列1div;当中等屏幕时,每2列1div......
轴 容器中的 主轴 和 交叉轴 在容器中默认有水平的主轴和垂直的交叉轴,项目在容器中默认沿主轴排列 常用属性: flex-direction 属性 flex-direction 属性设置容器主轴的方向...flex-wrap属性 flex-wrap属性用于设置当项目在容器中一行无法显示的时候如何处理。...stretch:默认值:如果项目未设置高度或者高度为auto,将占满整个容器的高度 ? flex属性 子元素在主轴上划分空间 ?...媒体查询 作用: 感受到屏幕的变化;可以根据屏幕不同的宽,从而获得不同的样式,然后实现不同的样式显示; ? 使用的话可以放在 中 ,也可以引用 ?...,控制子元素布局不同;将版心宽度均分为12份; <!
-- 1.width 属性控制设备的宽度; 假设您的网站将被带有不同屏幕分辨率的设备浏览 device-width 可以确保它能正确呈现在不同设备上。... 元素中的文本以小号字体展示,且可以将小写字母转换为大写字母 .pre-scrollable: 使 元素可滚动,代码块区域最大高度为340px 一旦超出这个高度,就会在Y轴出现滚动条...(1).container类出现内边距和外边距,.container-fluid类没有它是将宽度设定为auto,所以当缩放浏览器时,它会保持全屏大小,始终保持100%的宽度。。...(2).container类左右内边距一直是15px,屏幕小于等于767px的时候没有margin值,屏幕大于767px开始有左右margin值,屏幕宽度为768px和1000px的时候,margin值相对最小...从 v3.2.0 版本起,形如 .visible-- 的类针对每种屏幕大小都有了三种变体,每个针对 CSS 中不同的 display 属性,以超小屏幕(xs)为例,可用的 .visible-*-* 类是
格栅系统: "在不同分辨率的屏幕下展示不同的效果,根据不同的上网设备,栅格系统将屏幕分层一系列的行(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 中等屏幕可见...不支持) table-bordered 边框表格 tabl-hover 带有鼠标悬停的表格 table-condensed 紧缩表格 表单: 垂直表单: 内联表单:(将所有内容放在同一行...".可以简单的一次性引入所有插件,或者逐个引入到你的页面中."
这个框架就是别人已经写好的css和JavaScript,我们要使用它,首先需要把这些样式和javascript相关文件下载下来,然后在我们的页面中引用这些文件就可以使用这个框架了,直接在这个网站下载,下载地址为...:大栅格,这种栅格在屏幕宽度大于等于1200时可以排成一行,小于1200时每个栅格独占一行 md:中栅格,这种栅格在屏幕宽度大于等于992时可以排成一行,小于992时每个栅格独占一行 sm:小栅格,这种栅格在屏幕宽度大于等于...768时可以排成一行,小于768时每个栅格独占一行 xs:超小栅格,这种栅格所有屏幕宽度下都会排成一行 x(1-12之间的数字,尺寸比例):bootstrap将水平方向分为12份,每一份表示row宽度的...在屏幕宽度小于768起作用 6-栅格隐藏 zz.jpg 在某个查询区间,将栅格隐藏,可以用隐藏的样式,这个样式包括四个: 1、.hidden-xs 在屏幕小于768时将栅格隐藏 2、.hidden-sm...在屏幕大于等于768小于992时将栅格隐藏 3、.hidden-md 在屏幕大于等于992小于1200时将栅格隐藏 4、.hidden-lg 在屏幕大于等于1200时将栅格隐藏 注意点 a:如果设置一个栅格隐藏样式为
Bootstrap 标签和样式 Bootstrap 中把一些标签的样式重置了,也即是为一些标签设置了带有 Bootstrap 风格的样式,如 h 标签,p 标签等等,这其中包含了 HTML5 标签。...让表格更加紧凑 注意:将表格包在一个class为table-responsive的div里,当屏幕尺寸小于768的时候会出现滚动条 在表格中,Bootstrap 还封装了一些状态类,通过这些状态类可以为行或单元格设置颜色...按钮的尺寸 btn-lg btn-md btn-sm btn-xs btn-block 让按钮从内联块级元素变为块级元素,可以撑满整个父级元素,也即是把按钮的宽度置为100%; 按钮的状态 active...在span标签里面加上caret的类名,就可以变成一个下三角的符号。在button里面加上close的类名,并在button中加上×的转义符号就可以出现一个关闭的按钮。...row中,是可以撑开容器的,因为row是带清楚浮动样式的,如果不放直接放在row中可以在浮动部分外面加上clearfix的类名清楚内部的浮动。
水平表单 使用ASP.NET MVC的HTML.BeginForm可以方便的创建一个表单,通过为添加名为form-horizontal的class来创建一个Bootstrap 水平显示表单。...验证样式应用在form 元素上,当然你也可以使用Bootstrap 栅格col-* class来指定form 中元素的宽度,效果如下显示: ?...垂直表单 Bootstrap基础表单默认情况下是垂直显示内容,在Html.BeginForm帮助方法里移除class为form-horizontal和class col-*后,显示的效果如下: ?...内联表单 内联表单表示所有的form 元素一个接着一个水平排列,只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。...记得一定要添加 label 标签,如果你没有为每个输入控件设置 label 标签,屏幕阅读器将无法正确识别。对于这些内联表单,你可以通过为label 设置 .sr-only 类将其隐藏。
水平表单 使用ASP.NET MVC的HTML.BeginForm可以方便的创建一个表单,通过为添加名为form-horizontal的class来创建一个Bootstrap 水平显示表单...验证样式应用在form 元素上,当然你也可以使用Bootstrap 栅格col-* class来指定form 中元素的宽度,效果如下显示: 垂直表单 Bootstrap基础表单默认情况下是垂直显示内容...,在Html.BeginForm帮助方法里移除class为form-horizontal和class col-*后,显示的效果如下: 内联表单 内联表单表示所有的form 元素一个接着一个水平排列...记得一定要添加 label 标签,如果你没有为每个输入控件设置 label 标签,屏幕阅读器将无法正确识别。对于这些内联表单,你可以通过为label 设置 .sr-only 类将其隐藏。...Image 在 Bootstrap 3.0中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。
下面就介绍一下 Bootstrap 栅格系统的工作原理: “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列...通过“行(row)”在水平方向创建一组“列(column)”。 内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。...类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。...因此,在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。...因此,在元素上应用任何 .col-lg-* 不存在, 也影响大屏幕设备。 结语 今天学习了栅格系统的原理,对栅格系统有了初步的了解和认识。
“列(column)”在水平方向创建一组列col,只有列能作为行的直接子元素.row .col-xs-4 通过列设置padding属性,通过为.row 元素设置负值 margin 从而抵消掉为 .container... 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding 3.栅格类适用于与屏幕宽度大于或等于分界点大小的设备 .col-md-*此为栅格类 二,媒体查询.../* 超小屏幕(手机,小于 768px) */ /* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?)...) { ... } 还有max-width:将 CSS 的影响限制在更小范围的屏幕大小之内。...超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px) 栅格系统行为 总是水平排列 开始是堆叠在一起的,当大于这些阈值时将变为水平排列
Bootstrap 栅格系统是一种基于12列网格的布局系统。这意味着您可以将页面划分为12个等宽的列,然后将内容放入这些列中。...通过在不同的屏幕宽度上定义不同的列宽,您可以轻松创建响应式布局,以适应不同设备的屏幕大小,例如桌面、平板和手机。 栅格系统的核心思想是将页面划分为行(row)和列(col)。...容器的作用是确保内容在不同屏幕尺寸上居中对齐,并提供一些内边距,以便内容不会触及屏幕的边缘。 row:行是一组列的容器。每行(row)在页面上都是水平排列的,可以包含一个或多个列(col)。...行的主要作用是创建列的组合,使它们在同一水平线上对齐。 col-sm-4:列是页面的主要构建块,用于包含实际的内容。在这个示例中,我们使用了三个列,每个列占据了4个网格列的宽度,总和为12列。...md(中等屏幕):用于普通桌面屏幕。 lg(大屏幕):用于大型桌面屏幕。 xl(特大屏幕):用于非常大的屏幕。 通过在列的类名中添加适当的断点前缀,您可以指定在不同屏幕尺寸上列的宽度。
标准坐标系我们之所以要进行上面的转换,这是因为在Three.js中Canvas画布具有一个标准设备坐标系,该坐标系的坐标原点在canvas画布的中间位置,x轴水平向右,y轴竖直向上。...screenX:鼠标点击位置相对于电脑屏幕左上角的水平偏移量。 screenY:鼠标点击位置相对于电脑屏幕左上角的垂直偏移量。...clientX:鼠标点击位置相对于浏览器可视区域的水平偏移量(不会计算水平滚动的距离)。 clientY:鼠标点击位置相对于浏览器可视区域的垂直偏移量(不会计算垂直滚动的距离)。...client坐标的最大范围是 (window.innerWidth - 垂直滚动条宽度, window.innerHeight - 水平滚动条高度)。...*计算这个坐标时,由于是基于浏览器窗口中用来显示网页的可视区域,那么也就是说需要拖动滚动条才能看到的区域不算;当你将浏览器窗口缩小时,clientX/clientY 的最大值也会缩小,但始终,它们的最大值不会超过你浏览器可视区域
网格系统允许我们适当地为我们的网站内容提供服务;它将屏幕分成多个行和列,这些行和列可以用来创建各种类型的布局。一旦定义了行和列,我们就可以决定将哪个HTML元素放置在何处。...Bootstrap网格系统将屏幕划分为每行12列;列的宽度根据屏幕的大小而变化。因此,网格系统是响应式的,当浏览器窗口的大小发生变化时,这些列会动态地调整自身大小。...固定宽度的容器被设计为出现在屏幕的中央,在两边都省略了额外的空间。因此,将所有内容包装在一个容器中是一种很好的做法。 在我们的demo里面,我们将使用固定宽度的容器。...中型显示器 (屏幕宽度 ≥ 992px) col-lg 大型显示器 (屏幕宽度 ≥ 1200px) 当我们指定类col-xs-12,它意味着在超小型显示器上,这个元素将跨越全部12格。...这是一种实现占屏幕宽度一半的列居中的好办法。 手工渲染网格(重新排序) 我们也可以不理睬列在代码中的顺序,对它重新排序。
(固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。...通过“行(row)”在水平方向创建一组“列(column)”。 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。...类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。...因此,在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。...solid black">111 //当列的宽度小于一定范围的时候会自动变成col-xs-8的格式 当列的宽度大于一定的范围的时候会自动变成col-md-12的格式
领取专属 10元无门槛券
手把手带您无忧上云