快速入门bootstrop
程序员文章站
2022-07-13 15:54:06
...
引包注释
<!DOCTYPE html>
<!-- 网页的语言 zh-cn中文简体 en英语 zh-TW* zh-hk 香港国语 -->
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 如果我们的电脑中有IE浏览器 也有edge浏览器 统一用edge的渲染方式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>基本模板</title>
<!-- 引入Bootstrap -->
<link rel="stylesheet" href="./css/bootstrap.css">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!-- 让低版本浏览器兼容html5新增标签的js插件（只要改标签没有自带的界面 html5shiv就可以
让低版本浏览器支持 ） -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
让低版本浏览器支持媒体查询的插件
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
<!-- IE条件注释语句 含义：如果是IE九一下的浏览器就执行条件注释语句中的代码 -->
<!--[if lt IE 9]><![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- 基于jq -->
<script src="./js/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="./js/bootstrap.min.js"></script>
</body>
</html>
布局容器
1.container 是固定宽度并支持响应式布局的容器
2.container-fluid 100% 宽度，占据全部视口（viewport）的容器
<div class="container one">
<div class="row"></div>
</div>
<div class="container-fluid two">
<div class="row"></div>
</div>
删格系统
<body>
<h1>你好，世界！</h1>
<!-- 栅格系统就是由布局容器（container 或container-fluid） 行row 列col 12列 -->
<!-- 如果不够就 显示当前的 md是显示设备的类型
bootstrap能做哪些适配
手机 平板 PC（小屏大屏）
col-xs-1 代表手机 是屏幕宽度小于768px 超小屏（xs）
col-sm-1 代表平板 大于等于768
col-md-1 普通显示器大于等于992px
col-lg-1 大屏显示器大于1200px
-->
<!-- 基于jq -->
<div class="container">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
</div>
</div>
<script src="./js/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="./js/bootstrap.min.js"></script>
</body>
列的偏移
<!-- 列的偏移 空出一个位置 -->
col-md-offset-1