- Bootstrap从入门到项目实战
- 李爱玲
- 270字
- 2021-03-24 20:36:44
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 按钮设计效果
提示
.m-5类样式用来设置元素外边距,具体的请参考第5章。