如何开始使用bootstrap

之前便接触过bootstrap,借着这个很好的机会,希望能够去更详细的了解这个灵活,简洁,可拓展的前端工具集,当然Bootstrap也是最受欢迎的HTML,css和js框架,用于开发响应式布局(所谓的响应式布局就是能够解决不同设备的显示适应问题,能够兼容多个终端--详见:http://baike.baidu.com/link?url=eKKwCUETTHcBdh0C9TKXu-wuHFlr8nQxQTkeuI9Ts0SDJAPdAWQcbncd3owQ2VtZcuCo5qRFjSE2OYenCXvKW_)。

之前在Bootstrap中文网(http://v3.bootcss.com/)上,了解了一些基本的编码规范和一些网站的实例,今天就将如何开始使用Bootstrap整理如下:

步骤如下:

1.首先进入bootstrap中文网,单击进入当前最新的bootstrap文档。

如何开始使用bootstrap_第1张图片

2.点击下载

如何开始使用bootstrap_第2张图片

3.在起步页面可以看到 有3种下载

如何开始使用bootstrap_第3张图片

第一种是bootstrap框架,第二种是源码。第三种是sass编译的bootstrap源码或者是直接引入cdn链接(就是在有网络的情况下,能够引入相应的样式文件)

我们一般使用cdn链接,更方便快捷。


在使用的时候需要注意的是由于bootstrap是基于js的,所以需要在引入bootstrap前先引入js文件

如何开始使用bootstrap_第4张图片

4,在网页编辑器中进行使用。如下:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href=" //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"  rel="stylesheet">

<title>Hello World</title>


</head>

<body>
    <h1 class="text-center" >Hello World</h1>
    <p class="text-center"><button class="btn btn-primary ">我是按钮,按我一下!</button></p>

    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

显示的样式如下:

如何开始使用bootstrap_第5张图片

你可能感兴趣的:(bootstrap)