Bootstrap03

wanry520

已于 2022-05-04 18:15:57 修改

阅读量222

点赞数

于 2022-05-04 18:14:10 首次发布

本文链接：https://blog.csdn.net/wanry520/article/details/124561685

版权

一、表单
1.基本表单
1）class=”form-control”：可以给<input>、<textarea>、<select>元素设置宽度为100%

2）class=”form-group”：可以为<div>设置该属性。如果<div>中包含<label>和<input>表示为一组。层次会更清晰

2.内联表单：class=”form-inline”
What？什么是内联表单呢？就是让我们的所有表单元素都在一行

3.表单组合：class=”input-group”、class=”input-group-addon”
表单组合就是把几个元素组合在一起

4.多选框：class="checkbox"

以下是演示代码

<!-- 使用固定容器 -->
		<div class="container">
			<h2>一、表单</h2>
			<h3 class="mark">1.1 基本表单</h3>
			<div class="container">
				<form>
					<div class="form-group">
						<label>用户名：</label>
						<input type="text" class="form-control" />
					</div>
				</form>
			</div>

			<h3 class="mark">1.2 内联表单</h3>
			<div class="container">
				<form class="form-inline">
					<div class="form-group">
						<button class="col-lg-12">好家伙</button>
						<button >好家伙</button>
						<button >好家伙</button>
						<button >好家伙</button>
						<button >好家伙</button>
						<button >好家伙</button>
						<button >好家伙</button>
						<button >好家伙</button>
						<button >好家伙</button>
						<button >好家伙</button>
					</div>
					
				</form>
			</div>
			

			<h3 class="mark">1.3 表单组合</h3>
			<div class="container">
				<form>
					<div class="input-group">
						<span class="input-group-addon">SSSS</span>	
						<input type="text"/>
					</div>
					
				</form>
				
			</div>
			

			<h3 class="mark">1.4 水平排列表单(结合栅格)</h3>
			<div class="container">
				<form class="form-horizontal">
					<div class="form-group">
						<label class="col-lg-2 control-label">用户名：</label>
						<input type="text" class="col-lg-8" />
					</div>
				</form>
			</div>
			

			<h3 class="mark">1.5 表单之多选框</h3>
			<div class="container">
				<form >
					<div class="checkbox disabled">
						<label>
							<input type="checkbox" />
						</label>
						<label>
							<input type="checkbox" />
						</label>
						<label>
							<input type="checkbox" />
						</label>
					</div>
					
				</form>
				
			</div>
			
			<div class="container">
				<form>
					<label class="checkbox-inline">
					<input type="checkbox" disabled=""/>
					</label>
					
				</form>
				
			</div>
			
			
			<h4 class="mark">1.5.1 多行</h4>

			<h4 class="mark">1.5.2 单行</h4>

			<h3 class="mark">1.6 表单之下拉列表</h3>
			<div class="container">
				<form >
					<select class="form-control"></select>
				</form>
			</div>
			
			
			

			<h3 class="mark">1.7 控制尺寸</h3>
			<div class="container">
				<form>
					<input type="text" class="form-control input-lg"/>
					<input type="text" class="form-control input-sm"/>
				</form>
			</div>
			
			<h4 class="mark">1.7.1 高度</h4>
			

			<h4 class="mark">1.7.2 宽度</h4>
			<div class="container">
				<form>
					<div class="row">
						<div class="col-xs-4"></div>
						
						<input type="text" class="form-control"/>
						
					</div>
				</form>
			</div>

二.按钮

2.1可用作按钮使用的标签和元素

可以用作按钮使用的标签元素有很多，a标签、button标签本身就是按钮，input标签的button,submit这些都可以用class=”btn”来添加按钮样式

2.2预定义样式

前面六种基本就是给按钮设置不同的背景色，第七种是把按钮的样式修改为超链接

2.3尺寸

2.4激活状态

设置按钮颜色为激活状态的颜色

2.5禁用状态

设置按钮不可用

<h2>二、按钮</h2>
			<h3 class="mark">2.1 可用作按钮的标签和元素</h3>
			<button class="btn"></button>
			<a></a>
			<input type="button"/>
			<input type="submit" />

			<h3 class="mark">2.2 按钮预定义样式</h3>
			<button class="btn-danger">111</button>
			<button class="btn-primary">222</button>
			<button class="btn-success">333</button>
			<button class="btn-info">444</button>
			<button class="btn-warning">555</button>
			<button class="btn-link">666</button>
			
			
			

			<h3 class="mark">2.3 按钮尺寸</h3>
			<button class="btn-lg">111</button>
			<button class="btn-sm">111</button>
			<button class="btn-xs">111</button>
			<button class="btn-block">111</button>
			

			<h3 class="mark">2.4 激活状态</h3>
			<button class="btn active">222</button>

			<h3 class="mark">2.5 禁用状态</h3>
			<button class="btn disabled">222</button>

三.图片

图片形状、响应式图片

图片形状有三种：

圆角矩形：<img class=”img-rounded”>
圆形/椭圆：<img class=”img-circle”>这个比较牛逼，会根据图片来决定是宽椭圆还是高椭圆。
缩略图：<img class=”img-thumbnail”>

可是现在还有点瑕疵，我们缩小网页的时候图片好像不会跟着自动缩小，会被只显示一部分。这个时候就需要设置一下让图片根据网页缩小而自动缩小。我们叫做响应式图片

很简单：img-responsiv

<h2>三、图片</h2>
			<h3 class="mark">3.1 图片形状</h3>
			<img src="images/4.png" class="img-rounded" />
			<img src="images/4.png" class="img-circle" />
			<img src="images/4.png" class="img-thumbnail" />

			<h3 class="mark">3.2 响应式图片</h3>
			<img src="images/4.png" class="img-responsive" />

四.辅助类

4.1情境文本颜色(文字颜色)

这个主要设置文字颜色，有六种颜色，分别：

4.2情境背景色(背景颜色)

背景颜色注意有五种

4.3关闭按钮class=”close”

4.4三角符号class=”caret”

4.5快速浮动class=”pull-right”,class=”pull-left”

类似CSS样式中float的左浮动右浮动

<h2>四、辅助类</h2>
			<h3 class="mark">4.1 文字颜色</h3>
			<p class="text-muted">1111111111</p>
			<p class="text-primary">1111111111</p>
			<p class="text-success">1111111111</p>
			<p class="text-info">1111111111</p>
			<p class="text-warning">1111111111</p>
			<p class="text-danger">1111111111</p>
			
			

			<h3 class="mark">4.2 背景颜色</h3>
			<p class="bg-danger">1111111111</p>A111</p>
			<p class="bg-success">1111111111</p>
	

			<h3 class="mark">4.3 关闭按钮&三角符号&快速浮动</h3>
			
			<button class="close">11111</button>
			<button class="caret">11111</button>
			<button class="pull-left">11111</button>

五.响应式工具

5.1可见：class=”visible-xs-*” *指的是block或者inline

visible-sm：表示只有在页面变小才会显示这个按钮

block：表示显示整行背景

inline:表示只在文本宽度显示背景色

5.2隐藏：class=”hidden-xs”

hidden-lg：表示在大屏幕就隐藏

<h2>五、响应式工具</h2>
			<img src="images/20210319154237_cef77.jpeg" class="visible-md">
			<img src="images/adsada.jpeg"  class="hiden-md">
			<pre>

效果图

wanry520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