BootStrap_03(表单、按钮、图片、辅助类)
哈喽,直接进入正题:今天内容是表单、按钮、图片、辅助类
一、表单
1.基本表单
a. class=”form-control”:可以给<input>、<textarea>、<select>元素设置宽度为100%
示例代码:
<form action="" method=""><label>用户名:</label><input type="text" class="form-control" /></form>
之前我们写在文本框前面写用户名 一直都是直接写字,在实际开发中一般用文本标签包起来例如 <label> <span> 标签
我们可以看到效果文本框的宽度占满了整行,下拉框的宽度也占满了整行
class=”form-group”:可以为<div>设置该属性。如果<div>中包含<label>和<input>表示为一组。层次会更清晰
示例代码:
<form action="" method=""><div class="form-group"><label>用户名:</label><input type="text" placeholder="请输入用户名" class="form-control" /></div><div class="form-group"><label>密码:</label><input type="text" class="form-control" /></div></form>
这个页面效果可能不是很明显
2.内联表单:class=”form-inline”
什么是内联表单呢,就是让我们的所有表单元素都在一行
<form action="" method=""><label>用户名:</label><input type="text" class="form-control" /><select class="form-control"><option value ="">北京</option></select></form>
刷新页面,我们可以看到效果,每一个元素都自动换行,总共占了四行。用内联表单我们再来看看
<form class="form-inline" action="" method=""><label>用户名:</label><input type="text" /><select ><option value ="">北京</option></select></form>
现在都显示在一行
3.表单组合
class=”input-group”、class=”input-group-addon”
表单组合就是把几个元素组合在一起,我们一起来看一下代码:
<div class="form-group"><label>工资:</label><input type="text" class="form-control" /></div>
现在的效果就是工资后面跟着一个文本框,如果我们先想在 文本框中的前面一部分来一个$美元符合。看一下怎么写:
<div class="form-group"><label>工资:</label><div class="input-group"><span class="input-group-addon">$</span><input type="text" class="form-control" /></div></div>
首先我们需要把$美元符合 和文本框组合在一起,所用用div把他们两个包括起来,给div设置属性:class=”input-group,表示把他们分为一组,给span设置属性:class=”input-group-addon”.这样就可以把他们组合在一起。刷新看一下效果,是不是漂亮多了
4.水平排列表单,设计到栅格
<form><div class="form-group"><label >用户名:</label><input type="text" class="form-control" /></div><div class="form-group"><label>密码:</label><input type="password" class="form-control" /></div></form>
现在这个表单的效果,每个元素占一行。假如现在我们需要让用户名和文本框一行
密码 和密码框一行。这个时候我们可以使用水平排列表单
示例代码:
<div class="container"><form class="form-horizontal"><div class="form-group"><label class="col-md-2 control-label" >用户名:</label><input class="col-md-10" type="text" class="form-control" /></div><div class="form-group"><label class=”col-md-2 control-label”>密码:</label><input class=”col-md-2 control-label” type="text" class="form-control" /></div></form></div>
这段代码对比上面的代码 在表单的外面多了div标签,在这里水平排列,需要给form表单设置属性:class=”form-horizontal” 表示水平。这个时候会出现一个效果,我们打的用户名,密码 文本显示不全,前面会有一个文字显示不出来。所以就需要我们之前讲到的固体容器。来显示出文本。<div class="container">
现在就可以再配合栅格系统来设置每行的文本和 文本框 占用的格子数量了、
<div class="form-group"><label class="col-md-2 control-label" >用户名:</label><input class="col-md-10" type="text" class="form-control" /></div>
这段代码表示:用户名文本占2个格子,文本框占10个格子,同前面讲到的栅格
control-label这句属性设置文本靠近文本框
5.多选框
注意:这里的语法格式,需要把input标签放在label标签中,为啥要这样写?咱们接下来详聊。
我们平常写多选框:<input type="checkbox"/>吃饭。想要选中必须要点吃饭文本前面的方框框才可以。点文本是没有选中效果的。我们再看把标签放在label中的效果
<label><input type="checkbox"/>吃饭</label>
哎,现在是不是点吃饭两个字也可以选中了。这就是为啥放在label中。
我们再来看一下Bootstrap中咋写:
<div class="checkbox"><label><input type="checkbox"/>吃饭</label></div><div class="checkbox"><label><input type="checkbox"/>睡觉</label></div><div class="checkbox"><label><input type="checkbox"/>打豆豆</label></div>
简单,至少在标签外面套了一层div,设置class属性为:checkbox。那么有什么效果呢?鼠标放上去是不是原来的鼠标箭头变成了 小手。这就是效果。
现在每一个选项都加了div,选项竖着排列。如果我们现在想让多选框横着排列,来看看该咋写:
<label class="checkbox checkbox-inline"><input type="checkbox" />吃饭</label><label class="checkbox checkbox-inline"><input type="checkbox" />睡觉</label><label class="checkbox checkbox-inline"><input type="checkbox" />打豆豆</label>我们只需要把div去掉,在label中直接写:class=”checkbox checkbox-inline”。这样就在一行了
禁选:
<label class="checkbox checkbox-inline disabled"><input type="checkbox" disabled="disabled"/>吃饭</label>如果是单选按钮:<div class="radio"><label><input type="radio"/>男</label><label><input type="radio"/>女</label></div>
只需要把checkbox改成radio就OK
6.下拉列表
直接用class=”form-control”
<select class="form-control"><option>湖南省</option><option>湖北省</option><option>山东省</option><option>山西省</option></select>
直接占满整行,顺便帮我们添加样式
7.控制尺寸(高度)
示例代码:
<input type="text" class="input-lg" /><input type="text"/><input type="text" class="input-sm" />
控制高度有两种,lg最高,sm最低
8.控制尺寸(宽度)
有控制高的就有对应控制宽的,控制文本框宽也要用到栅格,很简单:
<input type="text" class="col-lg-10"/>表示文本框占10个格子
二、按钮
1.可用作按钮使用的标签和元素
可以用作按钮使用的标签元素有很多,a标签、button标签本身就是按钮,input标签的button,submit这些都可以用class=”btn”来添加按钮样式
<a class="btn btn-warning">超链接按钮</a><br><button class="btn btn-success" type="button">button标签按钮</button><br><input class="btn btn-info" type="button" value="input标签的button按钮"/><br><input class="btn btn-danger" type="submit" value="input标签的submit按钮"/>
2.预定义样式
<button class="btn btn-default">button标签按钮</button><button class="btn btn-primary">button标签按钮</button><button class="btn btn-success">button标签按钮</button><button class="btn btn-info">button标签按钮</button><button class="btn btn-warning">button标签按钮</button><button class="btn btn-danger">button标签按钮</button><button class="btn btn-link">button标签按钮</button>
前面六种基本就是给按钮设置不同的背景色,第七种是把按钮的样式修改为超链接
3.尺寸
尺寸有五种,示例如下:
<button class="btn btn-success">button标签按钮</button>默认大小<button class="btn btn-success btn-lg">button标签按钮</button>大按钮<button class="btn btn-success btn-sm">button标签按钮</button>小按钮<button class="btn btn-success btn-xs">button标签按钮</button>超小按钮<button class="btn btn-success btn-block">button标签按钮</button>块级按钮
4.激活状态
<button class="btn btn-success active">button标签按钮</button>
设置按钮颜色 为 激活状态的颜色
5.禁用状态
<button class="btn btn-success disabled">button标签按钮</button>
设置按钮不可用
三、图片
1.图片形状、响应式图片
图片形状有三种:
圆角矩形:<img class=”img-rounded”>
<img src="img/a.jpg" class="img-rounded" >
圆形/椭圆:<img class=”img-circle”>这个比较牛逼,会根据图片来决定是宽椭圆还是高椭圆。
<img src="img/a.jpg" class="img-circle" >
缩略图:<img class=”img-thumbnail”>
<img src="img/a.jpg" class="img-thumbnail" >
可是现在还有点瑕疵,我们缩小网页的时候图片好像不会跟着自动缩小,会被只显示一部分。这个时候就需要设置一下 让图片根据网页缩小而自动缩小。我们叫做响应式图片
很简单:img-responsive
<img src="img/a.jpg" class="img-rounded img-responsive" ><img src="img/a.jpg" class="img-circle img-responsive" ><img src="img/a.jpg" class="img-thumbnail img-responsive" >
现在就舒服了。看看效果
四、辅助类
1.情境文本颜色(文字颜色)
这个主要设置文字颜色,有六种颜色,分别:<p class="text-muted">男儿事长征</p><p class="text-primary">少小幽燕客</p><p class="text-success">赌胜马蹄下</p><p class="text-info">由来轻七尺</p><p class="text-warning">杀人莫敢前</p><p class="text-danger">须如猬毛磔</p>
2.情境背景色(背景颜色)
背景颜色注意有五种
<p class="bg-info">黄云陇底白云飞</p><p class="bg-danger">未得报恩不得归</p><p class="bg-primary">辽东小妇年十五</p><p class="bg-warning">惯弹琵琶解歌舞</p><p class="bg-success">今为羌笛出塞声</p>
3.关闭按钮class=”close”
<span class="close">×</span>
×表示X
4.三角符号class=”caret”
<span class="caret"></span>
5.快速浮动class=”pull-right”,class=”pull-left”
<div style="width: 200px; height: 200px; background-color: yellow;" class="pull-right">
</div>
类似CSS样式中float的左浮动 右浮动
6.响应式工具
当我们需要随着页面大小变化 想要隐藏一些元素的时候可以用响应式工具来实现
可见:class=”visible-xs-*” *指的是block或者inline
<button class="btn-danger visible-sm">手机用户,点击有惊喜</button>
visible-sm:表示只有在页面变小才会显示这个按钮
<p class="bg-danger visible-lg-block">点击有惊喜</p>
block:表示显示整行背景
<p class="bg-danger visible-lg-inline">点击有惊喜</p>
inline:表示只在文本宽度显示背景色
7.隐藏:class=”hidden-xs”
<button class="btn-danger hidden-lg">手机用户,点击有惊喜</button>
hidden-lg:表示在大屏幕就隐藏
BootStrap_03(表单、按钮、图片、辅助类)相关推荐
- 全局CSS之表单按钮图片辅助类响应式工具)
前言: 本节课我们接着上节课内容继续讲全局CSS的样式,今天主要讲表单.按钮.图片.辅助类.以及响应式工具 1. 表单 1.1基本表单 class="form-control" ...
- Bootstrap(全局CSS之表单按钮图片辅助类响应式工具)
表单 基本表单 class="form-control":可以给<input>.<textarea>.<select>元素设置宽度为100% 示 ...
- Bootstrap_03_(全局CSS之表单按钮图片辅助类响应式工具)
表单 基本表单 class="form-control":可以给<input>.<textarea>.<select>元素设置宽度为100% 示 ...
- Bootstrap之表格,按钮,表单和图片的样式
Bootstrap之表格,按钮,表单和图片的样式 本文中,都是结合本人的学习Bootstrap时所做的练习,来理解通过内置的 CSS 定义,Bootstrap的表格,按钮,表单和图片是如何来显示各种丰 ...
- 【Bootstrap学习笔记】1.Bootstrap介绍、排版样式、表格和按钮、表单和图片
四.表单和图片 学习内容: .form-control 表单群组 内联表单 表单合组 水平排列 复选框和单选框 下拉列表 校验状态 添加额外图标 控制大小 图片 .form-control .form ...
- layui数据表格(一:基础篇,数据展示、分页组件、表格内嵌表单和图片)
表格展示神器之一:layui表格 前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table.layui table ...
- html更改表单按钮文字,HTML进阶应用技巧(十)用好表单的按钮
一.制作常规按钮 制作按钮非常简单,在标记中把type参数设置为:type="submit"就获得一个提交按钮,如本例的"提交"按钮:在 标记中把type参数设 ...
- html 重置按钮如何居中,如何设置html 表单按钮的位置,如居中,急?
设置html 表单按钮的位置的代码是: 超文本标记语言, 标准通用标记语言下的一个应用. " 超文本 "就是指页面内可以包含图片. 链接,甚至音乐. 程序等非文字元素. 超级文本标 ...
- html 表格中加按钮,HTML 表单按钮
(本次随笔仅作为学习用途) 表单按钮 1. 表单按钮一般分为三类,分别是提交按钮.重置按钮和普通按钮.提交按钮.重置按钮只能在表单中使用,普通按钮则可以在网页的任何地方使用. 2. 从本质上讲,表单按 ...
- FileUpload控件实现单按钮图片自动上传并带预览显示
FileUpload控件实现单按钮图片自动上传并带预览显示 1.实现原理: FileUpload控件默认不支持服务端的ONCHANGE事件,此时用一种变通的方法借用客户端的onchange事件,调用_ ...
最新文章
- c# 解析JSON的几种办法(转载)
- 网站推广——网站推广专员如何提升新站权重?
- 那一年,整个游戏界差点因为一款垃圾游戏,而一同被“埋葬”
- java java.doc_使用 javadoc 自动生成 Java 文档
- 楷体任务用Ant来构建你的项目
- php 判断访问是否是手机或者pc
- mysql主从复制浅析(一)
- 【C++】STL-函数对象(仿函数)
- Python3 网络爬虫学习手册
- 入职Apifox研发组三个月,我领悟了30个高效开发方法
- 仿 手机QQ 登录、注册、找回密码、好友列表、QQ状态等功能的实现
- [经验分享]长期有效的推广网店的方法
- win10添加右键sublime打开方式
- 面试中常见线程的50个问题
- 3G上网:按时长计费是运营商的“最佳选择”
- Python爬虫实战:爬取YY上漂亮小姐姐视频
- mac的防火墙工具pf
- ExtJs6 修改store里面数据grid单元格左上角会有红点标签的去掉方法
- python练习_定义圆定义点判断关系
- 《不可不知的经济真相》精髓:普通老百姓如何进行楼市和股市的投资
热门文章
- QT学习笔记:简单的串口调试助手--实现 字符与十六进制发送接收
- eNSP无法启动路由器解决
- 计算机网考 报名,个人怎么报计算机网络管理员证在线报名考试入口
- MATLAB实现PCA算法
- python和Java语法对比
- ubuntu capse lock swap with control key
- 达梦数据库常用函数——数值函数
- 用amd组装高档游戏型计算机,AMD锐龙R5-2600搭配RTX2060组装电脑主机配置报价 游戏玩家看过来...
- 计算机java毕业设计 SSM大学生在线兼职发布与管理平台
- python 日期加减法_python timedelta减法行为