本文介绍了如何使用Bootstrap进行HTML模板构建，包括设置字符编码、响应式布局、栅格系统、布局容器、导航和表单控件等内容。详细讲解了Bootstrap的基本结构和常用组件的使用方法。
BootStrap学习笔记
BootStrap入门
一、主要内容
BootStrap模板
<!DOCTYPE html>
<html lang="en">
<head>
<!--设置当前HTML文件的字符编码-->
<meta charset="UTF-8">
<!--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,user-scalable=no">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap基本的HTML模板</title>
<!--引入Bootstrap核心样式表(CSS)文件-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<!--引入html5shiv.min.js让浏览器可以识别HTML5的新标签-->
<!--引入respond.min.js让低版本浏览器可以使用CSS3的媒体查询-->
<!--[if It IE 9]>
<script src="html5shiv/html5shiv.min.js"></script>
<script src="Respond/respond.min.js"></script>
<![endif]-->
<!--自己写的CSS样式文件放head最下面-->
</head>
<body>
<div><h1>Hello,world!</h1></div>
<!-- Bootstrap的所有JS组件都是依赖jQuery的，所以必须放在前边-->
<script src="js/jquery.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。-->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!--自己写的js文件放在body最下面-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>Bootstrap基本的HTML模板</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<div><h1>Hello,world!</h1></div>
<script src="js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
二、安装和使用
参考API：http://v3.bootcss.com/css/
三、布局容器和栅格网格系统
- 做一个页面最先要做一个布局
01 布局容器
.container类用于固定宽度并支持响应式布局的容器：固定宽度，会有留白
<div class="container">
...
</div>
.container-fluid类用于100% 宽度，占据全部视口（viewport）的容器
<div class="container-fluid">
...
</div>
02 栅格网格系统
-
BootStrap 提供了一套响应式、移动设备优先的流式栅格系统。
-
随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
-
栅格系统用于通过一系列的行（row）或列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
-
网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份（也有平分成24份或32份，但12份是最常见的），
-
再调整内外边距，最后结合媒体查询，就制作出来强大的响应式网格系统。
-
BootStrapu框架中的网格系统就是将容器平分成12份。
- 注意：网格系统必须使用到CSS
-
container、row、xs（xsmall phones），sm（small tablets），md（middle desktops），lg（laege desktops），
-
即超小屏（自动），小屏（750px），中屏（970px）和大屏（1170px）
-
数据行（.row）必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距（padding）。
-
在行（.row）中可以添加列（.column），只有列（column）才可以作为行容器（.row）的直接子元素，
-
但列数之和不能超过平分的总列数，比如12。如果大于12，则自动换到下一行。
-
具体内容应当放置在列容器之内。
<div class="container">
<div class="row">
<div class="col-md-4">4列</div>
<div class="col-md-8">8列</div>
</div>
</div>
(1) 列组合
- 列总数不能超过12，大于12则自动换刀下一行
(2) 列偏移
(3) 列排序
- 改变列的方向，就是改变左右浮动
四、常用样式
01 排版
(1) 标题
-
对h1~h6的标题效果进行覆盖，提供劳务对应的类名，为非标题元素设置样式
-
副标题 small标签 或 .small类名
(2) 段落
<lead>
<small>
<b><strong>
<i><em>
(3) 强调
-
定义了一套类名，强调类名，强调类都是通过颜色来表示强调
-
.text-muted：提示，使用浅灰色 -
.text-primary：主要，使用蓝色 -
.text-success：成功，使用浅绿色 -
.text-info：通知信息，使用浅蓝色 -
.text-warning：警告，使用黄色 -
.text-danger：危险，使用褐色
(4) 对齐
-
通过定义四个类名来控制文本的对齐风格
-
.text-left：左对齐 -
.text-center：居中对齐 -
.text-right：右对齐 -
.text-justify：两端对齐
02 代码
03 表格
04 表单控件
- 什么是表单？
- 表单的主要功能是用来与用户做交流的一个网页控件，
- 包括：文本输入框、下拉选择框、复选按钮、文本域和按钮等
(1) 文本框、下拉框与文本域
-
文本框
-
原生：
<input type="text" /> -
BootStrap
-
form-control表单元素的样式 -
.input-lg、.input.sm表单控件的大小 -
<input type="text" class="form-control"/><!--但是会占一整行--> <!--可行的是，--> <div class="row"> <div class="col-md-3"> <input type="text" class="form-control"/> </div> </div>
-
-
-
下拉框
-
原生
-
<select> <option>请选择城市</option> <option>上海</option> <option>北京</option> </select>
-
-
文本域
- 原生：
<textarea></textarea>
- 原生：
扫一扫
2950
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
