如何开始使用bootstrap

最新推荐文章于 2025-02-17 10:48:01 发布

Damon-Da

最新推荐文章于 2025-02-17 10:48:01 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/dada111111111/article/details/49969489

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何开始使用Bootstrap，包括下载方式、引入CDN链接的方法及基本的HTML结构示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

步骤如下：

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

2.点击下载

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

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

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

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

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>

显示的样式如下：