bootstrap初体验

最新推荐文章于 2024-08-14 10:10:50 发布

原创最新推荐文章于 2024-08-14 10:10:50 发布 · 279 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

bootstrap 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个基于Bootstrap框架的标准网页布局模板，包括了移动优先的视口设置、网页编码、IE兼容性处理等基本配置，并详细说明了jQuery和Bootstrap JS文件的正确引入方式。

项目中每个页面都要参照如下的样式

<!DOCTYPE html>
<html lang="zh-CN">
  ...
</html>

bootstrap遵循移动设备优先原则

<meta name="viewport" content="width=device-width, initial-scale=1">
<!--以下是禁用了屏幕的缩放功能  ，设置了user-scalable=no使得移动用户感觉网页更像是原生的-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

然后还有网页的编码，同时还要保证在ie运行最新的渲染模式，bootstrap不支持ie8以下的ie浏览器

<!--设置网页编码为utf-8-->
<meta charset="utf-8">
<!--设置在ie浏览器中运行最新的渲染模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

由于bootstrap是基于jquery的所以，在引入bootstrap的js文件时要先引入jquery

<!--此处我将jquery.js文件下载到了js文件夹下，然后直接引用就好了-->
<script type="text/javascript" src="../js/jquery.js "></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script type="text/javascript" src="../js/bootstrap.min.js "></script>

最基本的网页格式如下

<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<!--设置网页编码为utf-8 -->
		<meta charset="utf-8">
		<!-- 在ie浏览器运行最新的渲染模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!--支持移动设备优先 -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Bootstrap 101 Template</title>
		<!--引入bootstrap的css文件-->
		<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />

	</head>

	<body>

		<!-- 华丽的分割线—————————————存放js文件—————————————————————————-->
		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script type="text/javascript" src="../js/jquery.js "></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script type="text/javascript" src="../js/bootstrap.min.js "></script>
	</body>

</html>