bootstrap在网页中使用

本文通过实例演示如何在HTML5项目中引入并使用Bootstrap框架,包括基本的文件设置、样式表及JavaScript文件的链接方法,并解决了IE9以下浏览器的兼容性问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

   关于作者:

       bootstrap在网页中使用

       bootstrap布局

       bootstrap响应式布局

    想在网页中使用bootstrap结构呢,只需要在网页中加载使用结构提供的样式表和js文件就可以了,下面我们来亲自动手操作一下。因为工作中用的是IDE,好吧,我们就用IDE来编码了。首先我们打开IDE,我用的版本是13.1.2。我们新建一个project,然后选择Static Web,找到HTML5 Bolerplate,如下图所示:



 然后我们新建一个html5文件,命名为start.html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

 下面我们就可以让这个网页去使用bootstrap结构。我们先把结构表所用到的样式表链接到这个网页中,在<head></head>之间加入这一行代码   <link href="../css/bootstrap.css" rel="stylesheet">

首先我们把bootstrap.css copy到了项目的css文件下面。现在我们就可以在网页中使用架构设计好的样式了,如果你还想使用架构提供的那些JavaScript插件,你需要把架构提供的那个js文件也链接到这个文档里面,另外我们还要在网页中使用jquery 这个JavaScript架构,因为这个bootstap结构提供的这些JavaScript插件,需要用到jquery这个架构,所以我们还需要引入jquery.js

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="../css/bootstrap.css" rel="stylesheet"/>
    <script src="../js/vendor/jquery-1.10.2.min.js"/>
    <script src="../js/bootstrap.js"/>
</head>
<body>

</body>
</html>

 然后我们需要在网页中添加一个viewport 的meta标签,这个标签可以修正网页在大部分的移动设备上面的显示,同样的是在<head></head>标签之间加入

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title></title>
    <link href="../css/bootstrap.css" rel="stylesheet"/>
    <script src="../js/vendor/jquery-1.10.2.min.js"/>
    <script src="../js/bootstrap.js"/>

</head>
<body>

</body>
</html>

 因为我们这个文档的类型是html5,这里的需要使用到一些新的标签,比如说用head定义页头,用nav定义主导航菜单,IE9一下版本的IE浏览器并不认识这些标签,所以呢你就没有办法为这些菜单去添加样式,那么修复这个问题,我们需要用到一个html5.js的文件:

<!–[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>

 那么这几行代码的意思就是,如果说用户使用的是IE浏览器的版本小于IE9,这样就在网页中使用<!–[if IE]>与<![endif]–>之间的html5.js这个脚本文件,现在我们就可以使用bootstrap这个架构去创建这个文件了。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!--[if IE]>
    <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
    <![endif]-->
    <title></title>
    <link href="../css/bootstrap.css" rel="stylesheet"/>
    <script src="../js/vendor/jquery-1.10.2.min.js"/>
    <script src="../js/bootstrap.js"/>

</head>
<body>

</body>
</html>

 下一篇博客:bootstap布局   上一篇博客:跟我一步一步学习bootstap

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值