实例讲解Bootstrap前端框架的使用技巧
Bootstrap跟Dreamweaver一样也是开发网站常用的前端框架，而且Bootstrap框架比Dreamweaver框架更常使用。利用前端框架都可以非常快速的开发出一个网站的前端出来，因此深受大家的喜爱，我们有必要学习几个目前主流的前端框架。现在，我们以实际的例子来看看如何使用Bootstrap框架吧。
操作方法
- 01
下载Bootstrap 在【搜狗浏览器】中搜索【bootstrap中文网】，点击第一条链接，进入Bootstrap中文网站中下载文档。
- 02
进入【Bootstrap中文网】有很多的版本，如【Bootstrap2中文文档、Bootstrap3中午文档，Bootstrap4.0预览】。我们一般是下载3.0版本，点击【Bootstrap3中文文档】进入下载页面，该网站提供了3种下载文档，我们下载的是第一种【用于生产环境的Bootstrap】，点击下载按钮即可。
- 03
解压Zip 下载Bootstrap包之后要将它解压，【bootstrap-3.3.7-dist】文件夹中包含3个文件夹，分别是CSS、fonts、js。我们要把这个【bootstrap-3.3.7-dist】文件夹全部导入到Dreamweaver站点中。
- 04
新建文档 完成步骤1,2,3之后，在Dreamweaver软件中新建一张HTML文档，点击菜单栏中的【文件】，在下拉菜单中点击【新建】，在弹出的新建窗口中选择【HTML】然后点击【创建】按钮即可创建一张HTML页面。
- 05
保存页面 使用快捷键【ctrl+S】，会弹出保存文件的位置，输入文件名，比如我们将文件名命名为【bs.html】，文件类型为【All Document】类型，然后点击【保存】按钮即可。
- 06
引入3个js文件 从站点中的【【bootstrap-3.3.7-dist】文件夹中引入3个js文件到head头部，文件如下所示： <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
- 07
实例一：在body主体部分随意写上几行文字，比如我们输入如下所示文字： <body> <h1>你好，世界</h1> <h2>2017年7月31号</h2> </body>
- 08
预览方法 点击【Dreamweaver】软件中的地球图标，在弹出的菜单栏中选择【在360se中预览】，即可在浏览器中预览效果。
- 09
实例二：我们再在body主体中编写个按钮代码，代码为【<button>搜狗</button>】，然后在浏览器中预览效果。