Bootstrap之CSS篇(5)

网友投稿 802 2022-05-30

本篇介绍了bootstrap响应式按钮、图片的使用方法,辅助类、响应式工具的使用,也算是对Bootstrap全局CSS样式的完结篇。

按钮

可作为按钮使用的元素

- ```` - ````     - ``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%

创建按钮实例

    

btn 基础样式

         btn - button按钮     btn - a标签     

    

input按钮 - 六种样式

                                  

    

button按钮 - 六种样式

    btn-default     btn-primary     btn-success     btn-info     btn-warning     btn-danger     

    

 a标签按钮 - 六种样式  (辅助类效果演示)

    btn-default (active)     btn-primary (disabled - 1)     btn-success (disabled - 2)     btn-info (btn-lg)     btn-warning (btn-sm)     btn-danger (btn-xs)   

按钮小结:

实现按钮有三个标签

    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,并居中显示

Bootstrap之CSS篇(5)

显示或隐藏

.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列在浏览器打印时也不显示。

             1行1列 hidden-print col-xs-4 col-md-4

        1行2列 hidden-print col-xs-4 col-md-8         1行3列 hidden-print col-xs-4 col-md-12                   2行1列 hidden-xs col-sm-4         2行2列 hidden-xs col-sm-4         2行3列 hidden-xs col-sm-4                   3行1列 col-xs-4         3行2列 col-xs-4         3行3列 col-xs-4        

响应式工具小结:

在我们熟悉了栅格系统后,通过这个响应式工具,我们可以设计更具特性的页面效果

只要掌握好了这些响应式工具的应用,在不同设备上展现不同的形式的网站都是十分容易的事情,但对美工设计人员是有一定要求,除了需要设计主版面外,还要提供过渡到各设备的页面,对于过渡时的各页面效果都是需要提前作出与设计才能保证效果。

初期此响应式工具的掌握好它们的使用效果即可,如何在动态版式布局中发挥效果,还需要我们借鉴更多网站模仿练习。

本篇的总结

本篇介绍了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小时内删除侵权内容。

标签:bootstrap
上一篇:经验 | 在麻省理工人工智能实验室如何做研究?(经验英语)
下一篇:Excel2007公式常见显示错误原因是什么(Excel2010公式常见显示错误原因与解决方法)
相关文章