本文详细介绍了Bootstrap和LayUI的布局容器、栅格系统，包括固定宽度容器、全宽容器、网格系统的工作原理，以及如何进行列组合、偏移和排序。同时，还探讨了两者中的常用样式，如标题、段落、强调样式和对齐方式。Bootstrap的表格样式和表单布局也被提及，而LayUI的部分则涵盖了页面元素、栅格系统、导航、选项卡、表格和表单组件的使用方法。
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="utf-8">
<!--使⽤X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
viewport表示⽤户是否可以缩放⻚⾯；
width指定视区的逻辑宽度；
device-width指示视区宽度应为设备的屏幕宽度；
initial-scale指令⽤于设置Web⻚⾯的初始缩放⽐例
initial-scale=1则将显示未经缩放的Web⽂档
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap的HTML标准模板</title>
<!-- 载⼊Bootstrap 的css -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head> <body> <h1>Hello, world!</h1>
<!-- 如果要使⽤Bootstrap的js插件，必须先调⼊jQuery -->
<script src="js/jquery-3.4.1.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使⽤的js插件调⽤ -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>注意：
⽬前暂时不使⽤ jquery 的插件 可以不⽤引⼊ js ⽂件,这⾥是为了保证模板的完整性。
说明：
viewport 标记⽤于指定⽤户是否可以缩放Web⻚⾯
width 和 height 指令分别指定视区的逻辑宽度和⾼度。他们的值要么是以像素为单位的数字，要
么是⼀个特殊的标记符号。
width 指令使⽤ device-width 标记可以指示视区宽度应为设备的屏幕宽度。
height 指令使⽤ device-height 标记指示视区⾼度为设备的屏幕⾼度。
initial-scale 指令⽤于设置Web⻚⾯的初始缩放⽐例。默认的初始缩放⽐例值因智能⼿机浏览器的
不同⽽有所差异。通常情况下设备会在浏览器中呈现出整个Web⻚⾯，设为1.0则将显示未经缩放
的Web⽂档。
布局容器和栅格⽹格系统
布局容器
1、.container 类⽤于固定宽度并⽀持响应式布局的容器。
<div class="container">
...
</div>2、.container-fluid类⽤于100% 宽度，占据全部视⼝（viewport）的容器。
<div class="container-fluid">
...
</div>栅格⽹格系统
Bootstrap 提供了⼀套响应式、移动设备优先的流式栅格系统，随着屏幕或视⼝（viewport）尺⼨的
增加，系统会⾃动分为最多12列。栅格系统⽤于通过⼀系列的⾏（row）与列（column）的组合来创建
⻚⾯布局，你的内容就可以放⼊这些创建好的布局中。
⽹格系统的实现原理⾮常简单，仅仅是通过定义容器⼤⼩，平分12份(也有平分成24份或32份，但12
份是最常⻅的)，再调整内外边距，最后结合媒体查询，就制作出了强⼤的响应式⽹格系统。Bootstrap
框架中的⽹格系统就是将容器平分成12份。
注意: ⽹格系统必须使⽤到css
container、row 、xs (xsmall phones)，sm (small tablets)，md (middle desktops)，lg (larger
desktops) 即: 超⼩屏(⾃动)，⼩屏(750px)，中屏(970px)和⼤屏(1170px)
数据⾏(.row)必须包含在容器（.container）中，以便为其赋予合适的对⻬⽅式和内距(padding)。
在⾏(.row)中可以添加列(.column), 只有列（column）才可以作为⾏容器(.row)的直接⼦元素，但列
数之和不能超过平分的总列数，⽐如12。如果⼤于12,则⾃动换到下⼀⾏。
具体内容应当放置在列容器（column）之内
<div class="container">
<div class="row">
<div class="col-md-4">4列</div>
<div class="col-md-8">8列</div>
</div>
</div>
列组合
列组合简单理解就是更改数字来合并列（原则：列总和数不能超12，⼤于12,则⾃动换到下⼀
⾏。），有点类似于表格的colspan属性。
<div class="container">
<div class="row">
<div class="col-md-4">4列</div>
<div class="col-md-8">8列</div>
</div
最低0.47元/天 解锁文章
扫一扫
781
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
