基础表单
 
<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>

bootstrap CSS表单、按钮和字体图标的更多相关文章

  1. bootstrap -- css -- 表单控件

    若干css样式 .form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14p ...

  2. Bootstrap CSS 表单

    表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列 ...

  3. Bootstrap之表单控件状态

    Bootstrap中的表单控件状态主要有三种:焦点状态,禁用状态,验证状态.   一.焦点状态:该状态告诉用户可输入或选择东西 焦点状态通过伪类“:focus”以实现. bootstrap.css相应 ...

  4. CSS表单设计

    今天我们开始学习<十天学会web标准(div+css)>的css表单设计,包含以下内容和知识点: 改变文本框和文本域样式 用图片美化按钮 改变下拉列表样式 用label标签提升用户体验 一 ...

  5. js 节点 document html css 表单节点操作

    js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...

  6. BootStrap 智能表单系列 六 表单数据绑定(编辑页面的数据绑定)

    本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面) 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartF ...

  7. BootStrap 智能表单系列 七 验证的支持

    但凡是涉及到用户编辑信息然后保存的页面,都涉及到一个数据是否符合要求的检查,需要客服端和服务器端的校验的问题: 客服端的校验主要是为了提高用户体验,而服务器端的校验为了数据的合格性 该插件也为您支持到 ...

  8. BootStrap 智能表单系列 四 表单布局介绍

    表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是 ...

  9. BootStrap 智能表单系列 三 分块表单配置的介绍

    相信广大博友肯定碰到过一个编辑页面分了很多块的情况,智能表单插件已经为您支持了这种情况, 代码如下(链接地址:https://github.com/xiexingen/Bootstrap-SmartF ...

随机推荐

  1. mysql 查询表死锁 和结束死锁的表步骤以及锁表等级

    1.查询是否锁表show OPEN TABLES where In_use > 0; 2.查询进程 show processlist  查询到相对应的进程===然后 kill    id 补充: ...

  2. sublime text3 3176激活

    更改hosts sudo vim /etc/hosts 127.0.0.1 www.sublimetext.com 127.0.0.1 license.sublimehq.com 输入激活码 ---- ...

  3. 2013级新生程序设计基础竞赛-正式赛 F 异或最大值 解题报告

    F - 异或最大值 Time Limit: 2000/1000MS (Java/Others)      Memory Limit: 128000/64000KB (Java/Others) Subm ...

  4. boost之timer

    1. timer类实现 #pragma once #include <ctime> #include <limits> class timer { public: timer( ...

  5. [shell test] multiple conditions

      Classic technique (escape metacharacters): if[ \( $g -eq 1-a "$c"="123" \) -o ...

  6. Appium+python自动化

    名称 链接地址 Appium+python自动化8-Appium Python API(上) http://mp.weixin.qq.com/s/WvpT5oRrYY22avI95FuypQ Appi ...

  7. zepto.js 总结

    zepto.js 中的注意事项 ,详见:http://www.cnblogs.com/samwu/archive/2013/06/06/3121649.html zepto被弃用的原因:详见:http ...

  8. Spring之配置文件加载方式

    spring在org.springframework.core.io包中提供了多种配置文件加载方式.无论是XML.URL还是文件,都有很好的支持.比如基于URL的UrlResource.基于输入流的I ...

  9. 算法练习--LeetCode--17. Letter Combinations of a Phone Number

    Letter Combinations of a Phone NumberMedium Given a string containing digits from 2-9 inclusive, ret ...

  10. Java简单高精度合集

    第一个Java的算法程序.记得可以使用Alt+'/'自动补全sysout和main之类的. BigInteger在java.math.BigInteger中. import java.math.Big ...