热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

前端库Bootstrap框架:「04]创建一个Bootstrap按钮

Bootstrap 是一个前端框架,用于设计响应式 web 页面和 web 应用程序。它采用移动优先的方法来开发 web。Bootstrap 包括预构建的 CS

Bootstrap 是一个前端框架,用于设计响应式 web 页面和 web 应用程序。它采用移动优先的方法来开发 web。Bootstrap 包括预构建的 CSS 样式和类,以及一些 Javascript 功能。Bootstrap 采用响应式 12 列网格布局,并具有以下设计组件模板:按钮、图片、表格、表单、导航,本专题介绍在 web 项目中使用 Bootstrap 框架的一些方法。
创建一个 Bootstrap 按钮
Bootstrap 的 button
 元素有着独有的、比默认 HTML 按钮更好的样式风格。
在较大的小猫图片下方创建新的 button
 元素。为它添加 btn
 与 btn-default
 两个 class 和 "喜欢" 文本。
具体示例代码:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/><div class="container-fluid"><h2 class="text-center red-text">宠物猫应用h2><p>点击此处<a href="#">猫图片a>.p><a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="一只可爱的橙色猫躺在它的背上">a><img class="img-responsive" src="https://bit.ly/fcc-running-cats"><button class="btn btn-default">喜欢button><p>宠物猫爱好:p><ul><li>吃鱼li><li>嬉戏li><li>吃猫粮li>ul><p>最讨厌的三件事:p><ol><li>跳蚤li><li>打雷li><li>li>ol><form action="http://www.icoderoad.com/submit-cat-photo"><label><input type="radio" name="indoor-outdoor"> 户内label><label><input type="radio" name="indoor-outdoor"> 户外label><label><input type="checkbox" name="personality">label><label><input type="checkbox" name="personality"> 懒惰label><label><input type="checkbox" name="personality"> 疯狂label><input type="text" placeholder="cat photo URL" required><button type="submit">提交button>form>div>


今天就讲到这里,如果有问题需要咨询,大家可以直接留言或扫下方二维码关注公众号。也可以添加 happyzjp 微信受邀加入学习社群,我们会尽力为你解答。练习网站已经正式上线,大家可以登陆网站 http://www.icoderoad.com 进行文章中示例的练习。


推荐阅读
author-avatar
泰有趣
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有