Bootstrap简介:
Bootstrap之所以受到广大前端开发人员的欢迎,是因为可以构建出非常优雅的前端页面,而且占用资源小
优点:
1.移动设备优先
2.浏览器支持:主流浏览器都支持Bootstrap,包括IE
3.响应式设计:Bootstrap的响应式CSS能够自适应于台式机,平板计算机和手机的屏幕大小
4.良好的代码规范:为开发人员创建接口提供一个简介统一的解决方案,减少了测试的工作量
5.组件:Bootstrap包含了功能强大的内置组件
6.定制:Bootstrap还提供了基于web的定制
Bootstrap内容:
1.基本结构:Bootstrap提供了一个带有网格系统,链接样式,背景的基本结构
2.CSS:Bootstrap自带全局的CSS设置,定义基本的HTML元素样式,可扩展的class,以及一个先进的栅格系统
3.布局组件:Bootstrap包含了十几个可重用的组件,用于创建图像,下拉菜单,导航,警告框,弹出框等
4.JavaScript插件:Bootstrap包含了十几个自定义的jQuery插件,可以直接包含所有的插件,也可以逐个包含这些插件
5.定制:开发人员可以定制Bootstrap的组件,LESS变量和jQuery插件来得到一套自定义的版本
Bootstrap中预定义了一套CSS样式和一套对应的jQuery代码,应用时只需提供固定的HTML结构,添加Bootstrap中提供的class名称,就可以完成指定效果的实现
Bootstrap基本模板:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible"content="IE=edge">
<!-- 此属性为文档兼容模式(compatible)声明,表示使用IE浏览器的最新渲染模式 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 根据设置确定视口的宽度,device-width表示采用设备宽度,初始缩放1.0,
使用user-scalable=no可以 禁用其缩放(zooming)功能-->
<!-- 上述三个meta标签必须放在最前面,其他内容必须跟随其后 -->
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<!-- 引入Bootstrap -->
<script src="html5shiv/html5shiv-printshiv.min.js"></script>
<script src="respond/respond.min.js"></script>
<!-- HTML5 Shiv和Respond.js用于让低于IE9版本的浏览器支持HTML5元素和媒体查询
注意:如果通过file:// 引入Respond.js文件,则该文件无法起到效果 -->
<title>Document</title>
</head>