Bootstrap之CSS篇(5)
本篇介绍了Bootstrap响应式按钮、图片的使用方法，辅助类、响应式工具的使用，也算是对Bootstrap全局CSS样式的完结篇。
按钮
可作为按钮使用的元素
- ``<a>`` - ``<button`` - ``<input>`` - ``type="button"`` - ``type="submit"``
按钮类
- ``.btn-default`` 标准效果 - ``.btn-primary`` 原始效果 - ``.btn-success`` 成功效果 - ``.btn-info`` 信息效果 - ``.btn-warning`` 警示效果 - ``.btn-danger`` 危险效果
辅助类
- .active 点击效果 - .disapbled 禁用效果 - .btn-link 链接效果 - .btn-lg 尺寸：大按钮 - .btn-sm 尺寸：小铵钮 - .btn-xs 尺寸：超小按钮 - .btn-block 块级按钮 父元素内宽度拉伸100%
创建按钮实例
<div class="container"> <p>btn 基础样式</p> <input class="btn" type="button" value="btn - input按钮" /> <button class="btn">btn - button按钮</button> <a class="btn" href="#">btn - a标签</a> <hr/><br/> <p>input按钮 - 六种样式</p> <input class="btn btn-default" type="button" value="btn-default"/> <input class="btn btn-primary" type="button" value="btn-primary"/> <input class="btn btn-success" type="button" value="btn-success"/> <input class="btn btn-info" type="button" value="btn-info"/> <input class="btn btn-warning" type="button" value="btn-warning"/> <input class="btn btn-danger" type="button" value="btn-danger"/> <hr/><br/> <p>button按钮 - 六种样式</p> <button class="btn btn-default">btn-default</button> <button class="btn btn-primary">btn-primary</button> <button class="btn btn-success">btn-success</button> <button class="btn btn-info">btn-info</button> <button class="btn btn-warning">btn-warning</button> <button class="btn btn-danger">btn-danger</button> <hr/><br/> <p> a标签按钮 - 六种样式 (辅助类效果演示)</p> <a class="btn btn-default active" role="button" href="#">btn-default (active)</a> <a class="btn btn-primary disabled" role="button" href="#">btn-primary (disabled - 1)</a> <a class="btn btn-success" disabled="disabled" role="button" href="#">btn-success (disabled - 2)</a> <a class="btn btn-info btn-lg" role="button" href="#">btn-info (btn-lg)</a> <a class="btn btn-warning btn-sm" role="button" href="#">btn-warning (btn-sm)</a> <a class="btn btn-danger btn-xs" role="button" href="#">btn-danger (btn-xs)</a> </div>
按钮小结：
实现按钮有三个标签
<a>、<button>、<input>，如果希望使用a标签按钮完成一些函数与方法的调用（非链接功能），请要加上rol属性<a rol="button">按钮效果为：基础样式+按钮样式（六种）
btn btn-default ......按钮的辅助类并不复杂，三种按钮尺寸类和disabled类这些都是经验会使用到的
disabled有两种使用方法，1种是作为.disabled类引用，另1种作为属性引用
disabled:"disabled"这种效果更好鼠标上也会有禁止图标如无必要请使用来做为页面的按钮来使用，以获得最佳的效果支持
图片
响应式图片
.img-responsive类 让图片支持响应式布局基本原理是为图片设置了max-width:100%、height:auto、display:block这三个属性，从而在父元素中获得更好的缩放效果。
辅助类
.center-block设置元素为block，并居中显示img-rounded圆角边形状img-circle圆型形状img-thumbnail圆角边框形状
创建图片
<div class="container clearfix"> <div style="height:200px;width:200px;margin:0 20px;" class="pull-left"><p class="text-center">img-responsive 响应式图片</p> <img src="https://v4.bootcss.com/docs/assets/img/bootstrap-icons.png" class="img-responsive"> </div> <div style="height:200px;width:200px;margin:0 20px;" class="pull-left"><p class="text-center">img-rounded</p> <img src="https://v4.bootcss.com/docs/assets/img/bootstrap-icons.png" class="img-responsive img-rounded"> </div> <div style="height:200px;width:200px;margin:0 20px;" class="pull-left"><p class="text-center">img-circle</p> <img src="https://v4.bootcss.com/docs/assets/img/bootstrap-icons.png" class="img-responsive img-circle"> </div> <div style="height:200px;width:200px;margin:0 20px;" class="pull-left"><p class="text-center">img-thumbnail</p> <img src="https://v4.bootcss.com/docs/assets/img/bootstrap-icons.png" class="img-responsive img-thumbnail"> </div> </div>
图片小结：
在img引用
.img-responsive类即可，非常简单，用不着总结当辅助类使用就可以了img辅助类可以了解一下，主要是对图片边角进行修饰作用
辅助类
辅助类也叫工具类，在一些基础类有时候需要一些辅助类来实现特定的效果
文本颜色
text-mutdtext-primarytext-successtext-warningtext-danger
如果
text-*类 在某些选择器下无法生效，可尝试将文本放在中再引用text-*类
背景颜色
bg-primarybg-successbg-infobg-warningbg-danger
如果
bg-*类 在某些选择器下无法生效，可尝试将文本放在中再引用
bg-*类
<div class="container"> <p class="text-muted">这是一个text-muted的文本效果</p> <p class="text-primary">这是一个text-primary的文本效果</p> <p class="text-success">这是一个text-success的文本效果</p> <p class="text-info">这是一个text-info的文本效果</p> <p class="text-warning">这是一个text-warning的文本效果</p> <p class="text-danger">这是一个text-danger的文本效果</p> <hr/><br/> <p class="bg-primary">这是一个bg-primary的背景色效果</p> <p class="bg-success">这是一个bg-success的背景色效果</p> <p class="bg-info">这是一个bg-info的背景色效果</p> <p class="bg-warning">这是一个bg-warning的背景色效果</p> <p class="bg-danger">这是一个bg-danger的背景色效果</p> </div>
快速浮动
pull-left、pull-right工具类具备!important属性，不能用于导航条组件中（导航组件中有专用的工具类）
.pull-left左浮动.pull-right右浮动.clearfix清除浮动
内容居中
.center-block设置元素为block，并居中显示
显示或隐藏
.show显示元素，仅作用于块级元素.hidden隐藏元素，仅作用于块级元素.sr-only仅在阅读器中显示，其他设备上隐藏元素.invisible仅影响元素的可见性，元素仍能影响文档流的布局效果text-hide隐藏文本
特殊的按钮
关闭按钮
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>三角符号
<span class="caret"></span>
辅助类小结：
辅助类的使用方法都相同，只要在class中引用即可
注意有些效果需要在父元素中引用，这需要在以后的使用过程中慢慢去积累经验
也有一些效果因为选择器的原因冲突，需要通过额外的
<div>、<span>来包裹引用类才能发挥作用
响应式工具
为了满足不同设备展示布局效果，在某些特殊的情况下，我们可能针对不同的设备来独立设计他们的页面显示内容，其中还包含了针对打印机显示或隐藏的内容。我们完全可以为移动设备和电脑设备分别独立的设计页面。
响应式工具类快速查询表
在栅格系统中我们可以通过这些类来控制不同设备中页面的显示内容
栅格系统中的块级效果应用
从v3.2.0版本起，所有的
.visible-*-*类都有三种块级效果，分别对应display:block，display:inline，display:inline-block;以xs小屏幕设备为例，可以使用
.visible-xs-block、.visible-xs-inline、.visible-xs-inline-block来设置元素的块级属性
打印类
与显示和隐藏类一样，只是这些类针对打印机做出了处理。
我们对Bootstrap之CSS篇(2)中非常规布局示例代码做一些小修改，除了xs最小设备第2列不显示外，第1列在浏览器打印时也不显示。
<div class="container" style="border:1px solid black;"> <div class="row" style="border:1px solid black;"> <div class="hidden-print col-xs-4 col-md-4">1行1列 hidden-print col-xs-4 col-md-4</div> <div class="hidden-print col-xs-4 col-md-8">1行2列 hidden-print col-xs-4 col-md-8</div> <div class="hidden-print col-xs-4 col-md-12">1行3列 hidden-print col-xs-4 col-md-12</div> </div> <div class="row" style="border:1px solid black;"> <div class="hidden-xs col-sm-4">2行1列 hidden-xs col-sm-4</div> <div class="hidden-xs col-sm-4">2行2列 hidden-xs col-sm-4</div> <div class="hidden-xs col-sm-4">2行3列 hidden-xs col-sm-4</div> </div> <div class="row" style="border:1px solid black;"> <div class="col-xs-4">3行1列 col-xs-4</div> <div class="col-xs-4">3行2列 col-xs-4</div> <div class="col-xs-4">3行3列 col-xs-4</div> </div> </div>
响应式工具小结：
在我们熟悉了栅格系统后，通过这个响应式工具，我们可以设计更具特性的页面效果
只要掌握好了这些响应式工具的应用，在不同设备上展现不同的形式的网站都是十分容易的事情，但对美工设计人员是有一定要求，除了需要设计主版面外，还要提供过渡到各设备的页面，对于过渡时的各页面效果都是需要提前作出与设计才能保证效果。
初期此响应式工具的掌握好它们的使用效果即可，如何在动态版式布局中发挥效果，还需要我们借鉴更多网站模仿练习。
本篇的总结
本篇介绍了Bootstrap响应式按钮、图片的使用方法，辅助类、响应式工具的使用，也算是对Bootstrap全局CSS样式的完结篇。
Bootstrap当然不止只有这点内容，它还提供非常漂亮与实用的组件供我们使用，当然这些我们后续逐步介绍。
Bootstrap相关资源文件，已上传至我的Gitee项目 https://gitee.com/net_master/Ajax_Node/tree/master/Bootstrap
书山有路勤为径，学海无涯苦作舟!!!
zhoubo
2020.9.21 at home
- 点赞
- 收藏
- 关注作者
评论（0）