首页 > 代码库 > Bootstrap学习 Form

Bootstrap学习 Form

2024-07-06 05:02:05   233人阅读

总觉得Form这个东西怎么弄都行，弄弄就知道越弄越难弄了。老实儿地学学bootstrap的做法吧，—.—！

如下html表现为label在上，input在下的样式。

form-group设置了margin，

form-control控制的input等输入控件设置了其width为100%，

这就导致了和label不在一条线上。

  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>

 

form设定样式form-inline并没有为form设定什么样式，而是用来定位里面的内容的

.form-inline .form-group被设置成为：display: inline-block;

.form-inline .form-control被设置成为： display: inline-block;

所以下面的HTML表现为所有的内容在一条线上。。。

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

 

下面的这个是小猿的最爱：

form设定form-horizontal样式同样没有设定什么样式，用来定位其它的样式

.form-horizontal .control-label,
.form-horizontal .radio,　
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {

　　padding-top: 7px;
　　margin-top: 0;
　　margin-bottom: 0;

}

/* 这样设定跟.row的样式是一样的，所以可以直接在其内部设定col-sm-6等 */
.form-horizontal .form-group {
　　margin-right: -15px;
　　margin-left: -15px;
}

.form-horizontal .control-label {text-align: right;}

所以我们的label必须设定一个control-label的样式，且需要设定一个栅栏的宽度。。。

form-control设定了一个width:100%，所以我们的控件需要设定一个form-control，另外这个控件需要一个设置了栅栏宽度的div来包含。。。

so， it should be just like this：

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

 

表单相关的控件：

给一个输入文本框设置一个focus样式的话，需要设定一个border-color和一个box-shadow。。。

button

<button type="button" class="btn"> 默认样式，一下是其它样式，有一个btn-link有点意思。。。

btn btn-success
btn btn-info
btn btn-warning
btn btn-danger
btn btn-link

.btn-lg、.btn-sm、.btn-xs用来设定button的大小。

块级元素的button，挺好看的，占满整个容器的宽度。

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>

我们可以为一个链接元素设置btn样式，表现的跟button一样，挺帅！

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>

按钮的禁用是通过给button追加disabled="disabled"来实现的。

链接的禁用是通过给a追加.disabled样式来实现的。

 

border-radius: 50%; 挺好看哈~

图片相关的样式：

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
<img src="..."alt="Responsive image" class="img-responsive">

 

几个相当有意思的符号：

1 &times;表现出来是一个×。

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

caret的样式是这样设置的，表现出来就是一个上下的角号。

  border-top: 4px solid #000000;
  border-right: 4px solid transparent;
  border-bottom: 0 dotted;
  border-left: 4px solid transparent;

 

 


联系
我们