免费优化推广网站的软件,线上销售渠道,什么是wordpress主题,jira confluence做网站目录 00-基础知识01-等宽列布局02-指定某一列的宽度03-根据内容自动改变列的宽度04-五种预定义列宽度 .col、.col-sm-*、.col-md-*、.col-lg-*、.col-xl-*05-不同视口宽度按不同的分列方案划分06-删除列内容的盒模型的外边距07-超过12列怎么办#xff1f;08-重新排列各列的顺序… 目录 00-基础知识01-等宽列布局02-指定某一列的宽度03-根据内容自动改变列的宽度04-五种预定义列宽度 .col、.col-sm-*、.col-md-*、.col-lg-*、.col-xl-*05-不同视口宽度按不同的分列方案划分06-删除列内容的盒模型的外边距07-超过12列怎么办08-重新排列各列的顺序08-1-利用类 .order-* 对列进行排序08-2-利用类 .order-first和类 .order-last 对列进行排序 09-给列的位置添加偏移量(实现列偏移)09-1-使用.offset-md-*类实现列偏移09-2-利用类ml-auto、类mr-auto调整左右外边距实现列偏移 10-行和列的嵌套 00-基础知识
01、Bootstrap的网格系统将屏幕宽度分为12列。
01-等宽列布局
!DOCTYPE html
html
headmeta charsetUTF-8title等宽列布局网页效果/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
h3 aligncenter等宽列布局网页效果/h3
div classrowdiv classcol border py-3 bg-light二分之一/divdiv classcol border py-3 bg-light二分之一/div
/div
div classrowdiv classcol border py-3 bg-light三分之一/divdiv classcol border py-3 bg-light三分之一/divdiv classcol border py-3 bg-light三分之一/div
/div
div classrowdiv classcol border py-3 bg-light四分之一/divdiv classcol border py-3 bg-light四分之一/divdiv classcol border py-3 bg-light四分之一/divdiv classcol border py-3 bg-light四分之一/div
/div
/body
/html运行效果如下
02-指定某一列的宽度
示例代码
!DOCTYPE html
html
headmeta charsetUTF-8title设置一个列宽布局/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
h3 aligncenter指定某一列的宽度/h3
div classrowdiv classcol border py-3 bg-light左/divdiv classcol-7 border py-3 bg-light中/divdiv classcol border py-3 bg-light右/div
/div
div classrowdiv classcol-3 border py-3 bg-light左/divdiv classcol border py-3 bg-light中/divdiv classcol border py-3 bg-light右/div
/div
/body
/html提问Bootstrap的类col、类col-7、类col-3有何区别 答 类col 这是用于定义网格列的基本类。如果您只使用类col它将默认为等宽的列会自动均分可用的列宽每列都会占用相同的空间。示例div classcol.../div 类col-7 这是一个具有数字后缀的类例如col-7它用于定义一个具有指定宽度的网格列。数字后缀表示列应该占用的网格列数。在这种情况下col-7表示该列应该占用网格系统中的7列。该类允许您创建不等宽的列以根据设计需要分配不同的宽度。示例div classcol-7.../div 类col-3 类col-3也是一个具有数字后缀的类例如col-3它用于定义一个具有不同宽度的网格列。数字后缀表示列应该占用的网格列数。在这种情况下col-3表示该列应该占用网格系统中的3列。与col-7类似col-3允许您创建不等宽的列以满足设计需求。示例div classcol-3.../div 代码运行效果如下
03-根据内容自动改变列的宽度
示例代码如下
!DOCTYPE html
html
headmeta charsetUTF-8title根据内容自动改变列的宽度/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/scriptstyleh3 {color: red;}/style/head
body classcontainer
h3 classmb-4根据内容自动改变列的宽度/h3
div classrowdiv classcol border py-3 bg-light左/divdiv classcol-md-auto border py-3 bg-light醉里且贪欢笑,要愁那得工夫。近来始觉古人书,信著全无是处。/divdiv classcol border py-3 bg-light右/div
/div
div classrow justify-content-md-centerdiv classcol border py-3 bg-light左/divdiv classcol-md-auto border py-3 bg-light醉里且贪欢笑,要愁那得工夫。/divdiv classcol border py-3 bg-light右/div
/div
/body
/html主要是通过类 col-md-auto 实现 col-md-auto
col-md-auto类用于定义一个列元素的宽度在中等屏幕md屏幕尺寸通常指的是大于等于768像素的屏幕宽度下应该根据其内容自动调整。当应用了col-md-auto类的列元素包含文本或其他内容时该列将自动调整其宽度以适应其内容的大小。这个类通常用于创建响应式布局使得在中等屏幕尺寸下列的宽度可以根据内容的多少而自动调整以确保内容不会溢出或显得过于拥挤。 运行效果如下图所示
04-五种预定义列宽度 .col、.col-sm-*、.col-md-*、.col-lg-*、.col-xl-*
.col、.col-sm-*、.col-md-*、.col-lg-*、.col-xl-*五种预定义宽度从小到大分别为特小、小、中、中、特大。 当使用Bootstrap时可以通过不同的CSS类来定义不同的列宽度。以下是五种常见的预定义列宽度类的示例代码
.col-*在所有视口宽度尺寸上等分列宽。
div classcontainerdiv classrowdiv classcol1/3/divdiv classcol1/3/divdiv classcol1/3/div/div
/div.col-sm-*在视口宽度尺寸大于等于576px时等分列宽如果尺寸小于576px则列堆叠在一起即每个列占据整行的宽度。
div classcontainerdiv classrowdiv classcol-sm1/2/divdiv classcol-sm1/2/div/div
/div.col-md-*在视口宽度尺寸大于等于768px时等分列宽如果尺寸小于768px则列堆叠在一起即每个列占据整行的宽度。
div classcontainerdiv classrowdiv classcol-md1/4/divdiv classcol-md1/4/divdiv classcol-md1/4/divdiv classcol-md1/4/div/div
/div.col-lg-*在视口宽度尺寸大于等于992px时等分列宽如果尺寸小于992px则列堆叠在一起即每个列占据整行的宽度。
div classcontainerdiv classrowdiv classcol-lg1/2/divdiv classcol-lg1/2/div/div
/div.col-xl-*在视口宽度尺寸大于等于1200px时等分列宽如果尺寸小于1200px则列堆叠在一起即每个列占据整行的宽度。
div classcontainerdiv classrowdiv classcol-xl1/3/divdiv classcol-xl1/3/divdiv classcol-xl1/3/div/div
/div这些示例代码演示了如何使用不同的列宽度类来创建响应式的网格布局以在不同屏幕尺寸上呈现不同的列宽。
进阶示例代码
!DOCTYPE html
html
headmeta charsetUTF-8title水平排列布局的网页效果/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
h3 aligncenter水平排列/h3
!--在视口尺寸大于等于576px时等分列宽--
div classrowdiv classcol-sm-8 border py-3 bg-lightcol-sm-8/divdiv classcol-sm-4 border py-3 bg-lightcol-sm-4/div
/div
!--在视口尺寸大于等于768px时等分列宽--
div classrowdiv classcol-md-8 border py-3 bg-lightcol-md-8/divdiv classcol-md-4 border py-3 bg-lightcol-md-4/div
/div
/body
/html在上面的代码中对于第1个div而言
div classrowdiv classcol-sm-8 border py-3 bg-lightcol-sm-8/divdiv classcol-sm-4 border py-3 bg-lightcol-sm-4/div
/div当视口宽度大于等于576px时第1个div classrow中的列会按照以下方式显示 div classcol-sm-8 border py-3 bg-lightcol-sm-8/div在小于576px的视口上这个列会占据整行的宽度但在大于等于576px的视口上由于它使用了col-sm-8类它会占据父容器的8/122/3的宽度剩余的4/121/3的宽度留给了下一个列。 div classcol-sm-4 border py-3 bg-lightcol-sm-4/div在小于576px的视口上这个列会占据整行的宽度但在大于等于576px的视口上由于它使用了col-sm-4类它会占据父容器的4/121/3的宽度与上一个列一起填满整行。
因此当视口宽度大于等于576px时第一个div classrow中的列将水平排列一个占据2/3的宽度另一个占据1/3的宽度。 相关运行截图如下
在上面的代码中对于第2个div而言
div classrowdiv classcol-md-8 border py-3 bg-lightcol-md-8/divdiv classcol-md-4 border py-3 bg-lightcol-md-4/div
/div当视口宽度小于768px时Bootstrap会默认将列堆叠在一起每个列占据整行的宽度。因此无论是div classcol-md-8 border py-3 bg-lightcol-md-8/div还是div classcol-md-4 border py-3 bg-lightcol-md-4/div都会占据整个宽度一个在上面一个在下面呈垂直排列。 当视口宽度大于等于768px在md级别及以上时第二个div classrow中的列会按照指定的列宽占据父容器的宽度。具体来说 div classcol-md-8 border py-3 bg-lightcol-md-8/div会占据父容器的8/122/3的宽度。 div classcol-md-4 border py-3 bg-lightcol-md-4/div会占据父容器的4/121/3的宽度。 这两个列会水平排列在同一行一个占据2/3的宽度另一个占据1/3的宽度。 运行效果如下图所示 在手机上实测的效果如下 根据上面的介绍可以知道昊虹君的移动端浏览器的视口大小肯定是小于576px的。
在平板上实测的效果如下 根据上面的介绍可以知道昊虹君的平板上浏览器的视口大小肯定是大于等于768px的。
05-不同视口宽度按不同的分列方案划分
在小于576px的设备上显示为一个全宽列和一个半宽列在大于等于576px型设备上显示为一列分别占8份和4份(一共12份)。 示例代码如下
!DOCTYPE html
html
headmeta charsetUTF-8title不同视口宽度按不同的分列方案划分/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
h3 aligncenter不同视口宽度按不同的分列方案划分/h3
!--在小于576px的设备上显示为一个全宽列和一个半宽列在大于等于576px型设备上显示为一列分别占8份和4份(一共12份)--
div classrowdiv classcol-12 col-sm-8 border py-3 bg-light.col-12 .col-sm-8/divdiv classcol-6 col-sm-4 border py-3 bg-light.col-6 .col-sm-4/div
/div
/body
/html运行效果如下图所示
06-删除列内容的盒模型的外边距 可以利用类no-gutters来消除列内容的左右页边距即margin-left和margin-right。
Bootstrap 的 no-gutters 类用于去除列col内容之间的左右外边距以便在水平方向上没有间隙。这样可以创建水平排列的列使它们之间没有任何水平空白间隔从而实现更紧凑的布局。这并不影响列上下的外边距所以在垂直方向上仍然会有默认的上下外边距。
示例代码如下
!DOCTYPE html
html
headmeta charsetUTF-8title删除列内容的左右外边距/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
h3 aligncenter删除列内容的左右外边距/h3div classrowdiv classcol border py-3 bg-lightColumn 1/divdiv classcol border py-3 bg-lightColumn 2/div
/divdiv classrow no-guttersdiv classcol border py-3 bg-lightColumn 1/divdiv classcol border py-3 bg-lightColumn 2/div
/div/body
/html运行效果如下
07-超过12列怎么办
如果在一行中放置超过12列则额外的列将在新行中显示。
08-重新排列各列的顺序
08-1-利用类 .order-* 对列进行排序
可以使用类 .order-* 对列进行排序Bootstrap提供了 .order-1 到.order-12 共12个级别的顺序在主流浏览器上都能生效。
注意没有定义.order-* 类的元素默认排在最前面。
示例代码如下
!DOCTYPE html
html
headmeta charsetUTF-8title重新排列各列的顺序/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
h3 aligncenter重新排列各列的顺序/h3
div classrowdiv classcol order-12 py-3 border bg-lightorder-12/divdiv classcol order-1 py-3 border bg-lightorder-1/divdiv classcol order-6 py-3 border bg-lightorder-6/div!--没有定义.order-* 类的元素默认排在最前面。--div classcol py-3 border bg-lightcol/div
/div
/body
/html08-2-利用类 .order-first和类 .order-last 对列进行排序
示例代码如下
!DOCTYPE html
html
headmeta charsetUTF-8title使用order-first和order-last类/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
h3 classmb-4使用order-first和order-last类排列顺序/h3
div classrowdiv classcol order-last py-3 border bg-lightorder-last/divdiv classcol py-3 border bg-lightcol/divdiv classcol order-first py-3 border bg-lightorder-first/div
/div
/body
/html运行效果如下
09-给列的位置添加偏移量(实现列偏移)
09-1-使用.offset-md-*类实现列偏移
示例代码如下
!DOCTYPE html
html
headmeta charsetUTF-8title使用.offset-md-*类实现列偏移/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
h3 aligncenter使用.offset-md-*类实现列偏移/h3
div classrowdiv classcol-md-6 offset-md-3 py-3 border bg-light.col-md-6 .offset-md-3/div
/div
div classrowdiv classcol-md-4 offset-md-1 py-3 border bg-light.col-md-3 .offset-md-3/divdiv classcol-md-4 offset-md-2 py-3 border bg-light.col-md-3 .offset-md-3/div
/div
div classrowdiv classcol-md-4 py-3 border bg-light.col-md-4/divdiv classcol-md-4 offset-md-4 py-3 border bg-light.col-md-4 .offset-md-4/div
/div
/body
/html运行效果如下图所示
09-2-利用类ml-auto、类mr-auto调整左右外边距实现列偏移
ml-auto类应用于元素的左边距使这个元素向右移动直到容器的边界或另一个元素接触从而实现右对齐的效果。 mr-auto类应用于元素的右边距使这个元素向左移动直到容器的边界或另一个元素接触从而实现左对齐的效果。 这两个类常用于在导航栏、按钮组和其他布局中调整元素的位置以实现更好的视觉效果和用户体验。 示例代码
!DOCTYPE html
html
headmeta charsetUTF-8title使用margin类实现列偏移/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
h3 aligncenter使用margin类实现列偏移/h3
div classrowdiv classcol-md-4 py-3 border bg-light.col-md-4/divdiv classcol-md-4 ml-auto py-3 border bg-light.col-md-4 .ml-auto/div
/div
div classrowdiv classcol-md-3 ml-md-auto py-3 border bg-light.col-md-3 .ml-md-auto/divdiv classcol-md-3 ml-md-auto py-3 border bg-light.col-md-3 .ml-md-auto/div
/div
div classrowdiv classcol-auto mr-auto py-3 border bg-light.col-auto .mr-auto/divdiv classcol-auto py-3 border bg-light.col-auto/div
/div
/body
/html运行效果如下图所示
10-行和列的嵌套
可以在某个行和列形成的方块中嵌套行和列示例代码如下
!DOCTYPE html
html
headmeta charsetUTF-8title行列嵌套布局网页效果/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
h3 aligncenter行列嵌套布局效果/h3
div classrowdiv classcol-6!--嵌套行和列--div classrow border no-guttersdiv classcol-3img src1.jpg alt/divdiv classcol-9 pl-3哈密瓜主产于吐哈盆地即吐鲁番盆地和哈密盆地的统称它形态各异风味独特瓜肉肥厚清脆爽口。/div/div/divdiv classcol-6!--嵌套行和列--div classrow border no-guttersdiv classcol-3img src2.jpg alt/divdiv classcol-9 pl-3葡萄为著名水果生食或制葡萄干并酿酒酿酒后的酒脚可提酒石酸根和藤药用能止呕、安胎。/div/div/div
/div
/body
/html运行效果如下
