Bootstrap学习(二)_bootstrap圆角属性和阴影-优快云博客

本文链接：https://blog.youkuaiyun.com/weizhengzhou520/article/details/81427617

本文详细介绍了表单设计的各种技巧，包括水平表单、内联表单、复选框和单选按钮的水平排列方法，以及如何利用不同大小和状态的表单控件提升用户体验。此外还介绍了按钮、表单提示信息、图像和图标的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

留坑待用

二、表单

二、表单

文本输入框
下拉选择框
单选按钮
文本域和按钮

<form role="form" class="form-horizontal">
    <div class="form-group">
        <label for="exampleInputEmail1">邮箱：</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">密码：</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> 记住密码
        </label>
    </div>
    <button type="submit" class="btn btn-default">进入邮箱</button>
</form>

这里写图片描述

属性	属性值	作用标签	说明
role=	“form”	`<form>`	告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色是个表单
class=	“form-control”	`<input>` `<select>` `<textarea>`	1、宽度变成了100% 2、设置了一个浅灰色（#ccc）的边框 3、具有4px的圆角 4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化 5、设置了placeholder的颜色为#999
for=	“male”	`<label>`	for 属性规定 label 与哪个表单元素绑定。

1.水平表单内联表单

属性	属性值	作用标签	说明
class=	“form-horizontal”	`<form>`	标签居左，表单控件居右
class=	“form-inline”	`<form>`	将表单的控件都在一行内显示
class=	“sr-only”	`<label>`	在label标签运用了一个类名“sr-only”，标签没显示就是这个样式将标签隐藏了。

如果你要在input前面添加一个label标签时，会导致input换行显示。如果你必须添加这样的一个label标签，并且不想让input换行，你需要将label标签也放在容器“form-group”中，如：

<div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
</div>
<div class="form-group">
    <inputtype="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>

2.表单控件

表单控件	type=
输入`<input>`	“email”“password”等复选框`"checkbox"` 单选`"radio"`
下拉`<select>`	multiple 下拉展开了
文本域`<textarea>`	文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。

2.1复选框和单选按钮水平排列

<label class="checkbox-inline"> 水平排列
<label class="radio-inline">水平排列


<form role="form">
<div class="form-group">
    <label class="checkbox-inline"> //checkbox-inline 水平排列
      <input type="checkbox"  value="option1">游戏
    </label>
    <label class="checkbox-inline">
      <input type="checkbox"  value="option2">摄影
    </label>
    <label class="checkbox-inline">
    <input type="checkbox"  value="option3">旅游
    </label>
  </div>
  <div class="form-group">
    <label class="radio-inline">//radio-inline 水平排列
      <input type="radio"  value="option1" name="sex">男性
    </label>
    <label class="radio-inline">
      <input type="radio"  value="option2" name="sex">女性
    </label>
    <label class="radio-inline">
      <input type="radio"  value="option3" name="sex">中性
    </label>
  </div>
</form>

<form role="form">
<div class="form-group">
  <select class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
  </div>
  <div class="form-group">
  <select multiple class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>
</form>

这里写图片描述

3.按钮

这里写图片描述
链接按钮 btn btn-link
多标签支持

<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<a href="##" class="btn btn-default">a标签按钮</a>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>

为了避免浏览器兼容性问题，个人强烈建议使用button或a标签来制作按钮。
button大小
大型|btn-lg
小型|btn-sm
超小|btn-xs
块状按钮 btn-block

禁用按钮

<button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button> 
<button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>

4.表单控件大小

<div class="col-xs-4">
      <input class="form-control input-lg" type="text" placeholder=".col-xs-4">//以下控制大小
</div>

这里写图片描述

5.表单控件状态

1.焦点状态
焦点状态是通过伪类“:focus”来实现。
Bootstrap框架中表单控件的焦点状态删除了outline的默认样式，重新添加阴影效果。

2.禁用状态
2.1只需要在需要禁用的表单控件上加上“disabled”即可：

<input class="form-control" type="text" placeholder="表单已禁用，不能输入" disabled>

2.2如果fieldset设置了disabled属性，整个域都将处于被禁用状态。

<form role="form">
<fieldset disabled>
  <div class="form-group">
  <label for="disabledTextInput">禁用的输入框</label>
    <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
  </div>
  <div class="form-group">
  <label for="disabledSelect">禁用的下拉框</label>
    <select id="disabledSelect" class="form-control">
  <option>不可选择</option>
  </select>
  </div>
  <div class="checkbox">
  <label>
    <input type="checkbox">无法选择
  </label>
  </div>
  <button type="submit" class="btnbtn-primary">提交</button>
</fieldset>
</form>

这里写图片描述
2.3如果legend中有输入框的话，这个输入框是无法被禁用的

<form role="form">
<fieldset disabled>
<legend><input type="text" class="form-control" placeholder="显然我颜色变灰了，但是我没被禁用，不信？单击试一下" /></legend>
    …
</fieldset>
</form>

3.验证状态

<form role="form">
<div class="form-group has-success"> 
  <label class="control-label" for="inputSuccess1">成功状态</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
</div>
</form>

从代码中可知has-success control-label
另外还有 has-warning has-error

带有icon
<form role="form">
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess1">成功状态</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
  <span class="glyphiconglyphicon-ok form-control-feedback"></span>
</div>
</form>

从代码中可知has-success has-feedback``control-label
成功
另外还有 has-warning has-error
错误
警告

6.表单提示信息

<form role="form">
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess1">成功状态</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
  <span class="help-block">你输入的信息是正确的</span>
  <span class="glyphiconglyphicon-ok form-control-feedback"></span>
</div>
  …
</form>

这里写图片描述
从代码中可知多了一个

7.图像

1、img-responsive：响应式图片，主要针对于响应式设计
2、img-rounded：圆角图片
3、img-circle：圆形图片
4、img-thumbnail：缩略图片

8.图标

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-asterisk"></span>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon glyphicon-cloud"></span>