搜公众号
推荐 原创 视频 Java开发 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库
Lambda在线 > 小海前端开发技术 > 使用Bootstrap的HTML框架

使用Bootstrap的HTML框架

小海前端开发技术 2017-09-26
举报

从Bootstrap官网上下载Bootstrap框架的压缩包,需要将bootstrap.css和bootstrap.js文件加载到HTML文档中。这样HTML文档就变为了下列格式:



<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />    

    <meta http-equiv="X_UA_Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width,initial-scale=1.0" />

    <link rel="stylesheet" type="text/css" href="style/bootstrap.css" />

    <link rel="stylesheet" type="text/css" href="style/index.css" />

    <script type="text/javascript" ></script>

    <script type="text/javascript" ></script>

    <script type="text/javascript" ></script>

    <title>页面标题</title>

</head>

<body>   

</body>

</html>


上述代码反映了Bootstrap的以下几个问题:


1、提供对MicrosoftEdge浏览器的支持。

为了更好的支持IE系列浏览器,这里需要利用代码告诉IE浏览器,IE8/9以及以后的版本都会以最高版本的IE(即Microsoft Edge浏览器)来渲染页面。该句代码书写在HTML文档的<head></head>中,代码如下:

<metahttp-equiv="X_UA_Compatible" content="IE=edge" />


2、提供对移动端的支持。

由于Bootstrap可以很好的支持移动端的开发,利用该框架所提供的栅格系统,可以让页面在移动端自动匹配设备,因此必须在HTML文档的<head></head>中添加设置移动端视口的代码:

<meta name="viewport" content="width=device-width,initial-scale=1.0"/>


3、Bootstrap插件必须具备jQuery技术的支持。

尽管具备了bootstrap.js文件,得以对大部分插件的事件和行为进行描述,但是Bootstrap依然是一个需要依靠jQuery技术的前端框架。因此在搭建运行环境时必须加载jQuery文档:

<scripttype="text/javascript"src="js/jquery.js"></script>



最后,Bootstrap官网指出,在HTML文档的<head></head>代码中,指定字符集、提供对Microsoft Edge浏览器的支持、提供对移动端的支持这三条代码必须书写在文件头的最前端。

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《使用Bootstrap的HTML框架》的版权归原作者「小海前端开发技术」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注小海前端开发技术微信公众号

小海前端开发技术微信公众号:gh_7252f43d983d

小海前端开发技术

手机扫描上方二维码即可关注小海前端开发技术微信公众号

小海前端开发技术最新文章

精品公众号随机推荐

举报