2.4 案例实训1——设计网页按钮

Bootstrap安装完成后，我们结合一个示例来演示Bootstrap具体的使用方法。下面来设计一个按钮，操作步骤如下。

第1步：启动WebStorm开发工具，新建HTML 5文档，命名为index.html。设置网页标题为“Bootstrap模板”。

第2步：在index.html中引入Bootstrap相应的CSS和JavaScript文件。模板文档的详细代码如下：

第3步：模板设置完成后，可以开始使用Bootstrap开发任何网站和应用程序。使用<a>标签输出一句“Hello world!”，然后给它添加Bootstrap样式btn，定义成按钮，然后设置其颜色为btn-primary类样式，外边距为.m-5类样式，代码如下：

    <a href="#" class="btn btn-primary m-5">Hello world!</a>

最后，在IE浏览器中运行，效果如图2-7所示。

图2-7 按钮设计效果