Bootstrap下载以及入门小案例

红太狼 2021-09-19 15:56 440阅读 0赞

**目录**

1.下载bootstrap3（推荐用版本3）

2 开发工具Hbuilder

3 新建前端项目

4.源代码

5.运行结果：

6. Bootstrap示例网站

--------------------

# 1.下载bootstrap3（推荐用版本3） #

[http://www.bootcss.com/][http_www.bootcss.com]

![20190530141432679.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

点开其中的CSS文件夹，会看到有以下文件，其实bootstrap.css和bootstrap.min.css是一样的，后者去掉了前者中的注释和留白。开发中主要使用的是bootstrap.min.css

![20190530141514661.png][]![20190530141527947.png][]![20190530141537399.png][]

# 2 开发工具Hbuilder #

BootStrap说到底是一个框架，而不是开发工具。我们这里使用Hbuilder。下载地址是：[http://www.dcloud.io/index.html][http_www.dcloud.io_index.html]。下载之后解压并找到Hbuilder.exe可执行文件，双击，按照提示完成安装即可。（第一次安装很慢，请耐心。。。）

为了后面使用js方便，我们还应该下载jquery.min.js。下载地址是[http://www.jq22.com/jquery-info122][http_www.jq22.com_jquery-info122] ，我现在使用的版本是3.3.1

![20190529141841530.png][]

# 3 新建前端项目 #

打开Hbuilder，左上角—文件—新建—web项目，命名为MyFirstBootstrapProject并确定路径。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]

下一步我们要做的就是导入BootStrap。右键项目名称，选择导入—常规—-文件系统—浏览—-选中之后打勾，确认即可。

再将jquery-3.3.1.min.js和jquery-3.3.1.js导入js文件夹里，如下：

![20190529142059463.png][]

# 4.源代码 #

下一步就是编写代码了。在index.html里面写代码

![20190529143039329.png][]

下面的代码用来引入bootstrap和jQuery

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3][]

index.html完整示例代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<link rel="stylesheet" href="css/bootstrap.min.css" />
    		<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
    		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
    
    	</head>
    		<body>
    			
    			
    			<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    			  Launch demo modal
    			</button>
    			
    			
    			<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    			  <div class="modal-dialog" role="document">
    			    <div class="modal-content">
    			      <div class="modal-header">
    			        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
    			        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    			          <span aria-hidden="true">×</span>
    			        </button>
    			      </div>
    			      <div class="modal-body">
    			        ...
    			      </div>
    			      <div class="modal-footer">
    			        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    			        <button type="button" class="btn btn-primary">Save changes</button>
    			      </div>
    			    </div>
    			  </div>
    			</div>
    			
    	</body>
    </html>

# 5.运行结果： #

![20190529143413376.gif][]

# 6. Bootstrap示例网站 #

[http://www.youzhan.org/][http_www.youzhan.org]

[http_www.bootcss.com]: http://www.bootcss.com/
[20190530141432679.png]: /images/20210725/cb075a1156804132af6ae09f9e59fc22.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/b2ef2d9ab8aa429ab125e6dc21aa7f3e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/9d8c33f0db884beaa4454b174d228988.png
[20190530141514661.png]: https://img-blog.csdnimg.cn/20190530141514661.png
[20190530141527947.png]: https://img-blog.csdnimg.cn/20190530141527947.png
[20190530141537399.png]: /images/20210725/9a146d41849049d797cf56cf01a49ad5.png
[http_www.dcloud.io_index.html]: http://www.dcloud.io/index.html
[http_www.jq22.com_jquery-info122]: http://www.jq22.com/jquery-info122
[20190529141841530.png]: /images/20210725/fe02086c5e254415a0295dd88698bd31.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: /images/20210725/80250cc7b2f34c9caf84138c9c246898.png
[20190529142059463.png]: /images/20210725/9ad0eb277a254f49872fe6ce33aee93a.png
[20190529143039329.png]: /images/20210725/c067ad4416b3432ebdc151fc4762352f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3]: /images/20210725/16c48ce0fe5a411589d9675364d656bc.png
[20190529143413376.gif]: /images/20210725/0f6054c840874ac5afa9160f81c97b2b.png
[http_www.youzhan.org]: http://www.youzhan.org/