Bootstrap介绍
特点
(1).跨设备、跨浏览器
可以兼容所有现代浏览器,包括比较诟病的 IE7、8。当然,本课程不再考虑 IE9 以下
浏览器。
(2).响应式布局
不但可以支持 PC 端的各种分辨率的显示,还支持移动端 PAD、手机等屏幕的响应式切
换显示。
(3).提供的全面的组件
Bootstrap 提供了实用性很强的组件,包括:导航、标签、工具条、按钮等一系列组
件,方便开发者调用
(4).内置 jQuery 插件
Bootstrap 提供了很多实用性的 jquery 插件,这些插件方便开发者实现 Web 中各种
常规特效。
(5).支持 HTML5、CSS3
HTML5 语义化标签和 CSS3 属性,都得到很好的支持。
(6).支持 LESS 动态样式
LESS 使用变量、嵌套、操作混合编码,编写更快、更灵活的 CSS。它和 Bootstrap 能
很好的配合开发。
结构
bootstrap/
├── css/
│├──
│├──
│├──
│├── bootstrap-
│├── bootstrap-
│└── bootstrap-
├── js/
│├──
│└──
└── fonts/
├── glyphicons-halflings-
├── glyphicons-halflings-
├── glyphicons-halflings-
├── glyphicons-halflings-
└── glyphicons-halflings-
主要分为三大核心目录:css(样式)、js(脚本)、fonts(字体)。
目录中有四个 css 后缀的文件,其中包含 min 字样的,是压缩版本,一般使用
这个;不包含的属于没有压缩的,可以学习了解 css 代码的文件;而 map 后缀的文件则是
css 源码映射表,在一些特定的浏览器工具中使用。
目录包含两个文件,是未压缩和压缩的 js 文件。
目录包含了不同后缀的字体文件。
基本模板
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-patible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/" rel="stylesheet">
<!-- HTML5 shim and for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//cdn./html5shiv/.js"></script>
<script src="//cdn./.2/"></script>
<![endif]-->
</head>
<body>
<h1>你好,世界!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//cdn./jquery/.js"></script>
<!-- Include piled plugins (below), or include individual files as needed -->
bootstrap 来自淘豆网m.daumloan.com转载请标明出处.
