Bootstrap框架按钮二

可作为按钮使用的标签或元素,预定义样式,按钮尺寸,按钮激活状态,链接元素,禁用状态,button元素。

操作方法

  • 01

    尺寸 需要让按钮具有不同尺寸吗?使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

  • 02

    按钮尺寸代码

  • 03

    通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。

  • 04

    激活状态 当按钮处于激活状态时,其表现为被按压下去(底色更深、边框夜色更深、向内投射阴影)。对于 <button> 元素,是通过 :active 状态实现的。对于 <a> 元素,是通过 .active 类实现的。然而,你还可以将 .active 应用到 <button> 上(包含 aria-pressed="true" 属性)),并通过编程的方式使其处于激活状态。

  • 05

    button 元素 由于 :active 是伪状态,因此无需额外添加,但是在需要让其表现出同样外观的时候可以添加 .active 类。

  • 06

    链接(<a>)元素 可以为基于 <a> 元素创建的按钮添加 .active 类。

(0)

相关推荐

  • 快速使用前端bootstrap框架

    前端bootstrap框架,简单,快捷,方便,视觉舒服,很容易学会. 操作方法 01 进入官网下载"bootstrap"文件包. 02 打开开发工具"dw",新 ...

  • Bootstrap框架语言简介二

    简要介绍 Bootstrap,以及如何下载.使用,还有基本模版和案例,等等. 操作方法 01 需要下载用于生产环境的Bootstrap.Bootstrap源码以及Sass项目. (去bootstrap ...

  • 用php制作静态网站的模版框架(二)

    操作方法 01 避免页面元素重复 "这确实不错",你也许会想,"我的网站主要就是由大量的静态页面构成.现在我可以从所有页面中删除它们的公共部分,要更新这些公共部分实在太麻 ...

  • bootstrap框架的图片

    响应式图片,图片的形状. 操作方法 01 响应式图片 在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局.其实质是为图片设置了 max-w ...

  • 实例讲解Bootstrap前端框架的使用技巧

    Bootstrap跟Dreamweaver一样也是开发网站常用的前端框架,而且Bootstrap框架比Dreamweaver框架更常使用.利用前端框架都可以非常快速的开发出一个网站的前端出来,因此深受 ...

  • bootstrap入门教程,按钮、按钮风格、下拉菜单

    bootstrap入门教程,按钮.按钮风格.下拉菜单等 本教程演示: bootstrap框架的按钮.按钮大小.按钮风格.按钮组.下拉菜单制作等. 使用的版本:Bootstrap v2.3.2 . 下面 ...

  • Bootstrap模版框架怎么用

    Bootstrap是现在很流行的一套前端框架,美观大方而且用起来非常方便,可能很多做前端开发的新手朋友还不知道 Bootstrap模版框架怎么用,今天小编就来向大家介绍一下Bootstrap的用法. ...

  • 10个Bootstrap热门的前端框架网站案例

    Bootstrap框架能让开发者快速的搭建一个时尚的网站,并且能兼容响应式,可以在桌面或移动平台上浏览网页都有良好的表现.下面整理10个很有创意的使用Bootstrap来搭建的网站,希望从中你能获得更 ...

  • 干货集锦——20个最佳Bootstrap着陆页模板,快速网页设计不是事儿

    着陆页是网站上的一个至关重要的页面,一个好的着陆页,可以引导访客在登陆你的网站时进行一系列操作,进而达成注册,购买或者其他转化.因此,设计师们都必须精心设计着陆页,因为只有精心设计的页面才可以增加转化 ...