Bootstrap 3.0 响应式多终端支持的站点开发 - 基本介绍与开发环境准备

最新推荐文章于 2024-08-06 18:58:51 发布

aywhen

最新推荐文章于 2024-08-06 18:58:51 发布

阅读量1.1k

点赞数

分类专栏： Bootstrap 3.0 向导教程文章标签： html5 bootstrap jquery 响应式

本文链接：https://blog.csdn.net/aywhen/article/details/21241729

版权

Bootstrap 3.0 向导教程专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前置要求：

熟悉并会使用HTML
熟悉并会使用CSS
熟悉并会使用Javascript
熟悉一种会制作html的开发工具，新手推荐使用Editplus

课程目标：这一章节，是让大家先做好开发前的准备工作，

熟悉bootstrap基本的用途
下载和了解bootstrap 3.x开发包
安装基本的开发与调试工具
书写一个Hello World

一、什么是Bootstrap？

互联网开发的技术科技日新月异，而导致许多的技术分叉。打个比方，浏览网页的工具可以有多种，你可以使用IE浏览器，你也可以火狐浏览器，chrome等等。以此比方，所以其他领域也是一样，许多时候你会有许多的选择，但最终选择之后的目标确是一致的，就如我们用浏览器是为了浏览网页。这样会导致许多我们开发时候许多针对不同的选择作出相应的针对性，因为这些选择都有自我的个性特征。如果让我们做一件事情，只需要按照一种套路来做，那不是很省心的事了？

对，Bootstrap就是为了我们省心，工作效率高，而且能让你标准化的达到同一个目标。

那，Bootstrap究竟是干什么的？

首先它是一种Web前段开发框架，意思涉及的内容无非就是html，css，js等等
它给你准备了一套标准而有伸缩性的模版，组件，Javascript代码，许多时候不需要你再去做重复劳动
它最大的特点，一，以它的标准开发出来的页面支持大多数浏览器，二，支持多终端响应式的页面浏览，意思你开发一次，可以让桌面电脑，手机，平板统统可用。

那还等什么呢? 心动不如手动。

二、开始Bootstrap的一切

首先，我们要去官网下载Bootstrap开发包，

官方地址：getbootstrap.com ，你懂英文，可以自行去找一切相关资源
已经编译并压缩的版本，无文档，无源码的使用包【下载】
包含源码，字库，文档，样例的集成开发包【下载】
当然还有其他类的包，由于初级教程，不提及；如果你要下载最新版本的包，还是关注官网。

由于我们学习用，所以下载开发包。解压到一个目录，便于我们复制使用。

下面我们来了解一下，这个包的目录结构

编译版本

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

根目录里包含三个子目录，依次是，样式，脚本，字库；其中样式与js含编译以及编译压缩两种版本。（min缀饰的为压缩过的）

源码版本

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

源码包要注意的就是多了，less（不了解的先忽略），docs 文档， examples 样例， dist中的其实就是编译版本

三、做点什么都需要工具

如果会html页面制作，那不用我多说，不过呢，建议大家开始的时候亲力亲为，手工书写（吐槽，许多程序员连盲打都不会，人才），练练记忆，练练打字。你可以用最简单的工具，写字板记事本之类的文本编辑工具，当然那也过于简单，这里推荐Editplus，当然你其他工具熟也可以。由于我们开始的时候只做没有服务器支持的静态页面，所以不需要诸如数据库，web服务器这样环境安装了。当然，我推荐一些初学者，可以关注 web服务器这块的一些内容，如php，mysql，apache，环境安装简单，起步省心。

好了，废话不多说了，开始吧。

四、Hello World

你是程序员，应该懂的，就是开发一个简单程序，了解一个基本。对于初学者来是意义重大，至少让他从中知道，我在干什么，干了什么，能看到什么，得到什么。这里，我们要达到的目的很简单，就是学会如何载入Bootstrap的样式，js脚本，并懂得使用bootstrap时html需要的基本结构。按照以下基本来制作我们的 Hello World。

