zoukankan      html  css  js  c++  java
  • bootstrap 学习笔记(5)---- 图片和响应式工具

    (一)响应式图片:

    在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max- 100%; height: auto; 和 display: block; 属性,从而让图片在其父元素中更好的缩放。

    注意:如果需要让使用了 .img-responsive 类的图片水平居中,请使用 .center-block 类,不要用 .text-center

    代码:<img src="..." class="img-responsive" alt="Responsive image">

    2、图片形状:通过为 <img> 元素添加以下相应的类,可以让图片呈现不同的形状。

       跨浏览器兼容性  请时刻牢记:Internet Explorer 8 不支持 CSS3 中的圆角属性。

    代码:<img src="..." alt="..." class="img-rounded">( 带弧度的正方形)

      <img src="..." alt="..." class="img-circle">(圆形)

      <img src="..." alt="..." class="img-thumbnail">(有边框的圆形,这个图片要生效必须设置图片有颜色,才能显示出来)

    3、辅助类

    a 情景文本颜色:通过颜色来展示意图,bootstrap提供了一组工具类。这个类可以应用于链接,并且在鼠标经过时颜色还可以加深,就像默认的链接一样。

    代码:<p class="text-muted">...</p>

    类名有:.text-muted   .text-primary  .text-success  .text-info  .text-warning  .text-danger

    b 背景颜色:和情境文本颜色类一样,使用任意背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深,就像上面所讲的文本颜色类一样。

    类名有:.bg-primary  .bg-success  .bg-info  .bg-warning  .bg-danger

    c 关闭按钮:通过使用一个象征关闭的图标,可以让模态框和警告框消失。

    代码:<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

     d 三角符号 : 通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意,向上弹出式菜单中的三角符号是反方向的。

    代码:<span class="caret"></span>

    e 清除浮动  通过为父元素添加 .clearfix 类可以很容易地清除浮动(float)。这里所使用的是 Nicolas Gallagher 创造的 micro clearfix 方式。此类还可以作为 mixin 使用。

    代码:<div class="clearfix">...</div>

    f 隐藏和显示 .show .hidden

    (二)响应式工具

    .img-responsive   .table-responsive  是两个响应式表格和响应式图片的类。

  • 相关阅读:
    MS-DOS命令
    寻找一条通过迷宫的路径
    linux文件基本操作和常用命令
    网络基础
    计算机基础---操作系统
    GIT 使用
    计算机基础
    秒角士网站
    咖啡项目
    winfrom面向对象1
  • 原文地址:https://www.cnblogs.com/-ldzwzj-1991/p/7079881.html
Copyright © 2011-2022 走看看