zoukankan      html  css  js  c++  java
  • bootstrap学习之一_bootstrap css

    一、文本相关样式

      文本格式(用于块状标签):
    text-left:向左对齐文本;text-center:居中对齐文本;text-right:向右对齐文本;text-justified;text-nowrap;
      文本增强标签:
    small,strong,em;
      文本修饰(用于p,a等包含文本的标签):
    text-muted(本行内容是减弱的);text-primary;text-success;text-info;text-warning;text-danger;text-info;text-lowercase;text-uppercase;text-capitalize;

      文本缩写标签:

    <abbr>,得到更小字体可以添加initialism类
      文本地址标签:

    address
      文本引用标签:

    blockquote 使用类blockquote-inverse可以使得引用右侧对齐

      列表相关类:

    list-unstyled;list-inline;dl-horizontal

    二、bootstrap表格

      可以应用于<table>的类:

    基础类table,table-striped;table-bodered;table-hover;table-condensed;

      可以应用于<tr>,<th>和<td>的类

    .active;.success;.info;.warning;.danger

    通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。

    三、bootstrap表单

    1.向要创建的<form>元素添加role="form'

    2,如果是标签和Input空间,可以把一组标签和控件放在一个class .form-group的<div>中,以便获得最佳间距,这会在div周围添加一条边框。

    3,如果input周围有前后缀(包括文本,按钮,下拉菜单等)。此时,向其父div增添类.input-group(基本类,再添加其他类如 .input-group-lg、input-group-sm、input-group-xs可以调整大小)。如果前后缀是文本、复选框,单选框,就给前缀后缀所在的span(该span位于input的前面或者后面),添加类:.input-group-addon;如果前后缀是按钮,就为按钮所在的span添加.input-group-btn;如果前后缀是下拉菜单,就为下拉菜单的外围div添加.input-group-btn.

    4.所有的<input><select><area>添加.form-control ,<label>不用添加

    5,如果要求所有元素内连,为form添加.form-inline;如果创建书评表单的布局,添加form-horizontal.

    6,可以给父元素(通常是包含label和input的div),添加has_warning,has_error,has_success来验证状态。

    6,input-lg,col-lg-*等可以控制表单相关标签的大小。

    四、bootstrap按钮

      按钮相关的类:

    1.基本类:

    .btn

    2.按钮样式类:

    .btn-default;.btn-primary;.btn-success;.btn-info;.btn-warning;.btn-danger;.btn-link

    3.按钮大小类:

    .btn-lg;.btn-sm;.btn-xs;.btn-block;

    4.按钮状态类:

    .active;.disabled

    五、bootstrap图片

      图片样式:

    .img-rounded;.img-circle;.img-thumbnail;.img-responsive

    六、bootstrap辅助类

    1.背景相关类:

    .bg-primary;.bg-success;.bg-info;.bg-warning;.bg-danger

    2.位置相关类

    浮动:.pull-left;.pull-right;清除浮动:.clear-fix

    3.显示与隐藏:

    .show;.hidden;.sr-only;.sr-only-focusable;.text-hide;

    4.显示关闭按钮:.close,通常结合dismiss属性使用

    5.显示下拉式功能:.caret,通常结合dropdown-toggle类,data-toggle属性一起使用。

    七、bootstrap响应式工具

    visible-*-block;visible-*-inline;visible-*-inline-block;其中*可以为xs,sm,md,lg

  • 相关阅读:
    NAT和PAT
    谷歌浏览器如何正确离线网页
    安全
    VLAN
    交换
    动态路由
    静态路由
    配置Cisco网络设备
    导数表和基本积分表
    HNOI/AHOI2018题解
  • 原文地址:https://www.cnblogs.com/bobodeboke/p/4502725.html
Copyright © 2011-2022 走看看