Bootstrap_03_(全局CSS之表单按钮图片辅助类响应式工具)
- 表单
- 基本表单
- 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>
这个页面效果可能不是很明显
- 内联表单: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>
现在都显示在一行
- 表单组合
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”.这样就可以把他们组合在一起。刷新看一下效果,是不是漂亮多了
- 水平排列表单,设计到栅格
<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这句属性设置文本靠近文本框
- 多选框
注意:这里的语法格式,需要把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
- 下拉列表
直接用class=”form-control”
<select class="form-control"><option>湖南省</option><option>湖北省</option><option>山东省</option><option>山西省</option></select>
直接占满整行,顺便帮我们添加样式
- 控制尺寸(高度)
示例代码:
<input type="text" class="input-lg" /><input type="text"/><input type="text" class="input-sm" />
控制高度有两种,lg最高,sm最低
- 控制尺寸(宽度)
有控制高的就有对应控制宽的,控制文本框宽也要用到栅格,很简单:
<input type="text" class="col-lg-10"/>
表示文本框占10个格子
- 按钮
- 可用作按钮使用的标签和元素
可以用作按钮使用的标签元素有很多,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按钮"/>
- 预定义样式
<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>
前面六种基本就是给按钮设置不同的背景色,第七种是把按钮的样式修改为超链接
- 尺寸
尺寸有五种,示例如下:
<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>块级按钮
- 激活状态
<button class="btn btn-success active">button标签按钮</button>
设置按钮颜色 为 激活状态的颜色
- 禁用状态
<button class="btn btn-success disabled">button标签按钮</button>
设置按钮不可用
- 图片
- 图片形状、响应式图片
图片形状有三种:
- 圆角矩形:<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" >
现在就舒服了。看看效果
- 辅助类
- 情境文本颜色(文字颜色)
这个主要设置文字颜色,有六种颜色,分别:
<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>
- 情境背景色(背景颜色)
背景颜色注意有五种
<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>
- 关闭按钮class=”close”
<span class="close">×</span>
×表示X
- 三角符号class=”caret”
<span class="caret"></span>
- 快速浮动class=”pull-right”,class=”pull-left”
<div style="width: 200px; height: 200px; background-color: yellow;" class="pull-right"></div>
类似CSS样式中float的左浮动 右浮动
- 响应式工具
当我们需要随着页面大小变化 想要隐藏一些元素的时候可以用响应式工具来实现
- 可见: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:表示只在文本宽度显示背景色
- 隐藏:class=”hidden-xs”
<button class="btn-danger hidden-lg">手机用户,点击有惊喜</button>
hidden-lg:表示在大屏幕就隐藏
为了更好的直白的显示,放个图片
Bootstrap_03_(全局CSS之表单按钮图片辅助类响应式工具)相关推荐
- 全局CSS之表单按钮图片辅助类响应式工具)
前言: 本节课我们接着上节课内容继续讲全局CSS的样式,今天主要讲表单.按钮.图片.辅助类.以及响应式工具 1. 表单 1.1基本表单 class="form-control" ...
- Bootstrap(全局CSS之表单按钮图片辅助类响应式工具)
表单 基本表单 class="form-control":可以给<input>.<textarea>.<select>元素设置宽度为100% 示 ...
- Bootstrap全局css样式_图片,响应式工具
响应式图片 在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局.<!DOCTYPE html> <html lang=& ...
- Bootstrap-CSS-按钮-图片-辅助类-响应式
按钮 可作为按钮使用的标签或元素 为 <a>.<button> 或 <input> 元素添加按钮类(button class)即可使用 Bootstrap 提供的样 ...
- Bootstrap之表格,按钮,表单和图片的样式
Bootstrap之表格,按钮,表单和图片的样式 本文中,都是结合本人的学习Bootstrap时所做的练习,来理解通过内置的 CSS 定义,Bootstrap的表格,按钮,表单和图片是如何来显示各种丰 ...
- Bootstrap03之表单,按钮,图片,辅助类,响应式工具
表单 class="form-control":可以给<input>.<textarea>.<select>元素设置宽度为100% 示例代码: ...
- 【Bootstrap学习笔记】1.Bootstrap介绍、排版样式、表格和按钮、表单和图片
四.表单和图片 学习内容: .form-control 表单群组 内联表单 表单合组 水平排列 复选框和单选框 下拉列表 校验状态 添加额外图标 控制大小 图片 .form-control .form ...
- layui数据表格(一:基础篇,数据展示、分页组件、表格内嵌表单和图片)
表格展示神器之一:layui表格 前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table.layui table ...
- Bootstrap ——排版、表格、表单、图片、button 学习博客(二)
Bootstrap中的排版 1. 排版 标题部分 文本部分 对齐 .text-left :文字左对齐 .text-center :文字居中对齐 .text-right :文字右对齐 .text-low ...
最新文章
- MongoDB修改删除数据
- 不属于mysql常量的是_MySQL中,下面______常量的写法是不正确的?-智慧树MySQL数据库设计与应用章节答案...
- List精讲(Java版)·算法常用集合处理方法
- 数字化平台之微信平台策略
- 搭建Android开发环境的介绍
- vue element table 修饰
- 年薪50W测试大牛,分享测试开发基础知识
- Doris之Rollup 与查询
- this 自引用指针
- STM32外部中断具体解释
- Java中的编译、反编译和反编译工具全家桶分享
- python安装不了whl文件_python怎样安装whl文件
- AI数学基础(1)--- 马尔可夫不等式
- 计算机专硕毕业论文写什么,关于学姐写硕士毕业论文的一些经验,分享给大家...
- 如何在Windows上启用JavaScript
- bootstrap的pillbox使用
- uniapp 电商小程序 订单30分钟倒计时
- 错误代码:40029, 错误信息:code 无效,微信原始报文:{“errcode“:40029,“errmsg“:“invalid code, rid: 63a4082d-7a02e2ba-1fa5
- 22岁90后白羊座罗生和勒索病毒的背后故事
- google搜索---搜索指定网页的内容