小白初入前端之Vue.js的学习之路——初识vue
802
2022-05-30
本篇介绍了bootstrap响应式按钮、图片的使用方法,辅助类、响应式工具的使用,也算是对Bootstrap全局CSS样式的完结篇。
按钮
可作为按钮使用的元素
- ```` - ``
按钮类
- ``.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%
创建按钮实例
btn 基础样式
btn - a标签input按钮 - 六种样式
button按钮 - 六种样式
a标签按钮 - 六种样式 (辅助类效果演示)
btn-default (active) btn-primary (disabled - 1) btn-success (disabled - 2) btn-info (btn-lg) btn-warning (btn-sm) btn-danger (btn-xs)按钮小结:
实现按钮有三个标签、
按钮效果为:基础样式+按钮样式(六种)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 圆角边框形状
创建图片
img-responsive 响应式图片
img-rounded
img-circle
img-thumbnail
图片小结:
在img引用.img-responsive类即可,非常简单,用不着总结当辅助类使用就可以了
img辅助类可以了解一下,主要是对图片边角进行修饰作用
辅助类
辅助类也叫工具类,在一些基础类有时候需要一些辅助类来实现特定的效果
文本颜色
text-mutd
text-primary
text-success
text-warning
text-danger
如果text-*类 在某些选择器下无法生效,可尝试将文本放在中再引用text-*类
背景颜色
bg-primary
bg-success
bg-info
bg-warning
bg-danger
如果bg-*类 在某些选择器下无法生效,可尝试将文本放在
中再引用bg-*类
这是一个text-muted的文本效果
这是一个text-primary的文本效果
这是一个text-success的文本效果
这是一个text-info的文本效果
这是一个text-warning的文本效果
这是一个text-danger的文本效果
这是一个bg-primary的背景色效果
这是一个bg-success的背景色效果
这是一个bg-info的背景色效果
这是一个bg-warning的背景色效果
这是一个bg-danger的背景色效果
快速浮动
pull-left、pull-right工具类具备 !important属性,不能用于导航条组件中(导航组件中有专用的工具类)
.pull-left 左浮动
.pull-right 右浮动
.clearfix 清除浮动
内容居中
.center-block 设置元素为block,并居中显示
显示或隐藏
.show 显示元素,仅作用于块级元素
.hidden 隐藏元素,仅作用于块级元素
.sr-only 仅在阅读器中显示,其他设备上隐藏元素
.invisible 仅影响元素的可见性,元素仍能影响文档流的布局效果
text-hide 隐藏文本
特殊的按钮
关闭按钮
三角符号
辅助类小结:
辅助类的使用方法都相同,只要在class中引用即可
注意有些效果需要在父元素中引用,这需要在以后的使用过程中慢慢去积累经验
也有一些效果因为选择器的原因冲突,需要通过额外的
响应式工具
为了满足不同设备展示布局效果,在某些特殊的情况下,我们可能针对不同的设备来独立设计他们的页面显示内容,其中还包含了针对打印机显示或隐藏的内容。我们完全可以为移动设备和电脑设备分别独立的设计页面。
响应式工具类快速查询表
在栅格系统中我们可以通过这些类来控制不同设备中页面的显示内容
栅格系统中的块级效果应用
从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列在浏览器打印时也不显示。
响应式工具小结:
在我们熟悉了栅格系统后,通过这个响应式工具,我们可以设计更具特性的页面效果
只要掌握好了这些响应式工具的应用,在不同设备上展现不同的形式的网站都是十分容易的事情,但对美工设计人员是有一定要求,除了需要设计主版面外,还要提供过渡到各设备的页面,对于过渡时的各页面效果都是需要提前作出与设计才能保证效果。
初期此响应式工具的掌握好它们的使用效果即可,如何在动态版式布局中发挥效果,还需要我们借鉴更多网站模仿练习。
本篇的总结
本篇介绍了Bootstrap响应式按钮、图片的使用方法,辅助类、响应式工具的使用,也算是对Bootstrap全局CSS样式的完结篇。
Bootstrap当然不止只有这点内容,它还提供非常漂亮与实用的组件供我们使用,当然这些我们后续逐步介绍。
Bootstrap相关资源文件,已上传至我的Gitee项目 https://gitee.com/net_master/Ajax_Node/tree/master/Bootstrap
书山有路勤为径,学海无涯苦作舟!!!
zhoubo
2020.9.21 at home
Bootstrap
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。