Bootstrap CSS 表单、按钮和图片

最新推荐文章于 2022-05-03 19:28:18 发布
最新推荐文章于 2022-05-03 19:28:18 发布
阅读量640 收藏
点赞数
分类专栏： bootstrap 文章标签： bootstrp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LimonSea/article/details/83588522
版权

一、表单样式

1.1

先放截图：

 

上图中第一行是内联表单（响应式），当窗口宽度小于780时，会变成酱：

主要包括的知识点：

内联表单：

  1. 必须加label才能使用input标签的class属性，不然会有错误
  2. 隐藏label的方法：class属性：sr-only

水平排列表单：

  1. 使用栅格系统显示表单 

下面是代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单</title>
		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
		 
	</head>
	<body>
		<!--内联表单-->
		<form role="form" class="form-inline">
			<div class="form-group">
				<label>email</label>
				<input type="email" class="form-control" placeholder="enter email" />
			</div>
			<div class="form-group">
				<label>密码</label>
				<input type="password" class="form-control" placeholder="password" />
			</div>
			<div class="form-group">
				<!--隐藏label-->
				<label class="sr-only">选择文件</label>
				<input type="file" />
				<p class="belp-block">选择你的文件</p>
			</div>
		</form>
		<!--水平排列表单-->
		<form class="form-horizontal" role="form">
			<!--栅格系统-->
			<div class="form-group">
				<label class="col-sm-2 control-label">email</label>
				<div class="col-sm-10">
					<input type="email" class="form-control" placeholder="email" />
				</div>
				
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">password</label>
				<div class="col-sm-10">
					<input type="password" class="form-control" placeholder="password" />
				</div>
			</div>
			<!--单选按钮-->
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<div class="checkbox">
						<label>
							<input type="checkbox"/>记住密码
						</label>
					</div>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button type="submit" class="btn btn-default">登录</button>
				</div>
			</div>
		</form>
	</body>
</html>

1.2

知识点：

  1. 给表单设置不可写属性：disabled
  2. input 和 textarea的使用
  3. 复选框的样式：checkbox
  4. 单选框的样式：radio
  5. 全部显示的下拉列表：multiple
  6. 静态控件：form-control-static

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单2</title>
		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
		
	</head>
	<body>
		<form role="form">
			<fieldset disabled>
				<input type="text" class="form-control"/>
				<textarea class="form-control" rows="5">HEllo</textarea>
				<!--复选-->
				<div class="checkbox">
					<label>
						<input type="checkbox" value=""/>网球
					</label>
				</div>
				<div class="checkbox">
					<label>
						<input type="checkbox" value=""/>前端
					</label>
				</div>
				<!--单选-->
				<div class="radio">
					<label>
						<input name="optionsRadios" type="radio" checked/>男
					</label>
				</div>
				<div class="radio">
					<label>
						<input name="optionsRadios" type="radio"/>女
					</label>
				</div>
				<!--下拉列表-->
				<select multiple class="form-control">
					<option>1</option>
					<option>2</option>
					<option>3</option>
					<option>4</option>
				</select>
				
				<!--静态控件-->
				<p class="form-control-static">请按照我的格式输入：123456@</p>
				<input class="form-control" type="text" placeholder="hello" disabled/>
			</fieldset>
		</form>
	</body>
</html>

二、按钮和图片

