它用于包含行（row）和列（col）以及其他内容。容器的作用是确保内容在不同屏幕尺寸上居中对齐，并提供一些内边距，以便内容不会触及屏幕的边缘。 row：行是一组列的容器。...在这个示例中，我们使用了三个列，每个列占据了4个网格列的宽度，总和为12列。这是一种常见的布局，因为它适用于桌面屏幕，每个列都具有相同的宽度。...md（中等屏幕）：用于普通桌面屏幕。 lg（大屏幕）：用于大型桌面屏幕。 xl（特大屏幕）：用于非常大的屏幕。 通过在列的类名中添加适当的断点前缀，您可以指定在不同屏幕尺寸上列的宽度。...-- 列2 --> 在这个示例中，我们创建了两行，每行包含三列。
Bootstrap 相比其他框架，自由度更高，它提供了基本的样式和基本的组件，而不会在创造上约束开发者的思维。...-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <!...1200px 固定宽度为1270px 992px <= 屏幕宽度 <= 1200px 固定宽度为970px 768px <= 宽度 <= 992px 固定宽度为750px 宽度错误写法 Bootstrap 的栅格系统 在 Bootstrap 中一行分为 12列，也即是屏幕的宽度被分为了 12份，一份就是十二分之一的屏幕宽度，源码是通过宽度为百分比以及浮动实现的...嵌套 每一列里面都可以在嵌套一行和n（不能超过12）列，那嵌套里面的元素就会以父级的宽度为基准，再分12个列。
bootstrap里面父容器版心的尺寸划分 超小屏幕（手机，小于 768px）：设置宽度为 100% 小屏幕（平板，大于等于 768px）：设置宽度为 750px 中等屏幕（桌面显示器，大于等于...992px）：宽度设置为 970px 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px 但是我们也可以根据实际情况自己定义划分 2 、bootstrap（前端开发框架...-- 列偏移 --> 1 左侧 <div class="col-<em>lg</em>...可见 隐藏 与之相反的是visible-xs， visible-sm， visible-md， visible-<em>lg</em> ，是显示某个页面内容 bootstrap<em>其他</em>（如按钮、表单、表格等）请参考bootstrap
类: 流式布局容器 百分百宽度 占据全部视口 (viewport) 的容器 栅格系统介绍: 栅格系统英文为 Grid systems ,翻译为网格系统，是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局...边距 xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大； 列 (column) 大于12，多余的列所在的元素将被整体另起一行排列 每一列默认有左右...15像素的 padding 可同时为一列指定多个设备的类名，以便划分不同份数 例如 class= col-md-4 col-sm-6 列嵌套: 内置的栅格系统将内容再次嵌套，就是一个列内再分若干份小列，...* 选择器为当前元素增加了左侧的边距 (margin) 1 <div class="col-<em>lg</em>...可见 可见 可见 隐藏 为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容 Bootstrap <em>其他</em> (按钮、表单、表格) 可参考 Bootstrap
父容器版心的尺寸划分 超小屏幕（手机，小于 768px）：设置宽度为 100% 小屏幕（平板，大于等于 768px）：设置宽度为 750px 中等屏幕（桌面显示器，大于等于 992px）：...宽度设置为 970px 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px 但是我们也可以根据实际情况自己定义划分 2.0 bootstrap的介绍 2.1Bootstrap...大； 列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列 每一列默认有左右15像素的 padding 可以同时为一列指定多个设备的类名，以便划分不同份数...-- 列偏移 --> 1 左侧 <div class="col-<em>lg</em>
每列左右间隙各15px .col-{1到12} 定义在所有屏幕下的列宽 .col-{sm|md|lg|xl}-{1到12} 定义在指定屏幕下该列占据的列宽，sm:屏幕>=576px、md:屏幕>=720px...、lg:屏幕>=960px、xl:屏幕>=1200px .offset-{1到11} 在所有屏幕下的列偏移 .offset-{sm|md|lg|xl}-{1到11} 在指定屏幕下的列偏移 【显示隐藏】....font-weight-bold 粗体 .font-weight-normal 普通文本 .font-weight-light 更细的文本 .font-italic 斜体文本 .lead 让段落更突出...data-target="#id" | href="#id" 折叠触发对象必需属性 .collapse 折叠目标对象样式 data-parent="#id" 属性来实现父元素下，某一个折叠选项显示时其他选项就隐藏...-- 或者 --> 折叠 宽度百分比样式： .w-25 宽度25% .w-50 宽度50% .w-75 宽度75%
视口的宽度：要与设备宽度一致 (2). 视口的缩放倍率：设置为 1，即不缩放 (3)....:在 lg 下，当前列向右偏移 n 列的距离 ⑥....列排序数量,控制某列向右或向左移动，并不影响其它的列,主要作用是在特定的屏幕下临时调整列的出现位置 A、col-lg-push-n: 在 lg下，当前列向右移动n 列的距离 B、col-lg-pull-n...: 在 lg下，当前列向左移动n 列的距离 ⑦....Bootstrap 组件－页头.page-header，允许为标题元素增加适当的空间，与其他元素有一定的间隔 29. Bootstrap 组件－水井.well 30.
屏幕较宽的PC机显示器 2、中型屏幕(md [middle]) 992px <= w <= 1199px 普通...w <= 767px 各种PHONE屏幕 2、Bootstrap提供的两个容器class 1、定宽容器 在不同宽度大小的设备上均提供了固定的宽度值...所以在创建列的时候要指定列的宽度(当前列要占据几列的宽) 4、列 会根据适用的屏幕分成4中类型 类： 1、...width:8.33%) 3、.col-sm-* 4、.col-lg-* 5、列向右偏移数量...col-lg-offset-n : 在 lg 屏幕下，当前列要向右偏移n列的位置
) >=1200px 1170px 除了手机的宽度设置是 100%外，其他设备的宽度设置都会比设备的尺寸区间最小值小一点，原因是留空一点，不占满屏幕，然后容器可以居中显示。...- xs(extra small)：超小；sm(small)：小；md(medium)：中等；lg(large)：大 列的总和大于 12 的话，多余的列会另起一行排列 每一列默认有左右 15 像素的...padding 可以同时为一列指定多个设备的类名，例如class="col-md-4 col-sm-6" 例子 <!...使用类前缀-offset-*类可以将列向右侧偏移，这些类实际是通过*选择器为当前元素增加了左边距（margin） <!...-- 想要把左右盒子互换位置，可以pull(拉)右边的盒子过来，拉的份数为左盒子的份数 + 右盒子的偏移份数 push(推)左边的盒子过去，推的份数为右盒子的份数 + 右盒子的偏移份数
td> 表单 1.基本样式 form-control 让表单的宽度为...btn-md btn-sm btn-xs btn-block 让按钮从内联块级元素变为块级元素，可以撑满整个父级元素，也即是把按钮的宽度置为100%； 按钮的状态 active（激活状态） disabled...-3 show">第1列 第2列 第3列 <div...满足条件则隐藏 hidden-* * 的内容为 lg md sm xs 。...">第2行第3列 第3行第1列 </div
100%. 2、.container-fluid ：实现宽度为全屏 100% 的容器。...“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。...通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。...因为： 如果在外层没有再包含container,那么嵌套列的宽度就是参参照当前所在的栅格； 如果外层添加了container,那么参照就是核心样式文件所设置的容器宽度 <div class="container...-- 1.如果在外层没有再包含container,那么嵌套<em>列</em>的<em>宽度</em>就是参参照当前所在的栅格 2.如果外层添加了container,那么参照就是核心样式文件所设置的容器<em>宽度</em>
-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> Bootstrap 101 Template <!...他们两者唯一的区别是 container尺寸是固定的（1170,970,750,100%） container-fluid的尺寸是铺满全屏: 100% b.row:行 默认没有高度，背景色、边框 默认宽度为...100% 继承版心的宽度 默认左右margin为 -15px （作用是抵消container左右的padding） c.列col： 类名遵循固定的格式 col-s-x s(screen):表示屏幕尺寸...宽度比例 1 = 屏幕 1/12） col-lg-6:表示该栅格在屏幕宽度大于等于1200时，占的宽度比例是6份( 6/12 = 0.5 相当于width:50%)。...-- 列：子元素 --> 屏幕一半 屏幕四分之一</div
网格系统允许我们适当地为我们的网站内容提供服务；它将屏幕分成多个行和列，这些行和列可以用来创建各种类型的布局。一旦定义了行和列，我们就可以决定将哪个HTML元素放置在何处。...固定宽度的容器被设计为出现在屏幕的中央，在两边都省略了额外的空间。因此，将所有内容包装在一个容器中是一种很好的做法。 在我们的demo里面，我们将使用固定宽度的容器。... 在Bootstrap中，列被创建为全屏宽度被12等分后，占据的份额。...为了让我们的列显示清晰，让我们给题目都添加背景颜色。我们在这个项目的CSS目录下，创建一个新的CSS文件styless.css。这不是标准的文件名，你也可以把它命名其他你希望的名字。...中型显示器 (屏幕宽度 ≥ 992px) col-lg 大型显示器 (屏幕宽度 ≥ 1200px) 当我们指定类col-xs-12，它意味着在超小型显示器上，这个元素将跨越全部12格。
//固定宽度 ...... //100%宽度 ......... 栅格系统介绍: 栅格体系以标准每行12列为基准.。通过一系列的行(row) 与列(column)的组合来创建页面布局。...每一行的内容可以通过class类名进行分配在一行每个元素区块站12列的多少,每一行的元素区块最大为12列,超过则进行换行.接下来看一个简单的栅格系统构建例子!...单行不得超过12列否则显示在第二行....None （自动）750px970px1170px类前缀.col-xs-.col-sm-.col-md-.col-lg-列（column）数12最大列（column）宽自动~62px~81px~97px
-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> Bootstrap 101 Template 222 列的格式：class="col-xs-2/col-sm-1/col-md-3/col-lg-2" //设置一行 //设置一行中的一列宽度为
content="width=dievice-width,initial-scale=1">" 5.添加一个布局容器 通过div设置一个class 方式1:class="container" 固定宽度...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...list0unstyled : 移除默认的列表样式 list-inline : 将所有列表项放置同一行 表格: bootstrap给表格添加了默认样式 tble 普通表格
100% 小屏幕（平板，大于等于768px）：设置宽度为750px 中等屏幕（桌面显示器，大于等于992px）：设置宽度为970px 大屏幕（大桌面显示器，大于等于1200px）：宽度设置为...1.cintainer类 响应式布局的容器 固定宽度 超小屏幕（100%） 小屏（>=768px）：设置宽度为750px 中屏（>=992px）：设置宽度为970px 大屏（>...=1200px）：宽度设置为1170px 2.container-fluid类 流式布局容器 百分百宽度 占据全部视口(ciewport)的容器 适合于单独做移动开发 3.Bootstrap...970px 1170px 类前缀 .col-xs- .col-sm- .col-md- .col-lg- 列数 行(row)必须做到container布局容器里面 我们实现列的平均划分...需要给列添加类前缀 xs-extra small:超小；sm-small：小；me-medium：中等；lg-large：大; 列（column）大于12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
这句话什么意思呢，就是一整个屏幕，其宽度可以放得下12列的东西，比如说，我用 两次，就可以得到双栏，同理，用col-xs-4三次，就可以得到三栏...-- 在超小屏幕设备上，第一列 100% 宽度，第二列 50% 宽度。在小屏幕及以上设备上，第一列为 66.6% 宽度，第二列为 33.3% 宽度。...-- 在超小屏幕设备上每列都是 50% 宽度，在小屏幕及以上设备上每列 33.3% 宽度。...-- 在所有设备上，每列都是 50% 宽度。...mdui-col-offset-md-[1-12] 、 .mdui-col-offset-lg-[1-12] 和 .mdui-col-offset-xl-[1-12] 可以将列向右偏移，类名中的数字表示向右偏移多少列
一，栅格系统大致有以下： 1，行row必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，一行有12列 2....“列（column）”在水平方向创建一组列col,只有列能作为行的直接子元素.row .col-xs-4 通过列设置padding属性，通过为.row 元素设置负值 margin 从而抵消掉为 .container... 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding 3.栅格类适用于与屏幕宽度大于或等于分界点大小的设备 .col-md-*此为栅格类 二，媒体查询...None （自动） 750px 970px 1170px 类前缀 .col-xs- .col-sm- .col-md- .col-lg- 列（column）数 12 最大列（column）宽 自动....visible-*-inline display: inline; .visible-*-inline-block display: inline-block; 因此，以超小屏幕（xs）为例
3、在 row 中允许放 若干列，但需要指定每列需要占的列宽(1/12) <div class...col-lg-8 : 在 lg 屏幕下，占8列的宽 .col-xs-* : 适用于 xs/sm/md/lg .col-xs-6 : 在 xs/sm/md/lg...都占6列的宽 .col-sm-* : 适用于 sm/md/lg .col-md-* : 适用于 md/lg .col-lg-* : 适用于 lg...大屏幕的内容class是不能兼容小屏幕的，所以大屏幕的内容放在小屏幕中都是以 100%的宽度显示的（纵向排列） 3、可以在一个列(div)中，指定在不同屏幕下的宽度占比 <div...在md中占3列的宽(1行中能显示4列) 4、指定列在特定屏幕下隐藏 .hidden-lg : 在 lg 屏幕下隐藏 .hidden-md : 在 md 屏幕下隐藏
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