创建一个自己想要的项目目录，此处我们命名为 startbootstrap
拷贝编译版本至目录中（dist目录中所有内容）
创建一个html文件，此处我们为 helloworld.html
用文本编辑器打开helloworld.html开始书写代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- 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.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

保存之后就可以使用浏览器预览了。

首先，我们这里建议大家不要拷贝代码，手工书写以上全部代码，好处在于，可以熟练打字，记忆关键的内容，在3分钟之内书写完全部代码，为基本合格。

下面我们来讲解一下代码内容。

<!DOCTYPE html>

以上是HTML5 的文档声明头，相对以前的标准反而显得简单。许多人没搞明白这个标签有什么作用？第一，你可以搜索相关信息，了解更广泛的只是，第二，这里我只做简要的阐述，它是告诉浏览器用什么方式解析html代码。因为浏览器的不同，导致的一个历史问题，所以定义文档类型声明无非就是解决兼容性问题。

随着互联网国际化概念的不断推进，现在基本都采用utf8国际字符集，很少会考虑某种国家的字符集标准了，毕竟互联网是开放的。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

IE浏览器版本多，此行代码是为了告诉浏览器用什么样的模式渲染网页，edge表示为最新IE浏览器版本模式。所以此行代码只针对ie浏览器有效。

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

这行代码很关键，如果你想要页面能够支持多终端支持，那么这是必须的。它能告诉浏览器，页面宽度为不同设备的分辨率宽度。尤其要注意的是initial-scale=1 表示显示按一比一的尺寸，也就是原始尺寸。你可以设置不同参数加以观察。在手机这种窄宽的屏幕下，不允许内容缩放（zooming），你可以使用以下方式来完成

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

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

引入必须的bootstrap样式

 <!-- 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.4.2/respond.min.js"></script>
    <![endif]-->

由于IE浏览器IE8以及早版本对html5支持比较差，为了解决此问题，可以引入这两个js文件来模拟缺失的html5特性。

    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

Hello World诞生了，不过下面还引入两个js文件，虽然针对hello world没什么作用，但基本的bootstrap使用需要载入这两文件。这里要提到的是，为什么js文件引入放在文档最下方，因为这里涉及html文档载入的问题。html的内容是边载入边解析的，而且按从上至下的顺序。那么当js想调用文档中的dom节点时，必须确保那个文档元素已经载入。放在下方，那我们就可以肯定上方内容已经载入。

以上代码这是一个简单演示bootstrap的基本用法，但不管怎样，简单归简单，要求还是有的。

五、没要求怎么能专业？

许多人认为简单的懂就行，其实不然，简单之中透露着需要花手脚花时间的功底。懂了，不会动，或者动的很慢，你是老板可以这样，但你是一线工作者，必须是懂的明白，动的快速。所以，我这里强调，初学者必须着重动手能力，快，狠，准。

快，就是，下手要快，磨磨蹭蹭的能提高代码效率么？一个程序没效率，再懂也没用。
狠，就是，先按一套方案来，别纠结这个要优化，那个要改善，等你累积足够经验了，自然而然就能一次性到位。
准，就是，细心，思维连贯，不要只有快，没有准确率，老是丢三落四的。

我们的要求，就是，完成以上代码，必须只凭记忆全部手工书写完，而且在3分钟之内搞定，当然越快越好。

aywhen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap 3.0 响应式多终端支持的站点开发 - 基本介绍与开发环境准备

前置要求：熟悉并会使用HTML熟悉并会使用CSS熟悉并会使用Javascript熟悉一种会制作html的开发工具，新手推荐使用Editplus课程目标：这一章节，是让大家先做好开发前的准备工作，熟悉bootstrap基本的用途下载和了解bootstrap 3.x开发包安装基本的开发与调试工具书写一个Hello World
复制链接

扫一扫

专栏目录