知识点：

  1. 各种颜色的按钮：default，primary，success，info，warning，link，danger
  2. 四种按钮尺寸：btn-lg，不设，btn-sm，btn-xs
  3. 按钮充满父级容器：btn-block
  4. 超链接设置按钮样式：class="btn btn-default btn-lg active" role="button"
  5. input设置按钮样式：class="btn btn-default" type="button"
  6. 图片相关：圆形：img-circle 圆角：img-rounded 带边框：img-thumbnail

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>按钮</title>
		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
		
	</head>
	<body>
		<!--按钮-->
		<div class="container">
			<button type="button" class="btn btn-default">default</button>
			<button type="button" class="btn btn-primary">primary</button>
			<button type="button" class="btn btn-success">success</button>
			<button type="button" class="btn btn-info">info</button>
			<button type="button" class="btn btn-warning">warning</button>
			<button type="button" class="btn btn-link">link</button>
			<button type="button" class="btn btn-danger">danger</button>
		</div>
		<!--按钮尺寸以及充满父级容器-->
		<div class="div">
			<button type="button" class="btn btn-info btn-lg">info</button>
			<button type="button" class="btn btn-info">info</button>
			<button type="button" class="btn btn-info btn-sm">info</button>
			<button type="button" class="btn btn-info btn-xs">info</button>
		</div>
		<button type="button" class="btn btn-default btn-block">block</button>
		
		<a href="#" class="btn btn-default btn-lg active" role="button" disabled="disabled">defult</a>
		
		<input class="btn btn-default" type="button" value="Input"/>
		<!--圆角图片-->
		<img src="../img/1.jpg" alt="" class="img-circle" />
		<img src="../img/1.jpg" alt="" class="img-rounded" />
		<img src="../img/1.jpg" alt="" class="img-thumbnail" />
	</body>
</html>

 

 

希望我的记录能够帮到你~ 喜欢请点赞！

谢谢你看到这里！写作仓促，有疏漏之处还请评论指正，共同探讨进步！

 

