第四章之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 相关文章推荐
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
Json对象与Json字符串互转(4种转换方式)
Mar 27 Javascript
固定背景实现的背景滚动特效示例分享
May 19 Javascript
动态加载js、css等文件跨iframe实现
Feb 24 Javascript
详解js闭包
Sep 02 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 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
php 删除数组元素
2009/01/16 PHP
php 安全过滤函数代码
2011/05/07 PHP
PHP迭代器的内部执行过程详解
2013/11/12 PHP
php实现的递归提成方案实例
2015/11/14 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
PNG背景在不同浏览器下的应用
2009/06/22 Javascript
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
简单谈谈JS中的正则表达式
2017/09/11 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
[02:03]完美世界DOTA2联赛10月30日赛事集锦
2020/10/31 DOTA
python控制台显示时钟的示例
2014/02/24 Python
Python机器学习之决策树算法
2017/12/22 Python
Python 实现大整数乘法算法的示例代码
2019/09/17 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
python实现交并比IOU教程
2020/04/16 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
展会邀请函范文
2014/01/26 职场文书
信息服务专业毕业生求职信
2014/03/02 职场文书
如何写辞职信
2015/05/13 职场文书
公司管理制度范本
2015/08/03 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
Vue的过滤器你真了解吗
2022/02/24 Vue.js