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

bootstrap_第一次使用

2024-08-04 09:14:40   219人阅读


在网页中使用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_第一次使用


联系
我们