LimonSea
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap带图标的按钮样式
12-13
这是一款基于bootstrap的带图标的按钮样式。这组按钮在bootstrap按钮的基础上，通过附加的HTML元素来构建小图标，并通过CSS3来制作鼠标hover动画效果。
Bootstrap_表单
weixin_30856965的博客
01-22 163
Bootstrap表单 在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。 表单布局 Bootstrap 提供了下列类型的表单布局： 垂直表单（默认） 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。...
学习记录：Bootstrap 按钮和图片样式
人生苦短，何妨一试
02-13 328
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link href="../bootstrap-3.4.1/bootstrap-3.4.1/docs/dist/css/bootstrap.min.css" type="text/css" rel="stylesheet"> </head> &l...
flexbox结合bootstrap表单（css合集）
m0_37729058的博客
11-10 733
flexbox css合集最近在使用flexbox，写一个flexbox和bootstrap结合的表单。这里提供一个整合好的css库，只需要引用类名即可完成效果。 同时demo里面提供了一些用来测试更改样式的按钮，不需要的直接删掉就好。 先上成品图 这里上方的input和select是为了演示样式的，实际使用时不需要。 **第一行输入要交换的行数（如1 ）点击就可以随意交换位置而不改变DOM
Bootstrap css学习笔记（三）——表单与按钮
Andy_lau
08-16 471
目录：     1.bootstrap表单     2.bootstrap按钮     前言：前面我们已经对bootstrap的栅格化系统、表格、排版以及代码这些css样式进行了简单的学习，接下来这篇文章将继续学习bootstrap表单和按钮。 1.bootstrap表单     1.1 总结
Bootstrap CSS布局之表单
08-31
Bootstrap CSS布局中的表单设计是网页开发中一个关键的组件，尤其对于构建响应式和用户友好的界面至关重要。Bootstrap框架提供了多种预定义的样式和布局选项，使得创建表单变得简单快捷。 首先，表单是HTML网页中...
bootstrap css样式之表单
08-31
表单中的按钮可以使用`.btn`和`.btn-default`类进行美化，Bootstrap还提供了其他颜色的按钮类，如`.btn-primary`、`.btn-success`等，以适应不同的设计需求。 总之，Bootstrap CSS样式为创建美观且功能丰富的表单...
BootStrap 表单控件之单选按钮水平排列
12-03
在Bootstrap中，表单控件是构建用户界面的重要部分，而单选按钮则是表单中常见的一种选择输入方式。在本教程中，我们将深入探讨如何使用Bootstrap来实现单选按钮的水平排列。 在传统的HTML表单中，单选按钮通常垂直...
BootStrap 动态表单效果
10-19
总的来说，Bootstrap动态表单效果的实现结合了HTML模板、CSS样式和JavaScript/jQuery事件处理，通过动态创建和销毁DOM元素，实现了用户友好的交互体验。这种技术在现代Web应用中广泛应用，尤其在需要用户输入大量可...
bootstrap全局CSS之表单&按钮&图片&辅助类&响应式工具
andrew_dear的博客
03-01 559
表单 基本表单 class="form-control"：可为<input> <textarea> <select>元素设置该属性，会将宽度设置为100% class="form-group"： 可为<div>设置该属性，<div>中包含<label>和<input>，这样层次会更清晰 内联表单【让所有的表单元素都显示在一行】 <form class="form-inline"> 表
基于bootstrap图标形状单选按钮radio
06-15
基于bootstrap的单选按钮图标 改变了浏览器自带形状，支持自定义图标
简答的按钮及表格 验证样式
12-05
代码实现简单的按钮，表格样式；下载后 直接打开index.html就这可以看到效果
Bootstrap入门之表单元素——按钮
yingzizizizizizzz的专栏
03-28 626
表单元素（按钮） 我是一个基本按钮 既然是button为什么还需要type=button呢 感觉怪怪的 还有通过属性选择器的话 权重和类选择器哪个大？   Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。 一般制作按钮除了使用标签元素之外，还可以使用和标签等。也可以使用等标签创建按钮，但是不建议。
【BootStrap】栅格系统、表单样式与按钮样式-附有源码
谙忆-陈浩翔
05-13 5797
转载请注明出处：http://blog.csdn.net/qq_26525215 本文源自【大学之旅_谙忆的博客】 栅格系统1、栅格系统介绍Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。Bootstrap的栅格系统，由一个行(.row)和多个列构成。栅格系统用于通过一系列的行（row）与列（column）的组
Bootstrap的一些笔记——form，button，etc.
热门推荐
本博客已废弃，请使用http://friskit.me
02-11 2万+
所有标签都可以添加class="well"。用来增加默认样式（白色圆角的那个）。 标签不同于网格系统，是已经加入了可见样式的标签。可以结合google-code-prettify代码加亮。 相关地址：http://google-code-prettify.googlecode.com/svn/trunk/README.html 标签有以下几个标签组成： 其中中应包含 其中
Bootstrap图片中加播放按钮
夏已微凉、
10-31 1917
                                                                       Bootstrap图片中加播放按钮 1、效果图 2、代码 &lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &l
BootStrap按钮和图片
qq_35377740的博客
07-13 1786
按钮可作为按钮使用的标签&lt;a&gt;，&lt;input&gt;，&lt;button&gt;都可以设置为按钮，bootstrap为按钮提供了.btn类，为按钮设置了新的样式。a标签结构：&lt;a class="btn"&gt;按钮明&lt;/a&gt;input标签结构：&lt;input class="btn"  value="按钮名"/&g
Bootstrap03之表单，按钮，图片，辅助类，响应式工具
weixin_60786293的博客
05-03 674
表单 class=”form-control”：可以给<input>、<textarea>、<select>元素设置宽度为100% 示例代码： <form action="" method=""> <label>用户名:</label> <input type="text" class="form-control" /> </form> 之前我们写在文本框前面写用户名 一直都是直接写字，在实际开发中
bootstrap框架---表格、按钮、图片
qq_37149421的博客
03-14 472
1.表格（1）表格，横线分割&lt;tableclass="table"&gt;            &lt;thead&gt;                &lt;tr&gt;                    &lt;th&gt;编号&lt;/th&gt;                    &lt;th&gt;姓名&lt;/th&gt;             
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值