首页 > 代码库 > bootstrap_第一次使用

bootstrap_第一次使用


在网页中使用Bootstrap

我们创建了一个最简单的基本模版

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href=http://www.mamicode.com/"css/bootstrap.min.css" rel="stylesheet" media="screen">>
1.首先我们可以将Bootstrap的样式文件引用到网页中

<link href=http://www.mamicode.com/"css/bootstrap.min.css" rel="stylesheet" media="screen">

2.如果你需要使用Bootstrap架构提供JavaScript插件的话,那么需要将架构的js文件链接引用到网页中,上面也有提到过JavaScript插件都是依赖与jQuery库的,所以我们当然也需要链接引用jquery的库文件

<script src=http://www.mamicode.com/"js/jquery-2.0.3.js"></script>>
3.viewport的标签,这个标签可以修改在大部分的移动设备上面的显示,为了确保适当的绘制和触屏缩放。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
4.我们使用的html5的一些新的标签,那么在IE9以下的浏览器并不支持这些标签,也不能为这些标签进行添加样式。那么修复这个问题我们需要链接引用的文件如下

<!--[if lt IE 9]>
    <script src=http://www.mamicode.com/"https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>>

意思就是说如果用户IE浏览器的版本小于IE9,那么就会加载这两个js文件库,现在就可以使用这些新的标签,并且可以在这些标签上添加样式了。

就这样我们最简单的Hello World!页面呈现在了大家面前。

总结

在上面我们也启用了响应式的布局。当然有些网站可能并不需要进行响应式的布局,我们就需要进行手动的禁用这个布局,这个文档当中也有详细的说明。




bootstrap_第一次使用