boostrap中按钮有哪些样式？改变单选按钮样式

本文目录

• boostrap中按钮有哪些样式
• 改变单选按钮样式
• 页面如何添加按钮以及按钮样式设置
• 怎样用CSS写按钮样式
• 如何改变delphi 中按钮的样式

boostrap中按钮有哪些样式

按钮的样式类型如下所示.btn 为按钮添加基本样式.btn-default 默认/标准按钮.btn-primary 原始按钮样式（未被操作）.btn-success 表示成功的动作 .btn-info 该样式可用于要弹出信息的按钮.btn-warning 表示需要谨慎操作的按钮 .btn-danger 表示一个危险动作的按钮操作.btn-link 让按钮看起来像个链接 (仍然保留按钮行为) .btn-lg 制作一个大按钮 .btn-sm 制作一个小按钮 .btn-xs 制作一个超小按钮 .btn-block 块级按钮(拉伸至父元素100%的宽度) .active 按钮被点击 .disabled 禁用按钮

改变单选按钮样式

单选按钮的样式是无法修改的，这是html固定的，跟其它控件不一样如果你一定要用自己的样式觉得美观，你可以这样做：自己做一张图片，左半边是单选按钮选中的样子，右半边是没选中的样子，利用js和css，只显示其中一半，当被点击时切换到另一半。

页面如何添加按钮以及按钮样式设置

按照HTML标准，按钮的表示如下：

1，在上面的代码中里面的style属性，把要修改的属性直接写到style里面，属性与值之间用冒号分割，多个属性间用分号分隔，如

    style=“width:100px;background-color:#123“

2，为元素应用样式类，即上面代码里面的class里面的内容，其中的每个值都代表一个已定义的样式类，多个样式类之间用空格隔开，样式类一般定义在单独的样式文件中，比如下面图片中的内容是bootstrap.css里面的部分内容，其中以点开始的如container就是样式类了。

3，对于前端开发而言，目前有许多比较流行的开源框架，里面都预定义了一些常用的样式，比如你说的按钮，在bootstrap中，通过简单的使用class=“btn btn-default“就可以将任意元素表现成一个按钮的样子

怎样用CSS写按钮样式

一般有三种方法：Button标签直接使用CSS定义样式，优点是立体感、有按下状态，缺点是样式单一、各浏览器下显示效果不一致。a标签+背景图片+滑动门技术，优点是可实现多种视觉效果，缺点是采用滑动门技术会导致背景图片过大。a标签直接使用CSS3绘制，优点是在保证视觉效果的基础上大大减少了背景图片的使用，缺点是部分浏览器不兼容。

如何改变delphi 中按钮的样式

