BootStrap 前端框架介绍
Bootstrap优势
- 响应式开发: 让一个网站可以兼容不同分辨力的设备,给用户更好的视觉使用体验。
- 丰富的组件: http://v3.bootcss.com/components/ 提供了丰富的组件可供选择。
- 界面美观。
- 未来趋势,现在很多平台默认引用,比如微软新建asp.net MVC5 ,微软默认引用Bootstrap的包。
如何使用Bootstrap
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!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 >Bootstrap 101 Template</ title >
<!-- 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="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</ head >
< body >
< h1 >你好,世界!</ h1 >
<!-- jQuery (necessary for Bootstrap\'s JavaScript plugins) -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
< script src = "js/bootstrap.min.js" ></ script >
</ body >
</ html >
|
然后在http://v3.bootcss.com/components/ 拷贝我们需要的组件到body里面就可以自己组装界面。