闲言碎语
昨晚学的有点着急，看文档搞到四点多了才惊觉还没更新公众号，赶紧想了一篇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>
- 还有很多，感兴趣的同学可以下来学习下。
To Be Continue ...
历史文章：
Bootstrap学习笔记3--图片样式
Bootstrap学习笔记2--响应式布局与栅格样式
Bootstrap学习笔记1--表单样式
好了，今天的内容就到这里，如果觉得有帮助，记得点赞支持。欢迎大家关注我的公众号，获取更多Python相关的知识，并有整理好的各类福利数据供大家下载：
清风Python.jpg
©本文由作者：清风Python 原创 如需转载请注明
网友评论