zoukankan      html  css  js  c++  java
  • bootstrap 图片类 和 按钮类 部分

    bootstrap框架,来自 Twitter,基于 html ,css ,js.简介灵活。

    首先引入  bootstrap.js   bootstrap.css  及 jquery.js  这里不考虑兼容

    对图片的操作的类class:

    .img-rounded   图片圆角 大概是  border-radius: 6px    IE8不支持

    .img-circle   让整个图片变成圆形 ===border-radius=50%  IE8不支持

    .img-thumbnail   带padding和border的缩略图,和照片效果很像

    .img-responsive 把图片设置成 响应式

    用法: <img src="images/path.jpg"    alert="类名"  class="img"/>

    按钮类(扁平化)class:

    .btn  为按钮添加基本样式     .btn-default  标准/默认的按钮

    功能性按钮:  .btn-info     .btn-success    .btn-warning     .btn-danger    不同的情况使用不同的按钮   

           点击弹出表示   信息 /成功/警告/危险   不同的按钮具有不同的颜色

    单击按钮的过程:  .btn-primary   .active        原始按钮样式(未点击)/激活后的按钮(点击后)

    按钮的大小: .btn-xs     .btn-sm      .btn-lg      小号/中号/大号按钮      

          移动页面上常看到一个按钮独占一行 100%父元素:    .btn-block     块级按钮    超大号按钮

           .btn-lg,
          .btn-group-lg > .btn {
               padding: 10px 16px;
               font-size: 18px;
               line-height: 1.3333333;
               border-radius: 6px;
          }

          可见,按钮的大小,是改变 padding ,font-size, line-height等值

    禁用按钮:  .disabled     .

    特殊的按钮: .btn-link   连接按钮      外观像超链接,但保持按钮的功能,    改变额按钮的外观

    用法: <button type="button" class="btn btn-info btn-lg"></button>       .btn类必须引入 +按钮的样式+ 按钮的大小+按钮状态   呵呵

  • 相关阅读:
    python基础===利用unittest进行测试用例执行的几种方式
    python基础===基于cv2的播放器
    python基础===对字符串进行左右中对齐
    python基础===拆分字符串,和拼接字符串
    移动端测试===从安卓手机截图到桌面的几行代码
    工具===激活xmind 8
    软件测试===测试用例基线结构
    python基础===猴子补丁
    python基础===数据伪造模块faker
    shell编程===执行shell脚本的四种方法
  • 原文地址:https://www.cnblogs.com/baota/p/6492248.html
Copyright © 2011-2022 走看看