关于Bootstrap按钮组件消除黄框的方法

bootstrap的button边框问题

最近在线上学习bootstrap时，发现很多童鞋都会遇到很多坑，有些很容易掉进去就出不来了；

bootstrap框架在国内相对来说还是非常热的，毕竟上手快速，代码简洁，在日常开发中可是能省不少事呢，但是吧，刚入bootstrap的童鞋，对bootstrap的样式源码等不熟悉，框架有些默认的样式虽然很漂亮，但是无奈童鞋们的胃口太挑剔，比如本人就喜欢折腾，为了让样式看起来萌萌哒，不惜时间，对它动手动脚的；

对于如何使用bootstrap，网上可是又不少教程的哟，这里是给填掉一个我们在修改默认样式的时候，比较常见的坑；

bootstrap有些样式一般不容易被发现，尤其是对于萌新而言，F12调试无果，而且有些属性我们不常用，对于其意义也是一知半解的，所以一时之间掉进坑里，是非常难受的；

下面就解决一个比较常见的问题的方法：

用bootstrap做的按钮，点击出现的边框，该如何去除？

关于bootstrap的btn点击出现黄框，常规的设置outline:none，是无效的…

在不使用!important的情况下， 你可能需要以下代码：

以上所述是小编给大家介绍的关于Bootstrap按钮组件消除黄框的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Bootstrap 组件之按钮（二）

    Bootstrap是Twitter推出的一个用于前端开发的开源工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架. 按钮组 .btn-group>.btn : 一组.btn按钮包裹在.btn-group 外包元素.btn-group {position/display/} 按钮元素.btn <div class="btn-group" role="group"> <butto

  • JS组件Bootstrap按钮组与下拉按钮详解

    本文先为大家分享按钮组的使用方法,具体内容如下 一.按钮组(Button Groups) 1.单个按钮组 用.btn-group封装多个带.btn的<button> <div class="btn-group"> <button class="btn">1</button> <button class="btn">2</button> <button class=&qu

  • Bootstrap按钮组件详解

    Bootstrap按钮组件详解

    按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运作. 结构方面:使用一个类名为btn-group的容器,把多个按钮放在这个容器中. 按钮组也是一个独立的组件,所以可以找到相应的源码文件: Less:buttons.less Sass:_buttons.scss Css:Bootstrap.css 3131行~3291行 <div class="btn-group"> <button type="button" class=&qu

  • Bootstrap按钮下拉菜单组件详解

    Bootstrap按钮下拉菜单组件详解

    按钮组也是一个独立的组件,按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运作. 把一组<div class="btn-group">组合进一个<div class="btn-toolbar">做成更复杂的组件. <div class="btn-toolbar" role="toolbar"> <div class="btn-group">

  • Bootstrap CSS组件之按钮组(btn-group)

    .btn-toolbar(有助于几组btn-group结合到一个btn-toolbar中)/.btn-group(btn-group-lg/btn-group-sm/btn-group-xs)/.btn-group-vertical 容器内的按钮,可以使用button元素,也可以使用a元素,产生的效果是一样的. 容器的多个分组以table风格进行显示,每组之间保持5px的left margin //源码 .btn-toolbar:before, .btn-toolbar:after{ displ

  • 关于Bootstrap按钮组件消除黄框的方法

    关于Bootstrap按钮组件消除黄框的方法

    bootstrap的button边框问题 最近在线上学习bootstrap时,发现很多童鞋都会遇到很多坑,有些很容易掉进去就出不来了: bootstrap框架在国内相对来说还是非常热的,毕竟上手快速,代码简洁,在日常开发中可是能省不少事呢,但是吧,刚入bootstrap的童鞋,对bootstrap的样式源码等不熟悉,框架有些默认的样式虽然很漂亮,但是无奈童鞋们的胃口太挑剔,比如本人就喜欢折腾,为了让样式看起来萌萌哒,不惜时间,对它动手动脚的: 对于如何使用bootstrap,网上可是又不少教程的

  • 浅析Bootstrap缩略图组件与警示框组件

    浅析Bootstrap缩略图组件与警示框组件

    Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 缩略图组件 缩略图在网站中最常用的就是产品列表页面,一行显示几张图片,有的在图片底下带有标题.描述内容.按钮等信息. bootstrap框架将这部分独立成一个模块组件,通过类名.thumbnail配合bootstrap的网格系统来实现.下面是bootstrap缩略图组件不同版本的源码文件: L

  • layui 优化button按钮和弹出框的方法

    正常下的layui在3个button按钮 压缩之后 代码为 <button data-id="{$activity.activity_id}" style="background-color:#297911;" class="layui-btn layui-btn-small layui-btn-danger edit_store">修改门店</button> <button data-id="{$acti

  • layer.confirm点击第一个按钮关闭弹出框的方法

    layer.confirm弹出框,当你点击第一个按钮的时候,这个弹出层不会关闭,也是给一些小伙伴带来了一些困扰, 下面分享两个解决方案: ①可以将第一个按钮的回调函数传一个index,然后使用layer.close("index")就可以点击第一个按钮的时候关闭弹出框了,代码如下: ②第二种方法就非常的粗暴了,你可以直接在这个回调函数中写: layer.closeAll('dialog'); 也能实现点击第一个按钮的时候关闭弹出框 以上这篇layer.confirm点击第一个按钮关闭弹

  • bootstrap中selectpicker下拉框使用方法实例

    bootstrap中selectpicker下拉框使用方法实例

    前言 最近一直在用bootstrap 的一些东西,写几篇博客记录下.... bootstrap selectpicker是bootstrap里比较简单的一个下拉框的组件,先看效果如下: 附上官网api链接,http://silviomoreto.github.io/bootstrap-select/. 下拉框的使用上基本操作一般是:单选.多选.模糊搜索.动态赋值等,下面来看如何使用: 使用方法如下 1.首先需要引入的css和js: bootstrap.css     bootstrap-sele

  • bootstrap按钮插件（Button）使用方法解析

    按钮插件(Button)学习笔记: 按钮插件 样式文件: ☑ LESS版本:源文件buttons.less ☑ 点击按钮时,按钮文字变为"正在加载-",一旦加载完之后又变回"获取数据".简单点说就是控制按钮状态,比如禁用状态.正在加载状态.正常状态等: ☑ 按钮切换状态 ☑ 按钮模仿单选按钮 ☑ 按钮模仿复选按钮 按钮插件–按钮加载状态 通过按钮可以设计状态提示,当单击按钮时,会显示loading状态信息.例如,点击"加载"按钮,会触发按钮的加载

  • JS组件Bootstrap dropdown组件扩展hover事件

    JS组件Bootstrap dropdown组件扩展hover事件

    bootstrap导航条当中dropdown组件用得特别频繁,本文就为大家介绍bootstrap中的dropdown组件扩展hover事件,具体内容如下 如何实现这个hover事件呢,其实在dropdown组件的点击事件的基础上很好完成的.细心者可以发现,下拉框出现时,其父级会有一个open的class属性.我们只需要监听hover事件时,给父级增加或删除open类就可以了. boostrap-hover-dropdown.js插件,托管在github上的代码网址:查看 下面是完整的js插件代码

  • bootstrap实现点击删除按钮弹出确认框的实例代码

    具体代码如下所示: <%@ page language="java" import="com.student.servlet.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@page import="java.util.*" import="com.student.vo.User"%

  • bootstrap fileinput组件整合Springmvc上传图片到本地磁盘

    bootstrap fileinput组件整合Springmvc上传图片到本地磁盘

    整合前的准备步骤 1.搭建好基础框架,本文用的是SSM(Spring+SpringMVC+Mybatis),这里的过程就不在本文中讲了,之前我做个一个demo(ssm整合+用户模块),可以参考这个搭建好. 2.下载bootstrap fileinput组件源码: https://github.com/kartik-v/bootstrap-fileinput/ 搭建后的效果图 图1. 图2. 图3. 图4. 图5. 在需要编写的jsp页面引入组件 本工程的路径界面如下: 在jsp引入组件需要的js

随机推荐