第四章之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查找父节点的简单方法
Jun 28 Javascript
屏蔽script注入小例子
Nov 12 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
JQuery 使用attr方法实现下拉列表选中
Oct 13 Javascript
原生javascript实现addClass,removeClass,hasClass函数
Feb 25 Javascript
js实现select二级联动下拉菜单
Apr 17 Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
JS对日期操作封装代码实例
Nov 08 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 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环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
php中计算程序运行时间的类代码
2012/11/03 PHP
php生成图形(Libchart)实例
2013/11/06 PHP
javascript一点特殊用法
2008/05/28 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
从0开始学Vue
2016/10/27 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
跟老齐学Python之类的细节
2014/10/13 Python
Python实现二叉堆
2016/02/03 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
如何在python中实现随机选择
2019/11/02 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
params有什么用
2016/03/01 面试题
营销总经理的岗位职责
2013/12/15 职场文书
2014年幼儿园植树节活动方案
2014/03/02 职场文书
小学开学典礼主持词
2014/03/19 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
个性车贴标语
2014/06/24 职场文书
连锁超市项目计划书
2014/09/15 职场文书
工程质检员岗位职责
2015/04/08 职场文书
python 实现德洛内三角剖分的操作
2021/04/22 Python
使用HttpSessionListener监听器实战
2022/03/17 Java/Android
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