一.全局CSS样式
1.html5文档类型,标准,参照下面的进行设置
<!DOCTYPE html> <html lang="zh-CN"> ... </html>
2.移动设备优先 bootstrap是移动设备优先的!
为了确保适当的绘制和触屏缩放,需要在<head>之中添加viewport元数据标签.
<meta name="viewport" content="width=device-width, initial-scale=1">
**通过视口(viewport)设置meta属性为 user-scalable=no 可以禁用其缩放功能.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
3.排版与链接
Bootstrap 排版、链接样式设置了基本的全局样式。分别是：
- 为
body元素设置background-color: #fff; - 使用
@font-family-base、@font-size-base和@line-height-base变量作为排版的基本参数 - 为所有链接设置了基本颜色
@link-color，并且当链接处于:hover状态时才添加下划线
这些样式都能在 scaffolding.less 文件中找到对应的源码.
4.Normalize.css
5.布局容器
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container"> ... </div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器
<div class="container-fluid"> ... </div>
......
二.字体图标
创建一个嵌套的<span>标签,并将图标类应用到这个<span>标签上!!!
**图标类只能应用在不包含任何文本内容或子元素的元素上.只对内容为空的元素其作用!!
**为了设置正确的内补(padding),务必在图标和文本之间添加一个空格.
<!doctype html> <!--HTML5的文档-->
<html lang="en"> <!--语言-->
<head>
<meta charset="UTF-8"> <!--编码格式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--IE浏览器的解
析模式-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--视窗设置-->
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<!-- 1.Bootstrap 层叠样式表 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and
media queries -->
<!-- WARNING: Respond.js doesn‘t work if you view the page via
file:// -->
<!--[if lt IE 9]>
<script
src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script
src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--字体图标 下面这个!-->
<span class="glyphicon glyphicon-send"></span>
<!-- 2.jQuery库,必须在加载Bootstrap.min.js之前-->
<script
src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 3.加载bootstrap的核心js库 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
http://www.bootcss.com/
时间： 2024-12-22 20:40:17