在标准的Windows程序中所有按钮均没有颜色。因此Delphi提供的所有按钮组件也均无颜色属性，有时你可能做了一个五颜六色的程序界面，而按钮颜色可能很不相称。 在此本人提供一种用自定义组件制作有颜色属性的铵钮的方法，它遵循了Delphi的组件定义规则，完成后该按钮与普通按钮（Button）相比，多了一个Color属性，你可以永远地使用它，在设计阶段随意地改变颜色，就象是Delphi本身提供的组件一样（本文代码在Delphi 4.0下完成)。第一步 打开Delphi，选择菜单的Component/New Component选项，在弹出对话框的Ancestor type下拉框中手工填入或下拉选择TButton，这是选择了我们自定义组件的祖先类，我们将以此为基础完成自定义组件的下一步代码编写（这也是自定义组件编写的第一步）。对话框中的其余可编写内容就随你的高兴而填写了，但是你必须注意Class Name(类名）不能和已有的（包括你自定义的）类名相同，同时还应该记住该自定义组件的安装位置(Palette Page下拉框中的内容)和单元文件在磁盘上的存放位置(Unit file name框内容)，不然以后你在何处去找它?本文以 Delphi的默认值TButton1为类名。第二步 做完以上工作后，按下面的OK按钮，Delphi将为你自动生成一个基本的组件代码，对这样的代码框架一般没有必要修改，一定要修改的话请注意Delphi的组件定义规则（本文只是删除了所有自动生成的注释内容），接着就应该将其文件存盘。第三步 在上面的代码框架中添加我们的代码，当然这是我们要做的主要工作。1. 将Delphi自动生成的单元文件的数据类型定义部份修改为：typeTButton1 = class(TButton)private FColor:TColor; FCanvas: TCanvas; IsFocused: Boolean; procedure SetColor(Value:TColor); procedure CNDrawItem(var Message: TWMDrawItem); message CN_DRAWITEM;protected procedure CreateParams(var Params: TCreateParams); override; procedure SetButtonStyle(ADefault: Boolean); override;public constructor Create(AOwner: TComponent); override; destructor Destroy; override;published property Color:TColor read FColor write SetColor default clWhite;end;说明： a. 我们只添加了一个属性，因此在published段的代码下只有一个Color属性，并将默认颜色设为白色（clWhite，当然你可以随意改变)。 b. 重载构造函数和析构函数，二者应为可以在外部调用，因此应将其放在public段。 c. 读属性的私有数据域FColor和属性的写方法SetColor，应放在私有段(private)，其它与此相关的非独立的变量和过程/函数等也应放在private段，以使在类以外不能访问它们。2. Delphi自动生成的 procedure Register可以不理它。我们在它的过程体之后，在end.(注意符号“.”)之前手工加上以下代码，完成我们在上面定义的全部过程的过程体编写（这里我们没有定义有函数原型）：//*** 构造函数 *****************************************************constructor TButton1.Create(AOwner: TComponent);begin inherited Create(AOwner); FCanvas := TCanvas.Create; FColor:=clWhite;//默认颜色end;//*** 析构函数 *************************************************destructor TButton1.Destroy;begin FCanvas.Free; inherited Destroy;end;//*** 定义按钮样式，必须将该按钮重定义为自绘式按钮 *************procedure TButton1.CreateParams(var Params: TCreateParams);begin inherited CreateParams(Params); with Params do Style := Style or BS_OWNERDRAW;end;//*** 属性写方法 ************************************************procedure TButton1.SetColor(Value:TColor);begin FColor:=Value; Invalidate;end;//*** 设置按钮状态***********************************************procedure TButton1.SetButtonStyle(ADefault: Boolean);begin if ADefault 《》 IsFocused then begin IsFocused := ADefault; Refresh; end;end;//*** 绘制按钮 ***************************************************procedure TButton1.CNDrawItem(var Message: TWMDrawItem);var IsDown, IsDefault: Boolean; ARect: TRect; Flags: Longint; DrawItemStruct: TDrawItemStruct; wh:TSize;begin DrawItemStruct:=Message.DrawItemStruct^; FCanvas.Handle := DrawItemStruct.hDC; ARect := ClientRect; with DrawItemStruct do begin IsDown := itemState and ODS_SELECTED 《》 0; IsDefault := itemState and ODS_FOCUS 《》 0; end; Flags := DFCS_BUTTONPUSH or DFCS_ADJUSTRECT; if IsDown then Flags := Flags or DFCS_PUSHED; if DrawItemStruct.itemState and ODS_DISABLED 《》 0 then Flags := Flags or DFCS_INACTIVE; if IsFocused or IsDefault then begin //按钮得到焦点时的状态绘制 FCanvas.Pen.Color := clWindowFrame; FCanvas.Pen.Width := 1; FCanvas.Brush.Style := bsClear; FCanvas.Rectangle(ARect.Left, ARect.Top, ARect.Right, ARect.Bottom); InflateRect(ARect, -1, -1); end; FCanvas.Pen.Color := clBtnShadow; FCanvas.Pen.Width := 1; FCanvas.Brush.Color := FColor; if IsDown then begin //按钮被按下时的状态绘制 FCanvas.Rectangle(ARect.Left , ARect.Top, ARect.Right, ARect.Bottom); InflateRect(ARect, -1, -1); end else //绘制一个未按下的按钮 DrawFrameControl(DrawItemStruct.hDC, ARect, DFC_BUTTON, Flags); FCanvas.FillRect(ARect); //绘制Caption文本内容 FCanvas.Font := Self.Font; ARect:=ClientRect; wh:=FCanvas.TextExtent(Caption); FCanvas.Pen.Width := 1; FCanvas.Brush.Style := bsClear; if not Enabled then begin //按钮失效时应多绘一次Caption文本 FCanvas.Font.Color := clBtnHighlight; FCanvas.TextOut((Width div 2)-(wh.cx div 2)+1, (height div 2)-(wh.cy div 2)+1, Caption); FCanvas.Font.Color := clBtnShadow; end; FCanvas.TextOut((Width div 2)-(wh.cx div 2),(height div 2)-(wh.cy div 2),Caption); //绘制得到焦点时的内框虚线 if IsFocused and IsDefault then begin ARect := ClientRect; InflateRect(ARect, -4, -4); FCanvas.Pen.Color := clWindowFrame; FCanvas.Brush.Color := FColor; DrawFocusRect(FCanvas.Handle, ARect); end; FCanvas.Handle := 0;end;//** The End *********************************************************end.第四步：检查确认无误后选择Delphi菜单的Component/Install Component选项，在Unite file name框中确认你的文件路径和名称后按OK按钮，Delphi将编译、安装该组件。 如果你完全按本文步聚进行，在编译安装无误后，你可以在Delphi组件标签的Samples标签页中找到一个图标和TButton一样的按钮。新建一个工程并将这个我们自义的按钮放置在Form上其默认的名称是Button11，你会看到一个白色的按钮。怎么样？通过其Color属性你以随意设置它的颜色。 最后说明：本文中的按钮绘制方式采用了和Delphi本身的TButton相似的绘制方式，以达到和Delphi按钮相似的动作外观。然而你想要发挥的话你可以在FCanvas这块画布上绘制任意的、你想要的、可以表达你的个性的所有文字和图形。