码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap_第一次使用

时间:2014-11-25 18:37:39      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:style   http   ar   os   使用   sp   java   文件   on   


在网页中使用Bootstrap

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

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- 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="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="js/jquery-2.0.3.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

1.首先我们可以将Bootstrap的样式文件引用到网页中

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

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

<script src="js/jquery-2.0.3.js"></script>
<script src="js/bootstrap.min.js"></script>

3.viewport的标签,这个标签可以修改在大部分的移动设备上面的显示,为了确保适当的绘制和触屏缩放。

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

<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

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

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

bubuko.com,布布扣

总结

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


bubuko.com,布布扣



bootstrap_第一次使用

标签:style   http   ar   os   使用   sp   java   文件   on   

原文地址:http://blog.csdn.net/yyt602037504/article/details/41485091

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!