Bootstrap提供了几种可以帮你快速上手的方式,每种方式针对具有不同技能等级的开发者和不同的使用场景。继续阅读下面的内容,看看哪种方式适合你的需求吧。
获取Bootstrap最快速的方式就是下载经过编译和压缩的CSS、JavaScript文件,另外还包含字体文件。但是不包含文档和源码文件。
从GitHub可以直接下载到Bootstrap最新版本的LESS和JavaScript源码。
访问我们的Github源码库,你可以克隆整个项目,或者fork整个项目到你自己的账号。
通过Bower可以安装并管理Bootstrap的样式、JavaScript文件和文档。
bash$ bower install bootstrap
Bootstrap中文网为Bootstrap构建了自己的CDN加速服务,并且采用国内云厂商的CDN服务,访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。Bootstrap中文网还对大量的开源工具库提供了CDN服务,请进入Open CDN 主页查看更多可用的工具库。
<!-- 最新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css"><!-- 可选的Bootstrap主题文件(一般不用引入) --><link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css"><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
MaxCDN为Bootstrap免费提供了CDN加速服务。使用Bootstrap CDN提供的链接即可引入Bootstrap文件。
<!-- 最新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"><!-- 可选的Bootstrap主题文件(一般不用引入) --><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
如果你下载的是源码文件,那就需要将Bootstrap的LESS源码编译为可以使用的CSS代码,目前,Bootstrap官方仅支持Recess编译工具,这是Twitter提供的基于less.js构建的编译、代码检测工具。
Bootstrap提供了两种形式的压缩包,在下载下来的压缩包内可以看到以下目录和文件,这些文件按照类别放到了不同的目录内,并且提供了压缩与未压缩两种版本。
请注意,所有 JavaScript 插件都依赖 jQuery,因此jQuery必须在Bootstrap之前引入, 就像在 基础模版中所展示的一样。在 bower.json
文件 中列出了Bootstrap所支持的jQuery版本。
下载压缩包之后,将其解压缩到任意目录即可看到以下目录结构:
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
这是最基本的Bootstrap组织形式:未压缩版的文件可以在任意web项目中直接使用。我们提供了压缩(bootstrap.min.*
)与未压缩 (bootstrap.*
)的CSS和JS文件。字体图标文件来自于Glyphicons。
Bootstrap源码包含了预先编译的CSS、JavaScript和图标字体文件,并且还有LESS、JavaScript和文档的源码。具体来说,主要文件组织结构如下:
bootstrap/ ├── less/ ├── js/ ├── fonts/ ├── dist/ │ ├── css/ │ ├── js/ │ └── fonts/ ├── docs-assets/ ├── examples/ └── *.html
less/
、js/
和 fonts/
分别包含了CSS、JS和字体图标的源码。dist/
目录包含了上面所说的预编译Bootstrap包内的所有文件。docs-assets/
、examples/
和所有 *.html
文件是文档的源码文件。除了前面提到的这些文件,还包含package定义文件、许可证文件等。
使用以下给出的这份超级简单的HTML模版,或者修改这些案例。我们强烈建议你对这些案例按照自己的需求进行修改,而不要简单的复制、粘贴。
拷贝并粘贴下面给出的HTML代码,这就是一个最简单的Bootstrap页面了。
<!DOCTYPE html><html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css"> <!-- 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="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <h2>Hello, world!</h2> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script> </body></html>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。