Bootstrap 入门目录 1、下载Bootstrap 下载压缩包之后,将其解压缩到任意目录即可看到以下目录结构: bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff 这是最基本的Bootstrap组织形式:未压缩版的文件可以在任意web项目中直接使用。我们提供了压缩(bootstrap.min.*)与未压缩 (bootstrap.*)的CSS和JS文件。字体图标文件来自于Glyphicons。 2、引入Bootstrap相关的css、js <!-- Bootstrap核心CSS文件 --> <link rel="stylesheet" href="http://cdn./twitter-bootstrap/3.0.3/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件(一般不用引入) --> <link rel="stylesheet" href="http://cdn./twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css"> <!-- jQuery文件,在bootstrap.min.js之前引入 --> <script src="http://cdn./jquery/1.10.2/jquery.min.js"></script> <!-- Bootstrap核心JavaScript文件 --> <script src="http://cdn./twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script> Bootstrap依赖jQuery 3、一个最简单的Bootstrap页面 <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link rel="stylesheet" href="http://cdn./twitter-bootstrap/3.0.3/css/bootstrap.min.css"> <!-- HTML5 Shim and Respond.js 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./html5shiv/3.7.0/html5shiv.min.js"></script> <script src="http://cdn./respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdn./jquery/1.10.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="http://cdn./twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script> </body> </html> HTML5文档类型说明 <!DOCTYPE html> <html lang="zh-cn"> ... </html> 引入respond.min.js说明 引入html5shiv.min.js说明 针对IE浏览器比较好的解决方案是html5shiv。htnl5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。 html5shiv的使用非常的简单,考虑到IE9是支持html5的,所以只需要在页面head中添加如下代码即可: <!--[if lt IE 9]>
<script type="text/javascript" src="scripts/html5shiv.js"></script>
<![endif]-->
4、浏览器支持 被支持的浏览器 a. Chrome (Mac、Windows、iOS和Android)
b. Safari (只支持Mac和iOS版,Windows版已经基本死掉了)
c. Firefox (Mac、Windows)
d. Internet Explorer
e. Opera (Mac、Windows) Bootstrap在Chromium、Linux版Chrome、Linux版Firefox和Internet Explorer 7上的表现也是很不错的,虽然我们不对其进行官方支持。 |
|