使用Bootstrap 3开发响应式网站实践01,前期准备、导航区域等

2024-04-27 14:33:04

字体：大中小

来源：转载

供稿：网友

“使用Bootstrap 3开发响应式网站实践”系列，将使用Bootstrap 3.2制作一个自适应网站，无论是在电脑、平板，还是手机上，都呈现比较好的效果。在电脑浏览器上的最终效果如下：

在手机上的呈现效果如下：

本篇主要包括：

□ 前期准备□ 引入Bootstrap，jQuey文件等□ 搭建页面主体结构□ 导航区域

□ 前期准备

→使用Visual Studio 2012创建一个空的 asp.net网站→把下载下来的Bootstrap 3中的CSS,fonts,js文件夹拷贝到网站根目录下→在网站根目录下创建images文件夹，用来存放所有的图片→使用NuGet安装最新版的jQuery→在网站根目录下创建index.html文件

□ 引入Bootstrap，jQuey文件等

→在css文件夹下创建site.css→在js文件夹下创建site.js→把Bootstrap、jQuery等引入index.html文件中

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    
    <script src="Scripts/jquery-2.1.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/site.js"></script>
</body>
</html>

○ width: 视觉宽度○ device-width: 屏幕宽度○ heigh: 视觉高度○ device-height: 屏幕高度○ initial-scale: 初始放大比例，设置为1.0时不放大○ minimum-scale: 最小的放大比例，设置为1.0时不放大○ maximum-scale: 最大的放大比例，设置为1.0时不放大○ user-scalable: 是否允许放大，设置为no时不允许放大

另外，需要在site.css设置如下：

 @-ms-viewport{
    width: device-width;
}

□ 搭建页面主体结构

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
    <link href="css/bootstrap.min.css" rel="stylesheet" />
<PRe style="font-size: 11px; font-family: consolas,'Courier New',courier,monospace; width: 100%; margin: 0em; background-color:

上一篇：简单的布局

下一篇：Bootstrap学习之路（1）---开篇-登陆页