lang="zh-CN" 中文字符
lang="en" 英文字符 使用栅格布局之前先引入栅格布局的自带的样式和jQuery 必须按顺序引入<link rel="stylesheet" href="./css/normalize.css"> <link rel="stylesheet" href="./css/bootstrap.min.css">
<script src="./js/jquery.min.js"></script> <script src="./js/bootstrap.min.js"></script>
引入之前移动设备优先引入
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
这个是浏览器兼容性问题 为了让IE8以下支持HTML5和媒体查询更能
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 --> <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 --> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <![endif]-->栅格系统:父容器为12份,不管怎么分父容器都是12份 .col-xs- 超小屏幕 手机 (<768px) .col-sm- 小屏幕 平板 (≥768px) .col-md- 中等屏幕 桌面显示器 (≥992px) .col-lg- 大屏幕 大桌面显示器 (≥1200px) 样式是本身有用本身样式,没有找小的,最小的没有,用原有本身的样式(div)
<div class="container"> <div class="row"> <div class="col-md-6"></div> <div class="col-md-6"></div> </div> </div>
表格样式:
<table class="table table-bordered table-striped table-hover"> <thead> <tr> <th>易烊千玺</th> <th>易烊千玺</th> <th>易烊千玺</th> </tr> </thead> <tbody> <!-- 作用于tr里面的td --> <tr class="danger"> <td>易烊千玺</td> <td>易烊千玺</td> <td>易烊千玺</td> </tr> <!-- 作用于tr --> <tr class="bg-danger"> <td>易烊千玺</td> <td>易烊千玺</td> <td>易烊千玺</td> </tr> <tr> <td>易烊千玺</td> <td>易烊千玺</td> <td>易烊千玺</td> </tr> </tbody> </table>
在表格内加入样式
<table class="table table-bordered table-striped table-hover">作用于tr里面的td
<tr class="danger">作用于tr
<tr class="bg-danger">
两者作用不一样但是效果一样
给标签字体加样式
<h1 class="text-info">白起7</h1>
给标签背景加样式
<h1 class="bg-info">白起7</h1>btn:告诉样式是按钮 btn-danger:作用于按钮样式的颜色
<a href="#" class="btn btn-danger">按钮</a>