第四章之BootStrap表单与图片


Posted in Javascript onApril 25, 2016

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

学习要点:

1.表单
2.图片

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

一.表单

Bootstrap 提供了一些丰富的表单样式供开发者使用。

1.基本格式

//实现基本的表单样式
<form>
<div class="form-group">


<label>电子邮件</label>


<input type="email" class="form-control" placeholder="请输入您的电子邮件">

</div>

<div class="form-group">


<label>密码</label>


<input type="password" class="form-control" placeholder="请输入您的密码">

</div>
</form>

注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式。支持的输入框控件包括:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

2.内联表单

//让表单左对齐浮动,并表现为 inline-block 内联块结构
<form class="form-inline">

注:当小于 768px,会恢复独占样式

3.表单合组

//前后增加片段
<div class="input-group">
<div class="input-group-addon">¥</div>

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

<div class="input-group-addon">.00</div>
</div>

4.水平排列

//让表单内的元素保持水平排列
<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>
</form>

注:这里用到了 col-sm 栅格系统,后面章节会重点讲解,而 control-label 表示和父元素样式同步。

5.复选框和单选框

//设置复选框,在一行
<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 disabled">
<label> <input type="radio" name="sex" disabled>男</label>
</div>

6.下拉列表

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

7.校验状态

//设置为错误状态
<div class="form-group has-error">

注:还有其他状态如下:

样式说明

has-error错误状态

has-success成功状态

has-warning警告状态
//label 标签同步相应状态
<label class="control-label">Input with success</label>

8.添加额外的图标

//文本框右侧内置文本图标
<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错误状态

9.控制尺寸

//从大到小
<input type="password" class="form-control input-lg">
<input type="password" class="form-control">
<input type="password" class="form-control input-sm">

注:也可以设置父元素 form-group-lg、form-group-sm,来调整。

二.图片

Bootstrap 提供了一些丰富的图片样式供开发者使用。

1.图片形状

//三种形状
<img src="img/pic.png" alt="图片" class="img-rounded">
<img src="img/pic.png" alt="图片" class="img-circle">
<img src="img/pic.png" alt="图片" class="img-thumbnail"> 
//响应式图片
<img src="img/pic.png" alt="图片" class="img-responsive">

以上所述是小编给大家介绍的Bootstrap表单与图片的相关内容,希望对大家有所帮助!

Javascript 相关文章推荐
用js判断用户浏览器是否是XP SP2的IE6
Mar 08 Javascript
jQuery $.data()方法使用注意细节
Dec 31 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
微信小程序实现长按删除图片的示例
May 18 Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
vue prop属性传值与传引用示例
Nov 13 Javascript
js实现旋转木马轮播图效果
Jan 10 Javascript
vue2.x数组劫持原理的实现
Apr 19 Javascript
第五章之BootStrap 栅格系统
Apr 25 #Javascript
详解Bootstrap插件
Apr 25 #Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 #Javascript
第六章之辅组类与响应式工具
Apr 25 #Javascript
第七章之菜单按钮图标组件
Apr 25 #Javascript
第九章之路径分页标签与徽章组件
Apr 25 #Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 #Javascript
You might like
东方红 - 来复式再生机的修复
2021/03/02 无线电
php四种基础算法代码实例
2013/10/29 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
js保存当前路径(cookies记录)
2010/12/14 Javascript
javascript 保存文件到本地实现方法
2012/11/29 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
如何制作幻灯片(代码分享)
2017/01/06 Javascript
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
webpack3.0升级4.0的方法步骤
2020/04/02 Javascript
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
关于Python 3中print函数的换行详解
2017/08/08 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
日期和时间问题
2015/01/04 面试题
应届生个人求职信模板
2013/11/26 职场文书
英文自荐信
2013/12/15 职场文书
C++程序员求职信范文
2014/04/14 职场文书
Python中的datetime包与time包包和模块详情
2022/02/28 Python