bootstrap CSS表单、按钮和字体图标

基础表单

 

<form role="form">

    <div class="form-group">

        <label>email</label>

        <input type="email" class="form-control" placeholder="user">

    </div>

</form>

内联表单

 

<form role="form" class="form-inline">

    <div class="form-group">

        <label>email</label>

        <input type="email" class="form-control" placeholder="user">

    </div>

    <div class="form-group">

        <lable>密码</lable>

        <input type="password" class="form-control" placeholder="password">

    </div>

    <div class="form-group">

        <lable class="sr-only">选择文件</lable>

        <input type="file">

        <p class="help-block">选择你需要上传的文件</p>

    </div>

</form>

水平排列的表单

 

<form role="form" class="form-horizontal">

    <div class="form-group">

        <lable class="col-sm-2 control-label">Email</lable>

        <div class="col-sm-10">

            <input type="email" class="form-control" placeholder="Email">

        </div>

    </div>

    <div class="form-group">

        <lable class="col-sm-2 control-label">password</lable>

        <div class="col-sm-10">

            <input type="password" class="form-control" placeholder="password">

        </div>

    </div>

表单所支持的控件

 

<input type="text" class="form-control">

<textarea class="form-control" rows="5">hello</textarea>

 

复选框

<div class="checkbox">

     <label>

          <input type="checkbox" value="水果">

          水果

     </label>

</div>

<div class="checkbox">

     <label>

          <input type="checkbox" value="蔬菜">

          蔬菜

     </label>

</div>

不可使用标签

 

<fieldset disabled>

 

</fieldset>

只读的

 

<input class="form-control" type="text" readonly>

不同的状态

 

<form role="form">

     <div class="form-group has-warning">

          <label>用户名</label>

          <input class="form-control" type="text">

     </div>

     <div class="form-group has-success">

          <label>用户名</label>

          <input class="form-control" type="text">

     </div>

     <div class="form-group has-error">

          <label>用户名</label>

          <input class="form-control" type="text">

     </div>  

</form>

通过删格系统进行控制大小，位置

 

bootstrop按钮

 

<div class="container">

    <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-link">link</button>

    <button type="button" class="btn btn-danger">dangers</button>

</div>

调整大小

btn-lg    btn-sm    btn-xs

充满父级容器

btn-block

激活状态

active

禁用状态

disabled="disabled"

 

建议使用button

 

bootstrop图片

把图片宽度设为最大化，100%  高度为自适应，图片可能会失真

 

<img src="" alt="" class="img-circle">

<img src="" alt="" class="img-rounded">

<img src="" alt="" class="img-thumbnail">

 

字体图标

基类和字体图标子类

基于一个span标签

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