zoukankan      html  css  js  c++  java
  • bootstarp3x 常用基础类名

    偏移值:

    offset-*: 原理是添加margin-left;

    推、拉定位:
    push-*: 设置 left定位的值;
    pull-*: 设置 right定位的值;

    文本对齐:
    .text-right,.text-left,.text-center, .text-justify,.text-nowarp

    大小写转换:
    .text-lowercase:
    .text-uppercase:
    .text-capitalize:

    列表:
    .list-unstyled , 在UL,ol,上加它,取消列表项目符号
    .list-inline: 让所有LI在一行显示。
    .dl-horizontal: 让自定义列表dl,dt,dd实现水平布局;


    表格:
    基本: .table
    样式:
    .table-striped: 条纹状表格
    .table-bordered: 边框
    .table-hover: hover效果
    .table-condensed: 紧缩型表格
    .table-responsive: 响应式表格,用它包裹.table元素

    以上5种样式,可以进行组合应用;

    可以给tr 或者 td,添加以下状态类,设置 背景色。

    .active 鼠标悬停在行或单元格上时所设置的颜色
    .success 标识成功或积极的动作
    .info 标识普通的提示信息或动作
    .warning 标识警告或需要用户注意
    .danger 标识危险或潜在的带来负面影响的动作

    按钮:
    .btn 基本类

    样式类:
    .btn-primary 表示主要作用 蓝色
    .btn-success 表示成功作用 绿色
    .btn-info 表示信息作用 浅蓝色
    .btn-warning: 警告 橙色
    .btn-danger: 危险 红色
    .btn-default: 默认 白色
    .btn-link: 超链接 蓝色文本

    尺寸类:
    .btn-lg:增加高度
    默认
    .btn-sm:变小
    .btn-xs :最小
    .btn-block: 主按钮的宽度设置 为父元素的100%;移动端常用

    禁用: .disabled 鼠标显示为禁用。
    激活:.active 带有点击,按下时的效果,立体效果

    图片:
    .img-circle 圆
    .img-rounded 圆角
    .img-thumbnail 缩略图
    .img-responsive 响应式图片,父元素宽度的100%
    .center-block 让图片在块元素内容水平居中;
    让块元素水平居中布局; margin: 0 auto;


    情境文本颜色:
    以下设置 文本不同的颜色:
    text-muted:
    text-primary:
    text-success:
    text-info:
    text-danger:
    text-warning:

    情境背景颜色:
    bg-primary:
    bg-success:
    bg-info:
    bg-danger:
    bg-warning:

    快速浮动:
    .pull-left {
    float: left !important;
    }
    .pull-right {
    float: right !important;
    }

    清除浮动:
    .clearfix

    显示
    .show

    隐藏
    .hidden

    表单:
    默认是表单元件垂直布局:

    控制label与input:
    <div class="form-group">
    <label for="UserName"> UserName</label>
    <input type="text" class="form-control" id="UserName" placeholder="UserName">
    </div>

    <div class="checkbox">
    <label>
    <input name='likes' type="checkbox"> 记住密码
    </label>
    </div>


    内联表单: 水平显示所有表单元件:
    <form class= "form-inline"></form>

    水平表单:
    <form class="form-horizontal">

    .checkbox,.radio: 独占一行;
    .checkbox-inline: 一行显示多个选项
    .radio-inline: 一行显示多个选项

    表单输入框的情景:
    has-error:
    has-success:
    has-warning:

    has-feedback: 表单两端显示小图标

    list-unstyled:取消列表
    list-inine:列表项水平显示

    bootstrap会自带各种标签的内外边距,有时要自己取消

    img居中:vertical:maiddle;line-height
    块元素无line-height效果。bootstrap中很多类设置display:block; img标签要设置取消block

    col-lg等有边距,需自己改变删除

    .container有margin
    .row有margin负值,抵消.container的边距
    .col-lg等又有magin,两边留白

    row下可以不写.col,相当于100%

    .container,.row,.col可以重叠,自带脱离文档流效果。

    .col下可直接套.row

    .col-12下面也可写.col-12,相当于.col下可直接套.row

    内联子元素距离,可给本身加margin,也可给父级加line-height


    1. 字体组件:

    <span class= "glyphicon glyphicon-star" ></span>

    2. 下拉菜单


    3. 导航
    nav 基本类
    nav-tabs tabbar样式
    nav-pills 胶囊式标签页
    nav-stacked 垂直导航

    4. 导航条
    navbar 基本类
    navbar-default 默认样式类
    navbar-form
    navbar-header:导航头 > navbar-brand: 品牌

    navbar-collapse : 导航集合
    navbar-btn
    navbar-text
    navbar-link

    navbar-left
    navbar-right

    navbar-fixed-top
    navbar-fixed-bottom
    navbar-static-top

    navbar-inverse


    标签:
    <span class="label label-default">Default</span>
    <span class="label label-primary">Primary</span>
    <span class="label label-success">Success</span>
    <span class="label label-info">Info</span>
    <span class="label label-warning">Warning</span>
    <span class="label label-danger">Danger</span>

  • 相关阅读:
    windows下vagrant使用及工作环境配置
    使用docker搭建lnmp环境
    Docker常用命令
    [docker] 管理docker容器中的数据
    python初始化父类错误
    Linux--
    用少于2MB内存存下5百万个介于0到1千万之间的整数
    k路归并:数组、链表
    剑指offer新思路
    阿里电话面试
  • 原文地址:https://www.cnblogs.com/wywd/p/13160646.html
Copyright © 2011-2022 走看看