0
点赞
收藏
分享

微信扫一扫

Bootstrap、(全局CSS之表单&按钮&图片&辅助类&响应式工具)

程序员知识圈 2022-05-03 阅读 86

1.表单

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

示例代码:

	<h3 class="mark">1.1 基本表单</h3>
					<form >
						<label>用户名</label>
						<input type="text" class="form-control" />
						
					</form>
					
					<form>
						<div class="form-group">
							<label>用户名</label>
							<input type="text" placeholder="请输入用户名"class="form-control" />
						</div>
						<div class="form-group">
							<label>密码</label>
							<input type="text" placeholder="请输入密码"class="form-control" />
						</div>
					</form>

1.2.内联表单:class=”form-inline”
什么是内联表单呢,就是让我们的所有表单元素都在一行
示例代码:

<h3 class="mark">1.2 内联表单</h3>
					
					<form class="form-inline">
						<label>用户名</label>
						<input type="text"  />
						<select >
							<option >哈哈</option>
						</select>
					</form>


1.3.表单组合
class=”input-group”、class=”input-group-addon”
表单组合就是把几个元素组合在一起,我们一起来看一下代码:

<h3 class="mark">1.3 表单组合</h3>
					
					<div class="form-group">
						<label>工资</label>
					    <div class="input-group">
							<span class="input-group-addon">$</span>
						<input type="text" class="form-control" />
						</div>
					</div>


1.4.水平排列表单,设计到栅格

<h3 class="mark">1.4 水平排列表单(结合栅格)</h3>
					<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>


1.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”。这样就在一行了

1.6.下拉列表
直接用class=”form-control”

	<select class="form-control">
						<option>天津</option>
						<option>上海</option>
						<option>北京</option>
					</select>
					


直接占满整行,顺便帮我们添加样式
1.7.控制尺寸(高度)
示例代码:

<h4 class="mark">1.7.1 高度</h4>
					<input type="text" class="input-lg" />
					<input type="text"/>
					<input type="text" class="input-sm" />


控制高度有两种,lg最高,sm最低
1.8.控制尺寸(宽度)
有控制高的就有对应控制宽的,控制文本框宽也要用到栅格,很简单:

<h4 class="mark">1.7.2 宽度</h4>
					<input type="text" class="col-lg-3"/>


2.按钮
2.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.2.预定义样式

<h3 class="mark">2.1 可用作按钮的标签和元素</h3>
					<button class="btn btn-default">按钮</button>
					<button class="btn btn-primary">按钮</button>
					<button class="btn btn-success">按钮</button>
					<button class="btn btn-info">按钮</button>
					<button class="btn btn-warning">按钮</button>
					<button class="btn btn-danger">按钮</button>
					<button class="btn btn-link">按钮</button>


前面六种基本就是给按钮设置不同的背景色,第七种是把按钮的样式修改为超链接
2.3.尺寸
尺寸有五种,示例如下:

<h3 class="mark">2.3 按钮尺寸</h3>
					<button class="btn btn-success">按钮</button>普通
					<button class="btn btn-success btn-lg">按钮</button>大
					<button class="btn btn-success btn-sm">按钮</button>小
					<button class="btn btn-success btn-xs">按钮</button>超小
					<button class="btn btn-success btn-block">按钮</button>块级按钮


2.4.激活状态

<h3 class="mark">2.4 激活状态</h3>
					<button class="btn btn-danger active">按钮</button>


设置按钮颜色 为 激活状态的颜色
2.5.禁用状态

<h3 class="mark">2.5 禁用状态</h3>
					<button class="btn btn-primary disabled">按钮</button>


设置按钮不可用
3.图片
3.1.图片形状、响应式图片
图片形状有三种:
1、圆角矩形:<img class=”img-rounded”>

<img src="img/1.jpg" class="img-rounded" >


2、圆形/椭圆:<img class=”img-circle”>

<img src="img/1.jpg" class="img-circle" >


3、缩略图:<img class=”img-thumbnail”>

<img src="img/1.jpg" class="img-thumbnail" >


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

<img src="img/1.jpg" class="img-rounded img-responsive" >
					<img src="img/1.jpg" class="img-circle img-responsive" >
					<img src="img/1.jpg" class="img-thumbnail img-responsive" >


现在就舒服了。看看效果
4.辅助类
4.1.情境文本颜色(文字颜色)
这个主要设置文字颜色,有六种颜色,分别:

<h3 class="mark">4.1 文字颜色</h3>
					<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>


4.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>


4.3.关闭按钮class=”close”

<span class="close">&times;</span>


&times;表示X
4.4.三角符号class=”caret”

<span class="caret"></span>

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

<div style="width: 200px; height: 200px; background-color: yellow;" class="pull-right">
</div>


类似CSS样式中float的左浮动 右浮动
5.响应式工具
当我们需要随着页面大小变化 想要隐藏一些元素的时候可以用响应式工具来实现
5.1.可见: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:表示只在文本宽度显示背景色
5.2.隐藏:class=”hidden-xs”

<button class="btn-danger hidden-lg">手机用户,点击有惊喜</button>


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

举报

相关推荐

0 条评论