bootstrap定义的标签

  • Post author:
  • Post category:其他


定义标记内容

<mark></mark>

定义删除的文本和无用文本

/*被删除*/
<del></del>

/*无用*/
<s></s>

插入文本和带下划线的文本

/插入/
<ins></ins>

/下划线/
<u></u>

小号文本,文字为父容器文字大小的85%

<small></small>
或者
<div class=".small"></div>

对齐

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

改变大小写

/小写/
<p class="text-lowercase">Lowercased text.</p>
/全大写/
<p class="text-uppercase">Uppercased text.</p>
/首字母大写/
<p class="text-capitalize">Capitalized text.</p>

引用还可以这样?没错

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

列表什么的都没什么变化,看dl,使用下列代码会将dl变成左边是dt,右边是dd;

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl

用户输入的信息和内联代码

<code>&lt;code&lt;</code>
<kbd></kbd>

bootstrap为我们定义了表格样式,使用以下代码可以添加表格

/基础表格/
<table class="table"></table>
/条纹表格/
<table class="table-striped"></table>
/带边框的表格/
<table class="table-bordered"></table>
/悬停变色表格/
<table class="table-hover"></table>
/紧缩表格/(框架内设的padding会减半)
<table class="table-condensed"></table

我们还能通过状态类可以改变单元格或者行的颜色

/鼠标悬停在行或单元格上设置的颜色/
<tr class="active"></tr>

/成功或积极的动作/
<tr class="success"></tr>

/标识普通的提示信息或动作/
<tr class="info"></tr>

/标识警告/
<tr class="warning"></tr>

/危险或带来负面影响/
<tr class="danger"></tr>

表单内容

在bootstrap v3的中文文档中,提供给我们了一个这样的实例

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox">check again
    </label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

我们可以对整个表单设置

form-inline

来使整个内容表现为inline-block级别的控件,并且原表单中他的

width=100%

可以根据我们的需要去手动设置.

input输入控件要求我们在前面加上label标签,以便屏幕阅读器正确识别,对于form-inline的表单,可以通过对label设置

class="sr-only"

来隐藏label内容

我们还能通过栅格布局和表单类

form-horizontal

来设置成水平排列的表单;下面贴一个v3拷过来的代码

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

文本域加入

form-control

类可以添加框架编写的样式

<textarea class="form-control"></textarea>

表单的checkbox和radio,可以同时对他们的input设置disabled和对他们的父元素设置disabled类使得文字也不可选.

<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

内联单选和多选框是对其设置checkbox-inline或radio-inline类

<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 选项1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 选项2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 选项3
</label>

在Bootstrap中,若想显示一行纯文本例如p标签,他的高度和label中的高度是不一致的,若想要一致可以给p标签添加一个

form-control-static

有时候我们会用fieldset来编写一段表单,对于fieldset这个标签,bootstrap添加了一个disabled类来禁用fieldset中的一切表单元素来和页面交互;

bootstrap提供了

has-warning


has-error


has-success

类添加到这些控件的父元素同时还给予了

has-feedback

方法提供额外的图标

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div

bootstrap提供了

form-group-lg



form-group-sm

类来帮助我们改变控件的高度;还可以通过

col-xx-x

来改变长度

<div class="form-group form-group-lg">
//
<div class="col-xs-2">



版权声明:本文为Mccree1997原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。