【移动应用开发技术】Bootstrap学习:Bootstrap 环境安装_第1页
【移动应用开发技术】Bootstrap学习:Bootstrap 环境安装_第2页
【移动应用开发技术】Bootstrap学习:Bootstrap 环境安装_第3页
免费预览已结束,剩余1页可下载查看

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

【移动应用开发技术】Bootstrap学习:Bootstrap环境安装

Bootstrap安装是非常容易的。首先了解下获取bootstrap。下载Bootstrap可从

/

上下载Bootstrap的最新版本。点击这个链接,将看到如下所示的网页:您会看到两个按钮:DownloadBootstrap:下载Bootstrap。该按钮可以下载BootstrapCSS、JavaScript和字体的预编译的压缩版本。不包含文档和最初的源代码文件。DownloadSource:下载源代码。点击该按钮,您可以直接从from上得到最新的BootstrapLESS和JavaScript源代码。如果您使用的是未编译的源代码,您需要编译LESS文件来生成可重用的CSS文件。对于编译LESS文件,Bootstrap官方只支持

Recess,这是Twitter的基于

less.js

的CSS提示。为了更好的了解和更方便的使用,一般只使用Bootstrap的预编译版本。由于文件是被编译过和压缩过的,在独立的功能开发中,您不必每次都包含这些独立的文件。本教程编写时,使用的是最新版(Bootstrap3)。文件结构我们一般所用的Bootstrap只需要了解三部分,css/样式,

js/代码,font/字体预编译的Bootstrap当您下载了Bootstrap的已编译的版本,解压缩ZIP文件,您将看到下面的文件/目录结构:如上图所示,可以看到已编译的CSS和JS(完整的bootstrap.*),以及已编译压缩的CSS和JS(精简的bootstrap.min.*)。同时也包含了Glyphicons的字体,这是一个可选的Bootstrap主题。Bootstrap源代码如果您下载了Bootstrap源代码,那么文件结构将如下所示:less/、js/

fonts/

下的文件分别是BootstrapCSS、JS和图标字体的源代码。dist/

文件夹包含了上面预编译下载部分中所列的文件和文件夹(预编译的部分)。docs-assets/、examples/

和所有的

*.html

文件是Bootstrap文档。

接下来举例说明,最简单的调用bootstrap。bootstrap调用同普通的css,js代码调用一样,将其规整建立css,js文件夹,放入里面,在html里面调用即可。HTML模板

一个使用了Bootstrap的基本的HTML模板如下所示:

<!

HTML5

样式头

-->

<!DOCTYPE

html>

<html>

<head>

<title>Bootstrap

模板</title>

<meta

name="viewport"

content="width=device-width,

initial-scale=1.0">

<!--

引入

Bootstrap

-->

<!--

HTML5

Shim

Respond.js

用于让

IE8

支持

HTML5元素和媒体查询

-->

<!--

注意:

如果通过

file://

引入

Respond.js

文件,则该文件无法起效果

-->

<!--[if

lt

IE

9]>

<script

src="/libs/html5shiv/3.7.0/html5shiv.js"></script>

<script

src="/libs/respond.js/1.3.0/respond.min.js"></script>

<![endif]-->

</head>

<body>

<h2>Hello,

world!</h2>

<!--

jQuery

(Bootstrap

JavaScript

插件需要引入

jQuery)

-->

<script

src=""></script>

<!--

包括所有已编译的插件

-->

<script

src="js/bootstrap.min.js"></script>

</body>

</html>BootstrapCDN推荐(直接连接网络调用,不用css,js文件了)

如果是国内用户,w3cschool菜鸟教程建议大家使用百度的静态资源库(/)<link

href="/libs/bootstrap/3.2.0/css/bootstrap.min.css"

rel="stylesheet">

<script

src="/libs

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论