Bootstrap学习笔记4--按钮控件与css骚操作

关注

原创最新推荐文章于 2026-09-10 16:00:00 发布 478 阅读 AI 写同款· GEO 优化 ›

Bootstrap-Switch开关控件使用指南 Bootstrap-Switch Bootstrap Switch是一款轻量级插件，可以给选择框设置类似于开关的样式,它是依赖于Bootstrap的一款插件。将复选框和单选按钮切换为切换开关。效果图插件下载地址：https://github.com/Bttstrp/bootstrap-switch 引入插件文件 <link href="static/bootstrap... 阅读详情

闲言碎语

昨晚学的有点着急，看文档搞到四点多了才惊觉还没更新公众号，赶紧想了一篇Flask编写日历的点子，结果撸代码加写文章、截图、排版就到6点多了，白天又忙一天这会儿真的有点飘...今天接着更新下Bootstrap的按钮控件，另外针对这几天回炉再造css的一些内容进行了总结，希望大家喜欢。

Bootstrap按钮控件

类	描述
.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	禁用按钮

按钮控件设计到的主要类就是上面这些，但请不要死板的认为，这些类就是给button用的...
如果业务等需要，你完全可以将一个a标签添加这些样式....

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 按钮选项</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <row>
        <p><a href="#" class="btn btn-primary">这是一个a标签</a></p>
        <!-- 标准的按钮 -->
        <button type="button" class="btn btn-default">默认按钮</button>
        <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
        <button type="button" class="btn btn-primary">原始按钮</button>
        <!-- 表示一个成功的或积极的动作 -->
        <button type="button" class="btn btn-success">成功按钮</button>
        <!-- 信息警告消息的上下文按钮 -->
        <button type="button" class="btn btn-info">信息按钮</button>
        <!-- 表示应谨慎采取的动作 -->
        <button type="button" class="btn btn-warning">警告按钮</button>
        <!-- 表示一个危险的或潜在的负面动作 -->
        <button type="button" class="btn btn-danger">危险按钮</button>
        <!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
        <button type="button" class="btn btn-link">链接按钮</button>
        <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>
    </row>
</body>

</html>

按钮样式.png

谈谈css的骚操作

为什么谈这个话题？因为前端的骚操作，不仅可以帮助你更快速的完成网页样式配置，更能提升你的前端编程速度。另外还有你不得不关注它的理由，python不管是selenium去做自动化测试，还是你爬虫bs4去获取并解析网页，传统的find class/id by name 远远不如css selector的定位快速、高效。所以多掌握些css的的知识，用一句话说就是艺多不压身！

都知道浏览器会默认为body提供8px的margin，每次写body时候都要取消掉，那么还有哪些坑？有没有人总结？
你可以去https://www.bootcdn.cn/上去找normalize，前人总结好的避坑全家桶：normalize.min.css你值得拥有。但切记css的引用顺序，这个全家桶一定要放在第一个link中，之后再引入你自己的css文件...
属性选择器
80%的css选择器，都在使用ID和class选择器，对应的#id、.class，但偶尔用用属性选择器，效果也很棒....

[title] {
  color: #eee;
}
[title="清风Python"] {
  color: #eee;
}
# 主要的是它支持正则哦
[title*="Python"]、[href^="https://"]

兄弟/相邻选择器

<body>
    <div class="name1">name1</div>
    <div class="name2">name2</div>
    <div class="name3">name3</div>
</body>
选择class name1的兄弟name2：
.name1 + div
选择class name1的所有兄弟name2、name3：
.name1 ~ div
but：
如果是.name2 ~ div 那么不好意思，只有name3，浏览器不会回头去找name1的...

css权重(只是比较老，算是复习不够骚...)

类型	权重
! important	无穷
行间样式	1000
id	100
class/属性选择器/伪类	10
标签选择器	1
通配符	0

Emmet让你的html css如坐火箭般飞起...
关于Emmet，没什么好说的，直接上例子....

! +TAB 瞬间生成HTML5代码模板(注意是英文叹号)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

id（#）,class（.）

div#name  ---  <div id="name"></div>
div.name  ---  <div class="name"></div>
若果是div，你直接写#name和.name默认就创建的是div标签，为毛？因为它用的太多了...

重复创建

div*3
<div></div>
<div></div>
<div></div>
div.name*2
<div class="name"></div>
<div class="name"></div>
div.name$*2 <!-- $代表一位数，从1开始... -->
<div class="name1"></div>
<div class="name2"></div>

刚才介绍的只是子节点（>），兄弟节点（+），上级节点（^）

div>p>a
<div>
    <p><a href=""></a></p>
</div>
div+p+a
<div></div>
<p></p>
<a href=""></a>
p>ul>li^div
<p>
    <ul>
        <li></li>
    </ul>
    <div></div>
</p>