程序博客网 > java 调用wireshark

Bootstrap 3.3.2 所有样式

来源：互联网 发布：java 调用wireshark 编辑：程序博客网 时间：2024/04/29 14:15

http://classfoo.com/ccby/article/KwuGbSY

响应式

  • 容器

    1. .container
    1. .container-fluid


    行

    1. .row


    列

    指定宽度及响应断点

    1. .col-xs-*
    2. .col-sm-*
    3. .col-md-*
    4. .col-lg-*

    指定缩进

    1. .col-xs-offset-*
    2. .col-sm-offset-*
    3. .col-md-offset-*
    4. .col-lg-offset-*

    快速重排序（左右对调）

    1. # 推到右边
    2. .col-xs-push-*
    3. .col-sm-push-*
    4. .col-md-push-*
    5. .col-lg-push-*
    6. # 拉到左边
    7. .col-xs-pull-*
    8. .col-sm-pull-*
    9. .col-md-pull-*
    10. .col-lg-pull-*

    重置

    1. .clearfix


    显示

    1. .visible-xs-*
    2. .visible-sm-*
    3. .visible-md-*
    4. .visible-lg-*

    * 可以为：

    Group of classesCSS display.visible-*-blockdisplay: block;.visible-*-inlinedisplay: inline;.visible-*-inline-blockdisplay: inline-block;


    隐藏

    1. .hidden-xs
    2. .hidden-sm
    3. .hidden-md
    4. .hidden-lg


    打印

    1. .visible-print-block
    2. .visible-print-inline
    3. .visible-print-inline-block
    4. .hidden-print

  • 文本

    标题

    1. <h1>h1. Bootstrap heading</h1>
    2. <h2>h2. Bootstrap heading</h2>
    3. <h3>h3. Bootstrap heading</h3>
    4. <h4>h4. Bootstrap heading</h4>
    5. <h5>h5. Bootstrap heading</h5>
    6. <h6>h6. Bootstrap heading</h6>

    副标题

    1. <small></small>
    2. # 或者
    3. .small


    正文

    突出段落

    1. .lead
    2. # 可以这样用
    3. <p class="lead">...</p>

    标记文本

    1. <mark>
    2. # 可以这样用:
    3. You can use the mark tag to <mark>highlight</mark> text.

    标记删除

    1. <del>
    2. # 可以这样用:
    3. <del>This line of text is meant to be treated as deleted text.</del>
    1. <s>
    2. # 可以这样用:
    3. <s>This line of text is meant to be treated as no longer accurate.</s>

    标记插入

    1. <ins>
    2. # 可以这样用:
    3. <ins>This line of text is meant to be treated as an addition to the document.</ins>

    下划文本

    1. <u>
    2. # 可以这样用:
    3. <u>This line of text will render as underlined</u>

    弱化文本

    1. <small></small>
      # 或者
      .small

    强化文本

    1. <strong>rendered as bold text</strong>

    倾斜文本

    1. <em>rendered as italicized text</em>


    对齐

    1. <p class="text-left">Left aligned text.</p>
    2. <p class="text-center">Center aligned text.</p>
    3. <p class="text-right">Right aligned text.</p>
    4. <p class="text-justify">Justified text.</p>
    5. <p class="text-nowrap">No wrap text.</p>


    改变大小写

    1. <p class="text-lowercase">Lowercased text.</p>
    2. <p class="text-uppercase">Uppercased text.</p>
    3. <p class="text-capitalize">Capitalized text.</p>


    引用

    1. <blockquote>
    2.   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    3.   <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    4. </blockquote>
    1. # 反转
    2. .blockquote-reverse


    代码

    内联

    1. For example, <code>&lt;section&gt;</code> should be wrapped as inline.

    键盘

    1. To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
    2. To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

    基本块

    1. <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

    滚动条

    1. .pre-scrollable

    变量

    1. <var>y</var> = <var>m</var><var>x</var> + <var>b</var>


    样板

    1. <samp>This text is meant to be treated as sample output from a computer program.</samp>


    属性颜色

    1. <p class="text-muted">...</p>
    2. <p class="text-primary">...</p>
    3. <p class="text-success">...</p>
    4. <p class="text-info">...</p>
    5. <p class="text-warning">...</p>
    6. <p class="text-danger">...</p>


    纹理背景

    1. <p class="bg-primary">...</p>
    2. <p class="bg-success">...</p>
    3. <p class="bg-info">...</p>
    4. <p class="bg-warning">...</p>
    5. <p class="bg-danger">...</p>

  • 列表

    有序、无序、无样式

    1. <ul>
    2.   <li>...</li>
    3. </ul>
    1. <ol>
    2.   <li>...</li>
    3. </ol>
    1. <ul class="list-unstyled">
    2.   <li>...</li>
    3. </ul>


    inline 显示（显示在一行上）

    1. <ul class="list-inline">
    2.   <li>...</li>
    3. </ul>


    介绍，垂直显示

    1. <dl>
    2.   <dt>...</dt>
    3.   <dd>...</dd>
    4. </dl>


    介绍，水平显示

    1. <dl class="dl-horizontal">
    2.   <dt>...</dt>
    3.   <dd>...</dd>
    4. </dl>

  • 表格

    普通

    1. <table class="table">
    2.   ...
    3. </table>


    纹理

    1. <table class="table table-striped">
    2.   ...
    3. </table>


    边框

    1. <table class="table table-bordered">
    2.   ...
    3. </table>


    鼠标划过

    1. <table class="table table-hover">
    2.   ...
    3. </table>


    密集

    1. <table class="table table-condensed">
    2.   ...
    3. </table>


    纹理类

    .activeApplies the hover color to a particular row or cell.successIndicates a successful or positive action.infoIndicates a neutral informative change or action.warningIndicates a warning that might need attention.dangerIndicates a dangerous or potentially negative action


    响应式

    1. <div class="table-responsive">
    2.   <table class="table">
    3.     ...
    4.   </table>
    5. </div>

  • 表单

    普通表格

    1. <form role="form">
    2.   <div class="form-group">
    3.     <label for="exampleInputEmail1">Email address</label>
    4.     <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    5.   </div>
    6.   <div class="form-group">
    7.     <label for="exampleInputPassword1">Password</label>
    8.     <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    9.   </div>
    10.   <div class="form-group">
    11.     <label for="exampleInputFile">File input</label>
    12.     <input type="file" id="exampleInputFile">
    13.     <p class="help-block">Example block-level help text here.</p>
    14.   </div>
    15.   <div class="checkbox">
    16.     <label>
    17.       <input type="checkbox"> Check me out
    18.     </label>
    19.   </div>
    20.   <button type="submit" class="btn btn-default">Submit</button>
    21. </form>


    内联表格

    1. .form-inline
    1. <form class="form-inline" role="form">
    2.   <div class="form-group">
    3.     <div class="input-group">
    4.       <label class="sr-only" for="exampleInputEmail2">Email address</label>
    5.       <div class="input-group-addon">@</div>
    6.       <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
    7.     </div>
    8.   </div>
    9.   <div class="form-group">
    10.     <label class="sr-only" for="exampleInputPassword2">Password</label>
    11.     <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
    12.   </div>
    13.   <div class="checkbox">
    14.     <label>
    15.       <input type="checkbox"> Remember me
    16.     </label>
    17.   </div>
    18.   <button type="submit" class="btn btn-default">Sign in</button>
    19. </form>


    水平表格

    1. <form class="form-horizontal" role="form">
    2.   <div class="form-group">
    3.     <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    4.     <div class="col-sm-10">
    5.       <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    6.     </div>
    7.   </div>
    8.   <div class="form-group">
    9.     <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    10.     <div class="col-sm-10">
    11.       <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    12.     </div>
    13.   </div>
    14.   <div class="form-group">
    15.     <div class="col-sm-offset-2 col-sm-10">
    16.       <div class="checkbox">
    17.         <label>
    18.           <input type="checkbox"> Remember me
    19.         </label>
    20.       </div>
    21.     </div>
    22.   </div>
    23.   <div class="form-group">
    24.     <div class="col-sm-offset-2 col-sm-10">
    25.       <button type="submit" class="btn btn-default">Sign in</button>
    26.     </div>
    27.   </div>
    28. </form>


    输入框类型支持

    1. text
    2. password
    3. datetime
    4. datetime-local
    5. date
    6. month
    7. time
    8. week
    9. number
    10. email
    11. url
    12. search
    13. tel
    14. color


    文本框

    1. <textarea class="form-control" rows="3"></textarea>


    单选、多选

    1. <div class="checkbox">
    2.   <label>
    3.     <input type="checkbox" value="">
    4.     Option one is this and that&mdash;be sure to include why it's great
    5.   </label>
    6. </div>
    7. <div class="checkbox disabled">
    8.   <label>
    9.     <input type="checkbox" value="" disabled>
    10.     Option two is disabled
    11.   </label>
    12. </div>
    13.  
    14. <div class="radio">
    15.   <label>
    16.     <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    17.     Option one is this and that&mdash;be sure to include why it's great
    18.   </label>
    19. </div>
    20. <div class="radio">
    21.   <label>
    22.     <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    23.     Option two can be something else and selecting it will deselect option one
    24.   </label>
    25. </div>
    26. <div class="radio disabled">
    27.   <label>
    28.     <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    29.     Option three is disabled
    30.   </label>
    31. </div>


    内联单选、多选

    1. .checkbox-inline
    1. .radio-inline
    1. <label class="checkbox-inline">
    2.   <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
    3. </label>
    4. <label class="checkbox-inline">
    5.   <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
    6. </label>
    7. <label class="checkbox-inline">
    8.   <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
    9. </label>
    10.  
    11. <label class="radio-inline">
    12.   <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
    13. </label>
    14. <label class="radio-inline">
    15.   <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
    16. </label>
    17. <label class="radio-inline">
    18.   <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
    19. </label>


    选择下拉框

    单选

    1. <select class="form-control">
    2.   <option>1</option>
    3.   <option>2</option>
    4.   <option>3</option>
    5.   <option>4</option>
    6.   <option>5</option>
    7. </select>

    多选

    1. <select multiple class="form-control">
    2.   <option>1</option>
    3.   <option>2</option>
    4.   <option>3</option>
    5.   <option>4</option>
    6.   <option>5</option>
    7. </select>


    静态控件

    1. .form-control-static
    1. <form class="form-horizontal" role="form">
    2.   <div class="form-group">
    3.     <label class="col-sm-2 control-label">Email</label>
    4.     <div class="col-sm-10">
    5.       <p class="form-control-static">email@example.com</p>
    6.     </div>
    7.   </div>
    8.   <div class="form-group">
    9.     <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    10.     <div class="col-sm-10">
    11.       <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    12.     </div>
    13.   </div>
    14. </form>


    聚集状态

    1. :focus # js 设置获得焦点


    失效状态

    失效单个控件

    1. <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

    失效控件集

    1. <form role="form">
    2.   <fieldset disabled>
    3.     <div class="form-group">
    4.       <label for="disabledTextInput">Disabled input</label>
    5.       <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    6.     </div>
    7.     <div class="form-group">
    8.       <label for="disabledSelect">Disabled select menu</label>
    9.       <select id="disabledSelect" class="form-control">
    10.         <option>Disabled select</option>
    11.       </select>
    12.     </div>
    13.     <div class="checkbox">
    14.       <label>
    15.         <input type="checkbox"> Can't check this
    16.       </label>
    17.     </div>
    18.     <button type="submit" class="btn btn-primary">Submit</button>
    19.   </fieldset>
    20. </form>


    只读状态

    1. <input class="form-control" type="text" placeholder="Readonly input here…" readonly>


    有效性状态

    1. .has-warning
    1. .has-error
    1. .has-success


    有效性图标

    1. .has-feedback


    控制高度

    1. .input-sm
    1. .input-lg


    控制宽度

    1. .form-group-lg
    1. .form-group-sm

    用列属性控制宽度

    1. <div class="row">
    2.   <div class="col-xs-2">
    3.     <input type="text" class="form-control" placeholder=".col-xs-2">
    4.   </div>
    5.   <div class="col-xs-3">
    6.     <input type="text" class="form-control" placeholder=".col-xs-3">
    7.   </div>
    8.   <div class="col-xs-4">
    9.     <input type="text" class="form-control" placeholder=".col-xs-4">
    10.   </div>
    11. </div>


    帮助文档

    1. <label class="sr-only" for="inputHelpBlock">Input with help text</label>
    2. <input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
    3. ...
    4. <span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

  • 按钮

    选项（影响颜色）

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


    高度

    1. .btn-lg
    1. .btn-sm
    1. .btn-xs


    宽度

    1. .btn-block


    活跃状态

    1. .active # 样式
    1. disabled # 属性

  • 图片

    响应式

    1. .img-responsive
    1. <img src="..." class="img-responsive" alt="Responsive image">


    形状

    1. <img src="..." alt="..." class="img-rounded">
    2. <img src="..." alt="..." class="img-circle">
    3. <img src="..." alt="..." class="img-thumbnail">

  • 帮助类

    关闭按钮

    1. <button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>


    下拉按钮

    1. <span class="caret"></span>


    快速浮动

    1. <div class="pull-left">...</div>
    2. <div class="pull-right">...</div>


    居中内容块

    1. <div class="center-block">...</div>


    清除浮动属性

    1. <!-- Usage as a class -->
    2. <div class="clearfix">...</div>


    隐藏及显示内容

    1. <div class="show">...</div>
    2. <div class="hidden">...</div>


    屏幕阅读器及键盘导航内容

    1. <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>


    图片占用符

    1. <h1 class="text-hide">Custom heading</h1>

  • 小图标（Icon）

    1. <span class="glyphicon glyphicon-search" aria-hidden="true"></span>

