Bootstrap
MySql的语法看这篇就够了,传送地址:MySql必知必会
JSP的使用看这篇就够了,传送地址:JSP必知必会
一、概念
1.Bootstrap是一个基于HTML、CSS、JavaScript的前端开发框架
2.好处:
(1) 定义了很多CSS样式和JavaScript插件,开发人员可以直接使用这些样式和插件制作页面
(2) 采用响应式布局:一个页面可以兼容不同分辨率的设备(电脑、平板、手机等)
二、使用步骤
- 下载Bootstrap,得到bootstrap-3.3.7-dist文件夹,其中有三个文件夹
- 将这三个文件夹复制到项目中
- 创建HTML页面,使用标签引入上述三个文件夹中必要的内容
代码演示:Bootstrap的基本使用 注意:使用Bootstrap时都必须以此页面为基础
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签必须放在最前面,任何其他内容都必须跟随其后 -->
<title>此处定义标签页名称</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--上述三个标签的href、src属性写导入的三个文件夹中指定内容的位置-->
</head>
<body>
</body>
</html>
三、响应式布局
- 概念:同一套页面可以兼容不同分辨率的设备
- 实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子,不论哪种设备 上都是一行有12个格子,如同一个大小的图片,在电脑端可能占4个格子即可显示,而 在手机端可能占12个格子才可以显示
- 步骤:(1) 定义容器:
①container:两边留白
②container-fluid:每一种设备都是100%宽度,两边不留白
(2) 定义行:
(3) 定义元素:xxx
①即指定元素在不同的设备上所占的格子数目:col-设备代号-格子数目(取值1-12)
②设备代号:
代码演示:响应式布局的基本使用
<!--页面其余标签都是基于上述Bootstrap基础页面-->
<body>
<!--1.定义容器-->
<div class="container">
<!--2.定义行-->
<div class="row">
<!--3.定义元素-->
<!--在电脑的一行上显示4个"栅格",在平板上一行显示3个"栅格"-->
<div class="col-lg-3 col-sm-4">栅格</div>
<div class="col-lg-3 col-sm-4">栅格</div>
<div class="col-lg-3 col-sm-4">栅格</div>
<div class="col-lg-3 col-sm-4">栅格</div>
</div>
</div>
</body>
运行结果:(1)
运行结果:(2)
注意:
- 一行中如果格子数目超过12,则超出部分自动换行
- 栅格类属性可以向上兼容,栅格类适用于大于或等于屏幕宽度分界点大小的设备
- 如果真实设备宽度小于设置栅格类属性的设备代码的最小值,会一个元素占满一整行
四、Bootstrap的使用
基于Bootstrap的基础页面,到Bootstrap的官网依据官网提供的对应样式的代码进行复制粘贴,然后进行修改成为自己想要的页面样式,也可通过下载的离线文档的v3.bootcss.com文件夹下的index.html页面本地离线访问官网