Bootstrap响应式前端框架笔记五——按钮-阿里云开发者社区

开发者社区> 珲yy少> 正文

Bootstrap响应式前端框架笔记五——按钮

简介: Bootstrap响应式前端框架笔记五——按钮
+关注继续查看

 Bootstrap中预设了default,primary,info,warning,danger和link6种按钮风格,示例如下:


 <p>Bootstrap中预设的按钮样式如下</p>

 <button type="button" class="btn btn-default">正常</button>

 <button type="button" class="btn btn-primary">重要</button>

 <button type="button" class="btn btn-success">成功</button>

 <button type="button" class="btn btn-info">信息</button>

 <button type="button" class="btn btn-warning">警告</button>

 <button type="button" class="btn btn-danger">危险</button>

 <button type="button" class="btn btn-link">链接</button>

效果如下:


image.png


可以为按钮元素添加btn-lg,btn-sm,btn-xs类来进行按钮尺寸的设置,示例如下:


 <p>设置按钮的大小</p>

 <button type="button" class="btn btn-default btn-lg">正常</button>

 <button type="button" class="btn btn-primary">重要</button>

 <button type="button" class="btn btn-success btn-sm">成功</button>

 <button type="button" class="btn btn-info btn-xs">信息</button>

效果如下图:


image.png


使用btn-block类可以将按钮设置为充满整个父元素,示例如下:


 <p>使用btn-block类可以将按钮设置为充满父元素</p>

 <button type="button" class="btn btn-default btn-block">正常</button>

 <button type="button" class="btn btn-primary btn-block">重要</button>

效果如下:


image.png


需要注意:当button标签被用户点击时,按钮周围会出现边框,如果不需要这个边框,可以使用a标签来创建按钮。


  另外,本篇博客中所有的实例代码及显示效果,在如下地址中,需要的可以自行对照学习。


http://zyhshao.github.io/bootStrapDemo/button.html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Go语言学习笔记(四)结构体struct & 接口Interface & 反射reflect
加 Golang学习 QQ群共同学习进步成家立业工作 ^-^ 群号:96933959 结构体struct struct 用来自定义复杂数据结构,可以包含多个字段(属性),可以嵌套; go中的struct类型理解为类,可以定义方法,和函数定义有些许区别; struct类型是值类型。
1185 0
前端工程师的mysql笔记
背景 最近常参与后台php项目,虽说刚毕业时自学过一阵子php和mysql,不过长时间没用也忘差不多了,于是把mysql再温习一遍,前端同学也可以一起学习下! mysql安装以及操作 安装 brew install mysql 启动 $: mysql.
848 0
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
8418 0
Bootstrap学习笔记(实习第2天)
1、学习网站: http://www.bootcss.com/ 2、页面中加入下面代码即可调用bootstrap。 &lt;!-- 新 Bootstrap 核心 CSS 文件 加到head中 --&gt; &lt;link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min
1506 0
+关注
594
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载