BootStrap&LayUI

最新推荐文章于 2023-10-06 19:48:55 发布

好来污最佳男主角

最新推荐文章于 2023-10-06 19:48:55 发布

阅读量420

点赞数

文章标签： bootstrap

本文链接：https://blog.csdn.net/Hello_zbs/article/details/105982393

版权

<!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元/天解锁文章

好来污最佳男主角

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BootStrap&LayUI

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge">&l...
复制链接

扫一扫