zoukankan      html  css  js  c++  java
  • bootstrap简单的过一遍


    注:.xxxx 表示类(class=xxxx)


    <h1>到<h6>均可使用。另外还提供了.h1到.h6的class

    .lead可以让段落突出显示

    <small>  其内的文本将被设置为父容器字体大小的85%

    <strong> 着重

    <em> 斜体

    对齐class:text-left ,text-center,text-right

    强调class: text-muted
            text-primary
            text-success
            text-info
            text-warning
            text-danger

    <abbr>:基本缩略语,.initialism 可以将其font-size设置的更小些

    <blockquote>:任何HTML裹在<blockquote>之中即可表现为引用
                 .pull-right 右对齐 .pull-left 左

    <cite>:

    <ol>或<ul>: .list-unstyled 移除了默认的list-style样式和左侧外边距的一组元素

    <dl><dt><dd>: .dl-horizontal可以让<dl>内短语及其描述排在一行

    <code>:在正文中通过<code>标签包裹内联样式的代码片段,为了正确的展示代码,注意将尖括号做转义处理。

    <pre>:多行代码可以使用<pre>标签。为了正确的展示代码,注意将尖括号做转义处理。


    表格相关########################################################

    <table>:.table-striped 增加斑马条纹样式
             .table-bordered为表格和其中的每个单元格增加边框
             .table-hover可以让<tbody>中的每一行响应鼠标悬停状态
         .table-condensed可以让表格更加紧凑,单元格中的内部(padding)均会减半。

    <thead>
    <tbody>
    <tr>
    <td>
    <th>
    <caption>:表格用途的描述和摘要

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


    将任何.table包裹在.table-responsive中即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于768px宽度时,水平滚动条消失。



    表单相关#################################################################
    .form-control:所有设置了.form-control的<input>、<textarea>和<select>元素都将被默认设置为 100%;。
    .form-group:将label和前面提到的这些控件包裹在.form-group中可以获得最好的排列。
    .form-inline:元素紧凑
    .sr-only:隐藏label
    .form-horizontal
    .checkbox-inline
    .radio-inline
    .form-control-static:将一行纯文本放置于label的同一行,为<p>元素添加.form-control-static即可

    disabled: 被禁用的输入框

    校验状态: .has-warning、.has-error或.has-success

    通过.input-lg之类的class可以为控件设置高度,通过.col-lg-*之类的class可以为控件设置宽度。

    .help-block 块级帮助文本

    按钮相关#############################################################

    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-link">链接</button>

    尺寸 .btn-lg、.btn-sm、.btn-xs

    .btn-block

    活动状态 active

    禁用状态 disabled


    工具class##############################################################



  • 相关阅读:
    中国软件外包IT公司最新排名
    DJ舞曲、音乐与爱好!
    linux论坛
    IBM P 系列小型机的控件面板功能~!(转用)
    JDBC Driver 驱动 For SQL 2008 Server /2005 /2000
    年报盘点:149家公司筹码大幅集中
    公式指标—精华
    观峰雨个人空间 2010 STOCK ADVICE !
    IntelliJ IDEA提示Cannot resolve symbol
    今天天变的好冷了~
  • 原文地址:https://www.cnblogs.com/dytl/p/3822966.html
Copyright © 2011-2022 走看看