Bootstrap-按钮篇btn

2023-10-14 18:59
文章标签 bootstrap 按钮 btn

本文主要是介绍Bootstrap-按钮篇btn,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

参考网址:http://v3.bootcss.com/(能抄不写)

1、按钮颜色样式:

对应代码:(主要体现在class内容:btn-default,btn-primary...)

<button type="button" class="btn btn-default">(默认样式)Default</button>

<button type="button" class="btn btn-primary">(首选项)Primary</button>

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

<button type="button" class="btn btn-info">(一般信息)Info</button>

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

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

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

<a href="#" class="btn btn-primary" role="button">Primary link</a>

 

 

2、按钮大小样式 

 

 对应代码:(主要体现在class内容:btn-lg,btn-sm,btn-xs...)

<p>

<button type="button" class="btn btn-primary btn-lg">(大按钮)Large button</button>

<button type="button" class="btn btn-default btn-lg">(大按钮)Large button</button>

</p>

<p>

<button type="button" class="btn btn-primary">(默认尺寸)Default button</button>

<button type="button" class="btn btn-default">(默认尺寸)Default button</button>

</p>

<p>

<button type="button" class="btn btn-primary btn-sm">(小按钮)Small button</button>

<button type="button" class="btn btn-default btn-sm">(小按钮)Small button</button>

</p>

<p>

<button type="button" class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button>

<button type="button" class="btn btn-default btn-xs">(超小尺寸)Extra small button</button>

</p>

 

3、禁用btn

 

对应代码:(主要体现在class内容:disabled="disabled" ; disabled

<button class="btn btn-lg btn-primary" type="button" disabled="disabled">Primary button</button>

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

 

 

 

 

 

转载于:https://www.cnblogs.com/chengmingxiaowu/p/7600709.html

这篇关于Bootstrap-按钮篇btn的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/212496

相关文章

C# 防止按钮botton重复“点击”的方法

在使用C#的按钮控件的时候,经常我们想如果出现了多次点击的时候只让其在执行的时候只响应一次。这个时候很多人可能会想到使用Enable=false, 但是实际情况是还是会被多次触发,因为C#采用的是消息队列机制,这个时候我们只需要在Enable = true 之前加一句 Application.DoEvents();就能达到防止重复点击的问题。 private void btnGenerateSh

PNG透明背景按钮的实现(MFC)

问题描述: 当前要在对话框上添加一个以两个PNG图片作为背景的按钮,PNG图的背景是透明的,按钮也要做出相同的透明效果。并且鼠标不在按钮上时,按钮显示"bg1.png";鼠标移动到按钮上时,按钮显示"bg2.png" 开发环境为VS2010。 解决办法: 使用GDI+库装载PNG图片,并使用MFC Button Control和CMFCButton类结合,调用CMFCButton

龙芯+FreeRTOS+LVGL实战笔记(新)——05部署主按钮

本专栏是笔者另一个专栏《龙芯+RT-Thread+LVGL实战笔记》的姊妹篇,主要的区别在于实时操作系统的不同,章节的安排和任务的推进保持一致,并对源码做了改进和优化,各位可以先到本人主页下去浏览另一专栏的博客列表(目前已撰写36篇,图1所示),再决定是否订阅。此外,也可以前往本人在B站的视频合集(图2所示)观看所有演示视频,合集首个视频链接为: 借助RT-Thread和LVGL

致远个性化之--发起流程页面,去掉【查看流程】按钮

需求 近期在做的项目中,遇到一个需求,想把发起流程页面中的【查看流程】按钮去掉,只让员工预测流程,知道自己的事项流程走向,不让看全局流程图。包含PC端和移动端,以及微协同端。 如下图效果示例: 实现 此需求,只能通过修改页面代码实现。在此不分析实现过程,现把具体实现方式呈现如下,各位如有需求可参照设置。适用版本V9.0,其他版本未进行测试,估计不会有大的差别! PC端 找到文件

如何在Excel中创建一个VBA宏,并设置一个按钮来执行这个宏

下面是一个详细的步骤指南 步骤1:创建VBA宏 1. 打开Excel并按 `Alt + F11` 打开VBA编辑器。 2. 在VBA编辑器中,选择 `Insert` > `Module` 来插入一个新的模块。 3. 将以下代码粘贴到模块中: ```vba Sub CreateNewSheet()' 声明一个工作表对象Dim newSheet As Worksheet' 添加一个新的工作表S

Vue3实现点击按钮下载头像功能

要实现的效果 点击头像右上角弹出选项,点击保存图片可以把图片下载保存到本地 实现方式关键代码 1.第一种,直接创建a标签给头像地址。进行下载 // 创建一个隐藏的 <a> 标签const link = document.createElement("a");link.href = headPic; // 设置为图片的 URLlink.download = "avatar.jpg"; //

Android ToggleButton 开关按钮

ToggleButton相关属性,方法android:textOn="On"android:textOff="Off"android:checked="true"setChecked(boolean) package shortcut.song.com.myapplication;import android.support.v7.app.AppCompatActivity;impo

Android RadioButton 单选按钮

RadioGroup 单选按钮组, 可以包含多个单选按钮,当单选按钮选中状态改变时会触发setOnCheckedChangeListener package shortcut.song.com.myapplication;import android.graphics.Color;import android.support.v7.app.AppCompatActivity;imp

delphi如何给按钮添加单键快捷键(F1~F12)

用action 讲按钮窗体的Keypreview设为True,然后加如下代码 Delphi/Pascal code ? 1 2 3 4 5 6 procedure  TForm1 . FormKeyDown(Sender: TObject;  var  Key:  Word ;    Shift: TShiftState); begin    i

基于node.js/jquery/bootstrap的博客系统开发---总结

1 express Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用。 var express = require('express');var app = express(); 1.1 路由 路由是指如何定义应用的端点(URIs)以及如何响应客户端的请求。 app.METHOD(pa