Bootstrap03之表单，按钮，图片，辅助类，响应式工具

表单

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>

现在都显示在一行

 

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

可以用作按钮使用的标签元素有很多，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>

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

图片：图片形状、响应式图片

图片形状有三种：

圆角矩形：<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=”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：表示在大屏幕就隐藏