bootstrap入门
1. 什么是bootstrap
bootstrap是由twitter公司开源的一个基于HTML、CSS和Javascript的UI(用户界面)框架
2. bootstrap的特点
- 跨设备、跨浏览器
- 支持响应式布局
- 什么是响应式布局?
一个网站支持多类终端,而不是仅仅为某一种终端所设计。比如:某个网站需要同时支持PC端、PAD端和移动端访问,由于这三端的屏幕大小和分辨率都存在较大差异,因此,不可能在三种终端上都使用一种布局模式。
- 提供全面的组件和css样式
bootstrap对于HTML的常用元素都做了基本的样式封装,如果需要美化某个元素,只需要在bootstrap中找到其对应元素的样式即可。
并且,bootstrap还提供了常用的js组件,因此,我们在使用bootstrap开发一些常用的功能时,我们不需要再去单独的找对应的组件。
- 内置jQuery插件
3. bootstrap文件结构
我们可以从bootstrap中文网找到我们需要的bootstrap版本文件,该网站提供了三个版本给用户,我们需要下载编译版使用。
文件结构如下所示:
主要分为三大核心目录:css(样式)、js(脚本)、fonts(字体)。
1.css 目录中有四个css 后缀的文件,其中包含min 字样的,是压缩版本,一般使用
这个;不包含的属于没有压缩的,可以学习了解css 代码的文件;而map 后缀的文件则是
css 源码映射表,在一些特定的浏览器工具中使用。
2.js 目录包含两个文件,是未压缩和压缩的js 文件。
3.fonts 目录包含了不同后缀的字体文件。
4. bootstrap的使用
在页面内引入bootstrap中css目录下的bootstrap.css文件、jquery文件和js目录下的bootstrap.js文件
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Bootstrap 介绍</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<button class="btn btn-info">Bootstrap</button>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>