Bootstrap学习笔记

按钮点击去除外部轮廓

---

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus  {
    /*outline: none;*/
    box-shadow: none!important;
}

form 表单 input点击去除外部轮廓

---

.form-control:focus {
    box-shadow: none;
    border: 1px solid #C7CED4;
}
备注：只读文本的外部轮廓
.自定义类 {
    outline: none;
}

分页时点击去除外部轮廓

---

.page-link:focus{
            box-shadow: none ;
        }

js插件常用方法

---

带有复选框的按钮组：

• 第一个默认选定
  

• 带有复选框属性
  

• 点击按钮而不是复选框触发效果
  

<div class="btn-group " data-toggle="buttons">//data-toggle="buttons"触发效果
        <label class="btn btn-primary active">//action 默认选定类
            <input type="checkbox" checked >复选框1
        </label>
        <label class="btn btn-primary">
            <input type="checkbox" >复选框2
        </label>
        <label class="btn btn-primary">
            <input type="checkbox" >复选框3
        </label>
    </div>

效果图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wBMdR8p2-1577602362087)(evernotecid://29AE371C-8D9B-4474-96CA-9BB676DB4B8F/appyinxiangcom/26742564/ENResource/p63)]

不带有复选框的按钮组：

• bootstrap4直接定义一个btn-group-toggle类实现效果
  

 <div class="btn-group btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-primary active">
            <input type="checkbox" checked >复选框1
        </label>
        <label class="btn btn-primary">
            <input type="checkbox" >复选框2
        </label>
        <label class="btn btn-primary">
            <input type="checkbox" >复选框3
        </label>
    </div>

效果图：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HtOM1j1Z-1577602362088)(evernotecid://29AE371C-8D9B-4474-96CA-9BB676DB4B8F/appyinxiangcom/26742564/ENResource/p65)]

带有单选框框的按钮组：

• 与上文相同input标签type类型改为radio；

模态框的关闭

• 在模态框中的header和footer部分添加关闭按钮时需要加入 data-dismiss="modal"属性在按钮对应的元素中：

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>