首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Bootstrap基本样式学习笔记之按钮(4)

作者：wcnm | 来源：互联网 | 2023-09-24 22:24
Bootstrap中任何带有class.btn的元素都会继承圆角灰色按钮的默认外观，再结合一些选项，可以定义各种按钮样式。0x01按钮样式<!DOCTYPEhtml><html><

Bootstrap中任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观，再结合一些选项，可以定义各种按钮样式。

0x01 按钮样式




 
 
 
 
 
 




 

 
基本按钮

 

 

 Default
 
 
 Info
 Warning

效果如下：

0x02 调节按钮大小




 
 
 
 
 
 


 

 

 
调节按钮的大小

 

 
大号按钮

 

 Default
 
 
 Info
 Warning
 
 
 

 
默认大小

 

 Default
 
 
 Info
 Warning
 
 
 

 
小号按钮

 

 Default
 
 
 Info
 Warning
 
 
 

 
微型按钮

 

 Default
 
 
 Info
 Warning

效果如下：

0x03 其他按钮

移动端一个按钮占用一行按钮，可以利用.btn-block类来实现块状按钮。Bootsrap通过将announce背景色设置为50%褪色的方式来呈现无法点击的效果：




 
 
 
 
 
 




 

 
其他按钮

 

 

 

 
 

 

 
 不可用按钮2

效果如下：

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。


推荐阅读
  • string

    利用Struts1构建简易计算器：采用DispatchAction处理请求，动态Form优化开发流程，提供用户友好的错误提示

    本文介绍了如何利用Struts1框架构建一个简易的四则运算计算器。通过采用DispatchAction来处理不同类型的计算请求，并使用动态Form来优化开发流程，确保代码的简洁性和可维护性。同时，系统提供了用户友好的错误提示，以增强用户体验。 ... [详细]
  • java

    在PHP中如何正确调用JavaScript变量及定义PHP变量的方法详解

    在PHP中如何正确调用JavaScript变量及定义PHP变量的方法详解 ... [详细]
  • case

    关于使用JavaScript在多个页面间传递参数的技术探讨

    本文探讨了使用JavaScript在不同页面间传递参数的技术方法。具体而言，从a.html页面跳转至b.html时，如何携带参数并使b.html替代当前页面显示，而非新开窗口。文中详细介绍了实现这一功能的代码及注释，帮助开发者更好地理解和应用该技术。 ... [详细]
  • ip

    Vue 页面状态管理与跨页面数据传递的有效策略

    在 Vue 应用开发中，页面状态管理和跨页面数据传递是常见需求。本文将详细介绍 Vue Router 提供的两种有效方式，帮助开发者高效地实现页面间的数据交互与状态同步，同时分享一些最佳实践和注意事项。 ... [详细]
  • instance

    Spring – Bean Life Cycle

    Spring – Bean Life Cycle
    Spring – Bean Life Cycle ... [详细]
  • java

    Python 数据可视化实战指南

    Python 数据可视化实战指南
    本文详细介绍如何使用 Python 进行数据可视化，涵盖从环境搭建到具体实例的全过程。 ... [详细]
  • utf-8

    javascript分页类支持页码格式

    javascript分页类支持页码格式
    前端时间因为项目需要，要对一个产品下所有的附属图片进行分页显示，没考虑ajax一张张请求，所以干脆一次性全部把图片out，然 ... [详细]
  • java

    解决Bootstrap DataTable Ajax请求重复问题

    解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中，我们使用了JQuery DataTable进行数据展示，虽然使用起来非常方便，但在测试过程中发现了一个问题：当查询条件改变时，有时查询结果的数据不正确。通过FireBug调试发现，点击搜索按钮时，会发送两次Ajax请求，一次是原条件的请求，一次是新条件的请求。 ... [详细]
  • java

    探讨HTTP隧道技术在RDP暴力破解中的应用

    本文介绍了如何利用HTTP隧道技术在受限网络环境中绕过IDS和防火墙等安全设备，实现RDP端口的暴力破解攻击。文章详细描述了部署过程、攻击实施及流量分析，旨在提升网络安全意识。 ... [详细]
  • utf-8

    php更新数据库字段的函数是,php更新数据库字段的函数是

    php更新数据库字段的函数是,php更新数据库字段的函数是 ... [详细]
  • utf-8

    2.2 组件间父子通信机制详解

    2.2 组件间父子通信机制详解
    2.2 组件间父子通信机制详解 ... [详细]
  • java

    深入解析Struts、Spring与Hibernate三大框架的面试要点与技巧

    深入解析Struts、Spring与Hibernate三大框架的面试要点与技巧 ... [详细]
  • utf-8

    如何将TS文件转换为M3U8直播流：HLS与M3U8格式详解

    如何将TS文件转换为M3U8直播流：HLS与M3U8格式详解
    在视频传输领域，MP4虽然常见，但在直播场景中直接使用MP4格式存在诸多问题。例如，MP4文件的头部信息（如ftyp、moov）较大，导致初始加载时间较长，影响用户体验。相比之下，HLS（HTTP Live Streaming）协议及其M3U8格式更具优势。HLS通过将视频切分成多个小片段，并生成一个M3U8播放列表文件，实现低延迟和高稳定性。本文详细介绍了如何将TS文件转换为M3U8直播流，包括技术原理和具体操作步骤，帮助读者更好地理解和应用这一技术。 ... [详细]
  • case

    求助：如何使用Pull方法解析标签内容，悬赏50分求完美解决方案

    在处理 XML 数据时，如果需要解析 `` 标签的内容，可以采用 Pull 解析方法。Pull 解析是一种高效的 XML 解析方式，适用于流式数据处理。具体实现中，可以通过 Java 的 `XmlPullParser` 或其他类似的库来逐步读取和解析 XML 文档中的 `` 元素。这样不仅能够提高解析效率，还能减少内存占用。本文将详细介绍如何使用 Pull 解析方法来提取 `` 标签的内容，并提供一个示例代码，帮助开发者快速解决问题。 ... [详细]
  • utf-8

    网页数据抓取与解析入门指南

    本指南介绍了 `requests` 库的基本使用方法，详细解释了其七个主要函数。其中，`requests.request()` 是构建请求的基础方法，支持其他高级功能的实现。此外，我们还重点介绍了如何使用 `requests.get()` 方法来获取 HTML 网页内容，这是进行网页数据抓取和解析的重要步骤。通过这些基础方法，读者可以轻松上手并掌握网页数据抓取的核心技巧。 ... [详细]
author-avatar
wcnm
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有