0 0
java 调用wireshark java 调用wireshark
原创粉丝点击
热门IT博客
sql添加字段语句sql添加字段语句
淘宝放心淘加入不了淘宝放心淘加入不了
按钮点击事件调用js
开淘宝能赚多少钱
类似于黑科云的软件
linux如何搭建https
投资域名需要解析吗
tensorflow哪个版本好
微信自动营销软件
着我汉家衣裳 知乎
unity3d drawtexture
女生多的学校 知乎
淘宝美工工作辛苦吗
spss数据缺失值处理
java 转义双引号
淘宝客服工作计划
考勤机导出数据excel
我的世界java更新
java字符串相似度算法
n卡驱动游戏优化
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 钢铁蒸汽与火焰 钢铁蒸汽火焰 火焰山风景区 火焰纹章封印之剑 火焰纹章英雄 众人拾柴火焰高 火焰纹章风花雪月攻略 火焰山在哪里 火焰纹章觉醒 火焰纹章烈火 火焰纹章烈火之剑 肌肤下的火焰 吐鲁番火焰山 火焰纹章风花雪月挖角 齐天大圣火焰山 火焰纹章烈火之剑攻略 火焰豌豆射手 跳跃的火焰作品 火焰纹章封印之剑攻略 酒精火焰温度 齐天大圣之火焰山 怀旧服元素火焰 火焰图片素材 火焰卡通图片 火焰之地在哪 火焰之地怎么去 魔兽世界火焰之地 qq炫酷名字带火焰 心急火燎 火急火燎 烟熏火燎 火烧火燎 燎火小娇娘 火领主火燎耶 燎如观火 火燎耶 火燎 肚子里感觉火烧火燎 胃火烧火燎的怎么办 胃里火烧火燎的不舒服 烟熏火燎读音

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里