【Bootstrap学习笔记】1.Bootstrap介绍、排版样式、表格和按钮、表单和图片

四、表单和图片

学习内容：

• .form-control
• 表单群组
• 内联表单
• 表单合组
• 水平排列
• 复选框和单选框
• 下拉列表
• 校验状态
• 添加额外图标
• 控制大小
• 图片

.form-control

.form-control

<label>电子邮件label>
<input class="form-control" type="email" placeholder="请输入电子邮件">
<label>密码label>
<input class="form-control" type="password" placeholder="请输入密码">

表单群组

.form-group

<div class="form-group">
    <label>电子邮件label>
    <input class="form-control" type="email" placeholder="请输入电子邮件">
div>

<div class="form-group">
    <label>密码label>
    <input class="form-control" type="password" placeholder="请输入密码">
div>

内联表单

.form-inline

<form class="form-inline">
        <div class="form-group">
            <label>电子邮件label>
            <input class="form-control" type="email" placeholder="请输入电子邮件">
        div>
        <div class="form-group">
            <label>密码label>
            <input class="form-control" type="password" placeholder="请输入密码">
        div>
form>

表单合组

.input-group .input-group-addon

    <div class="input-group-addon">￥div>
    <input class="form-control" type="text" placeholder="请输入取款金额">
    <div class="input-group-addon">.00div>
<br />
   
    <div class="input-group">
        <div class="input-group-addon">￥div>
        <input class="form-control" type="text" placeholder="请输入取款金额">
        <div class="input-group-addon">.00div>
    div>

水平排列（需用到栅格系统）

.from-horizontal .col-sm-2 .control-label

<form class="form-horizontal">
     <div class="form-group">
        
         <label class="col-sm-2 control-label">电子邮件label>
         <div class="col-sm-10">
             <input class="form-control" type="email" placeholder="请输入电子邮件">
         div>
     div>

     <div class="form-group">
        
         <label class="col-sm-2">密码label>
         <div class="col-sm-10">
             <input class="form-control" type="password" placeholder="请输入密码">
         div>
     div>
 form>

不懂
(1).form-horizontal
(2).control-label（同步?）

复选框和单选框

• 默认样式
• 设置禁用
• 设置内联
• radio与checkbox类似
  
  .checkbox 默认样式，写在外包的div上
  .disabled 设置禁用
  input禁用直接在input标签里设置disabled
  文本禁用分两种情况：
  (1)默认样式下，即外包有
  时，div添加disabled样式，即

  
  (2)内联样式下，即美术，label添加disabled样式，
  即美术
.checkbox-inline 内联样式，写在label本身上

<label><input type="checkbox">美术label>
<label><input type="checkbox">音乐label>

<div class="checkbox">
    <label>
        <input type="checkbox">美术
    label>
div>
<div class="checkbox disabled">
    <label>
        <input type="checkbox" disabled>音乐
    label>
div>

<div class="checkbox">
    <label>
        <input type="checkbox">美术
    label>
    <label>
        <input type="checkbox">音乐
    label>
div>


<label class="checkbox-inline">
    <input type="checkbox">美术
label>
<label class="checkbox-inline disabled">
    <input type="checkbox" disabled>音乐
label>


<label class="radio-inline">
    <input type="radio">音乐
label>

下拉列表

直接使用样式 .form-control

<select class="form-control">
    <option>1option>
    <option>2option>
select>

校验状态

• .has-error 错误状态
• .has-success 成功状态
• .has-warning 警告状态

<form class="form-horizontal">
    
    <div class="form-group ">
        <label class="col-sm-2">电子邮件label>
        <div class="col-sm-10 ">
        <input class="form-control" type="email" placeholder="请输入电子邮件">
        div>
    div>

    
    <div class="form-group has-success">
        <label class="col-sm-2">电子邮件label>
        <div class="col-sm-10 ">
        <input class="form-control" type="email" placeholder="请输入电子邮件">
        div>
    div>

    
    <div class="form-group has-error">
        <label class="col-sm-2 control-label">电子邮件label>
        <div class="col-sm-10 ">
        <input class="form-control" type="email" placeholder="请输入电子邮件">
        div>
    div>
    <div class="form-group has-warning">
        <label class="col-sm-2 control-label">电子邮件label>
        <div class="col-sm-10 ">
        <input class="form-control" type="email" placeholder="请输入电子邮件">
        div>
    div>
form>

不懂
又是.control-label（同步?）

添加额外图片(字体图标，非图片)

• .glyphicon-ok 成功
• .glyphicon-warning-sign 警告
• .glyphicon-remove 错误

<form class="form-horizontal">
    <div class="form-group ">
        <label class="col-sm-2">电子邮件label>
        <div class="col-sm-10 ">
        <input class="form-control" type="email" placeholder="请输入电子邮件">
        div>
    div>

    <div class="form-group has-success">
        <label class="col-sm-2">电子邮件label>
        <div class="col-sm-10 has-feedback">
            <input class="form-control" type="email" placeholder="请输入电子邮件">
            <span class="glyphicon glyphicon-ok form-control-feedback">span>
        div>
    div>

    <div class="form-group has-warning">
        <label class="col-sm-2 control-label">电子邮件label>
        <div class="col-sm-10 has-feedback">
            <input class="form-control" type="email" placeholder="请输入电子邮件">
            <span class="glyphicon glyphicon-warning-sign form-control-feedback">span>
        div>
    div>
    <div class="form-group has-error">
        <label class="col-sm-2 control-label">电子邮件label>
        <div class="col-sm-10 has-feedback">
            <input class="form-control" type="email" placeholder="请输入电子邮件">
            <span class="glyphicon glyphicon-remove form-control-feedback">span>
        div>
    div>
form>

1.input后面添加span，给span添加样式.glyphicon和.glyphicon-ok，即
2.给span添加样式.form-control-feedback，即
3.给外围div增加样式.has-feedback

深入
(1).form-control-feedback
(2).has-feedback
(3).glyphicon与.glyphicon-ok同时使用？

控制大小

• .input-lg
• .input-sm

class="form-control input-lg" type="text" placeholder="大文本">

class="form-control input-sm" type="text" placeholder="小文本">

class="form-control" type="text" placeholder="默认文本">

图片

.img-rounded 圆角矩形
.img-circle 圆形或椭圆形
.img-thumbnail 缩略图（边框，圆角矩），已经具备响应式功能
.img-responsive 响应式图片

<img src="image/1.jpg" alt="原图">
<img src="image/1.jpg" alt="圆角矩形" class="img-rounded">
<img src="image/1.jpg" alt="圆形或椭圆形" class="img-circle img-responsive">
<img src="image/1.jpg" alt="缩略图" class="img-thumbnail">