热门标签 | 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 进行文章中示例的练习。


推荐阅读
  • Go Cobra命令行工具入门教程
    本文介绍了Go语言实现的命令行工具Cobra的基本概念、安装方法和入门实践。Cobra被广泛应用于各种项目中,如Kubernetes、Hugo和Github CLI等。通过使用Cobra,我们可以快速创建命令行工具,适用于写测试脚本和各种服务的Admin CLI。文章还通过一个简单的demo演示了Cobra的使用方法。 ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • 本文介绍了如何使用JSONObiect和Gson相关方法实现json数据与kotlin对象的相互转换。首先解释了JSON的概念和数据格式,然后详细介绍了相关API,包括JSONObject和Gson的使用方法。接着讲解了如何将json格式的字符串转换为kotlin对象或List,以及如何将kotlin对象转换为json字符串。最后提到了使用Map封装json对象的特殊情况。文章还对JSON和XML进行了比较,指出了JSON的优势和缺点。 ... [详细]
  • {moduleinfo:{card_count:[{count_phone:1,count:1}],search_count:[{count_phone:4 ... [详细]
  • {moduleinfo:{card_count:[{count_phone:1,count:1}],search_count:[{count_phone:4 ... [详细]
  • 本文摘要配置目的:寄存器配置用于更改路由器启动过程。配置目的:寄存器配置用于更改路由器启动过程。启动位由4位16进制寄存器组成格式:0xA ... [详细]
  • 视图分区_组复制常规操作网络分区amp;混合使用IPV6与IPV4 | 全方位认识 MySQL 8.0 Group Replication...
    网络分区对于常规事务而言,每当组内有事务数据需要被复制时,组内的成员需要达成共识(要么都提交,要么都回滚)。对于组成员资格的变更也和保持组 ... [详细]
  • 小白的Python 学习笔记(八)推导式详解
    大家好,今天我总结一下Python的推导式,首先让我们来看定义推导式(comprehensions)是Python的一种独有特性,是可以从一个数据序列构建另一个新的数据序列的结构体 ... [详细]
  • 本文介绍了数据库的存储结构及其重要性,强调了关系数据库范例中将逻辑存储与物理存储分开的必要性。通过逻辑结构和物理结构的分离,可以实现对物理存储的重新组织和数据库的迁移,而应用程序不会察觉到任何更改。文章还展示了Oracle数据库的逻辑结构和物理结构,并介绍了表空间的概念和作用。 ... [详细]
  • 目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]
  • 使用Ubuntu中的Python获取浏览器历史记录原文: ... [详细]
  • 本文介绍了在Mac上搭建php环境后无法使用localhost连接mysql的问题,并通过将localhost替换为127.0.0.1或本机IP解决了该问题。文章解释了localhost和127.0.0.1的区别,指出了使用socket方式连接导致连接失败的原因。此外,还提供了相关链接供读者深入了解。 ... [详细]
  • 本文介绍了作者在开发过程中遇到的问题,即播放框架内容安全策略设置不起作用的错误。作者通过使用编译时依赖注入的方式解决了这个问题,并分享了解决方案。文章详细描述了问题的出现情况、错误输出内容以及解决方案的具体步骤。如果你也遇到了类似的问题,本文可能对你有一定的参考价值。 ... [详细]
  • Netty源代码分析服务器端启动ServerBootstrap初始化
    本文主要分析了Netty源代码中服务器端启动的过程,包括ServerBootstrap的初始化和相关参数的设置。通过分析NioEventLoopGroup、NioServerSocketChannel、ChannelOption.SO_BACKLOG等关键组件和选项的作用,深入理解Netty服务器端的启动过程。同时,还介绍了LoggingHandler的作用和使用方法,帮助读者更好地理解Netty源代码。 ... [详细]
  • java.lang.Class.getDeclaredMethod()方法java.lang.Class.getDeclaredMethod()方法用法实例教程-方法返回一个Met ... [详细]
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社区 版权所有