1、表单

基本格式,实现基本的表单样式
    <form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">电子邮件</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="请输入您的电子邮件">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" placeholder="请输入您的密码">
</div>
</div>
</form>

注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式。支持的输入框控件包括:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
表单合组,前后增加片段
    <form class="form-horizontal">
<div class="form-group">
<label class="col-sm-6 control-label">电子邮件</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="请输入您的电子邮件">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">密码</label>
<div class="col-sm-10">
<div class="input-group">
<div class="input-group-addon">¥</div>
<input type="password" class="form-control" placeholder="请输入您的密码">
<div class="input-group-addon">.00</div>
</div> </div>
</div>
</form>

校验状态
has-error 错误状态
has-success 成功状态
has-warning 警告状态
    <form class="form-horizontal">
<div class="form-group has-error">
<label class="col-sm-6 control-label">电子邮件</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="请输入您的电子邮件">
</div>
</div> <div class="form-group has-warning">
<label class="col-sm-6 control-label">电子fff</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="请输入您的电子邮件">
</div>
</div> <div class="form-group has-success">
<label class="col-sm-4 control-label">密码</label>
<div class="col-sm-10">
<div class="input-group">
<div class="input-group-addon">¥</div>
<input type="password" class="form-control" placeholder="请输入您的密码">
<div class="input-group-addon">.00</div>
</div> </div>
</div>
</form>

添加额外的图标,文本框右侧内置文本图标
    <div class="form-group has-feedback">
<label>电子邮件</label> <input type="email" class="form-control">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

除了 glyphicon-ok 外,还有几个如下表:样式说明
glyphicon-ok 成功状态
glyphicon-warning-sign 警告状态
glyphicon-remove 错误状态
 
复选框和单选框

<!--  设置复选框 -->
<div class="checkbox">
<label> <input type="checkbox">体育 </label>
</div>
<div class="checkbox">
<label> <input type="checkbox">音乐 </label>
</div> <!-- 设置禁用的复选框 -->
<div class="checkbox disabled">
<label> <input type="checkbox" disabled>音乐 </label>
</div> <!-- 设置内联一行显示的复选框 -->
<label class="checkbox-inline"> <input type="checkbox">体育</label>
<label class="checkbox-inline disabled"> <input type="checkbox" disabled>音乐 </label> <!--设置单选框 -->
<div class="radio">
<label> <input type="radio" name="sex" disabled>男 </label>
</div>

下拉列表
<!--     设置下拉列表 -->
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

2、图片

图片形状,三种形状

      <!--圆角 圆形  缩略图  -->
<img src="Bootstrap/img/1.jpg" alt="图片" class="img-rounded">
<img src="Bootstrap/img/2.jpg" alt="图片" class="img-circle">
<img src="Bootstrap/img/3.jpg" alt="图片" class="img-thumbnail">
<!-- //响应式图片 -->
<img src="Bootstrap/img/4.jpg" alt="图片" class="img-responsive">

Bootstrap(4) 表单和图片的更多相关文章

  1. bootstrap之表单和图片

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 第二百三十四节,Bootstrap表单和图片

    Bootstrap表单和图片 学习要点: 1.表单 2.图片 本节课我们主要学习一下 Bootstrap 表单和图片功能,通过内置的 CSS 定义,显示各 种丰富的效果. 一.表单 Bootstrap ...

  3. BootStrap 智能表单系列 九 表单图片上传的支持

    本章介绍如何在生成表单后,可以支持上传图片后可以及时预览图片 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/maste ...

  4. bootstrap 智能表单 demo示例

    1.基本配置,支持的元素类型 2.自动布局 3.自定义布局 4.自定义表单 5.数据绑定 6.带验证的表单 7.智能搜索 8.级联下拉 9.图片上传 图片有点大了,屏幕不够大的话可能看的不习惯,没事 ...

  5. bootstrap课程6 bootstrap的表单注意事项有哪些

    bootstrap课程6 bootstrap的表单注意事项有哪些 一.总结 一句话总结: 1.bootstrap中的表单中的每一项是什么样的形式? div.form-group>label +i ...

  6. Bootstrap之表单控件状态

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

  7. BootStrap 智能表单系列 首页 (持续更新中...)

    背景:本码农.NET后端工程师,在项目开发中发现写了很多重复的代码, 于是自己整了一套根据配置来生成form表单的插件,针对表单的改动仅需要修改配置的json即可 使用中发现还是蛮实用的,于是开源出来 ...

  8. BootStrap 智能表单系列 十一 级联下拉的支持

    像省市县选择的这种,但凡是个人肯定都见过,实现方式有很多种 1.有在第一级选择的时候去加载或者从本地对象中拿第一级对应的数据源显示到列表中,第二级以此类推 2.也有将所有的项都加载到select中,然 ...

  9. BootStrap 智能表单系列 十 自动完成组件的支持

    web开发中,肯定遇到像百度.google这种搜索的功能吧,那智能表单中的自动完成可以做什么呢,下面来揭晓: 1.包含像google.百度等类似的简单搜索 2.复杂结构的支持,比如说 输入产品编号,需 ...

随机推荐

  1. kvm配置USB直通

    参照:https://www.linuxidc.com/Linux/2014-12/110919.htm WebVirMgr界面是没有直接的途径了,只能靠修改xml文件,在<device> ...

  2. [namespace]PHP命名空间的使用基础

    -------------------------------------------------------------------------------------------------- 一 ...

  3. vscode 不显示指定后缀名pyc文件

    不显示python生成的pyc文件 不显示java eclipse编辑器生成的.metadata生成的文件夹 py文件执行后会生成.pyc文件,会影响侧边栏的使用,可以通过如下设置隐藏.pyc等中间文 ...

  4. 【原创】利用Office宏实现powershell payload远控

    本文将演示使用Veil-Evasion生成远控所需要的payload以及监听器,然后使用MacroShop生成payload 相关的VBA代码,最后演示将VBA代码写入.doc文本文档的宏中. 环境: ...

  5. 21.struts-Action配置.md

    目录 1.Action开发方式 2.通配符 访问地址 [toc] 3.常量 后缀 指定默认编码集,作用于HttpServletRequest的setCharacterEncoding方法和freema ...

  6. 16.监听器-基础.md

    目录 概念 监听器功能 监听创建或销毁 监听属性变化 session相关监听 概念 实现特定接口的普通java类 *监听特定对象的创建.销毁或属性变化: 对象自己创建自己用:无需监听 对象别人创建自己 ...

  7. base64 压缩图片

    //图片处理 afterimg(err, photos) { var _this = this; if(err && err != null && err != '') ...

  8. vue 路由meta作用及在路由中添加props作用

    vue路由meta:有利于我们处理seo的东西,我们在html中加入meta标签,就是有利于处理seo的东西,搜索引擎 在路由中传参是通过/:id传参代码如下: import Login from ' ...

  9. webstocket 聊天

    /** * 初始化socket **/ function initSocket(index_host){//端口号 if( !window.WebSocket ){ console.log(" ...

  10. 02_数据库基础之(二)sql语句入门

    1.基本增删改查操作 #一. 数据类型 常用的3中 # .字符串 例如:你的名字 我是中国人 在数据库中要使用 ‘’引起来 '苹果手机' # .整数类型 例如: 你的年龄 ,办公室的人数 个 ,直接使 ...