bootstrap学习笔记——04——表单和图片

表单

基本格式
//实现基本的表单样式 outline:none 点击的时候没有虚线
<form action="#">
<div class="form-group">
<label for="email">电子邮箱</label>
<input class="form-control" id="email" type="email" placeholder="请输入你的邮箱">
</div>

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

</form>
注：只有正确设置了输入框的type类型，才能被赋予正确的样式。支持的输入框控件包括：
text、password、datetime、datetime-local、date、month、time、week、number、
email、url、search、tel和color。
内联表单
//让表单左对齐浮动，并表现为inline-block内联块结构
<form action="#" class="form-inline">
注：当小于768px，会恢复独占样式
表单合组
//前后增加片段
<div class="form-group">
<label for="password">应收金额：</label>
<div class="input-group">
<div class="input-group-addon">￥</div>
<input class="form-control" id="price" type="text" placeholder="请输入金额">
<div class="input-group-addon">.00</div>
</div>
水平排列
//让表单内的元素保持水平排列
<form class="form-horizontal">

<div class="form-group">
<label for="email" class="col-sm-2 control-label">电子邮箱</label>
<div class="col-sm-4">
<input class="form-control " id="email" type="email" placeholder="请输入你的邮箱">
</div>
</div>

<div class="form-group">
<label for="password" class="col-sm-2 control-label">密码</label>
<div class="col-sm-4">
<input class="form-control" id="password" type="password" placeholder="请输入你的密码">
</div>
</div>
</form>
注：这里用到了col-sm栅格系统，后面章节会重点讲解，而control-label表示和父元素样式同步。
复选框和单选框
//设置复选框，在一行
<div class="checkbox">
<label for="like1">
<input id="like1" type="checkbox">体育
</label>
</div>
<div class="checkbox">
<label for="like2">
<input id="like2" type="checkbox">音乐
</label>
</div>
<div class="checkbox">
<label ><input type="checkbox" class="">美术
</label>
</div>
//设置禁用的复选框
<div class="checkbox disabled">
<label for="like1">
<input id="like1" type="checkbox" disabled="disabled">体育
</label>
</div>

//设置内联一行显示的复选框
<label class="checkbox-inline" ><input type="checkbox" class="">天文
</label>

<label class="checkbox-inline" ><input type="checkbox" class="">地理
</label>
//设置单选框
<label class="radio-inline" ><input type="radio" class="">男
</label>
<label class="radio-inline disabled" ><input type="radio" class="" disabled>女
</label>

<div class="radio disabled"><label for=""><input type="radio" disabled="disabled">测试</label></div>
下拉列表
//设置下拉列表
<select name="" id="" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
校验状态
//设置为错误状态
<div class="form-group has-error"></div>
例：
<div class="form-group has-success">
<label for="password" class="col-sm-2 control-label">密码</label>
<div class="col-sm-4">
<input class="form-control" id="password" type="password" placeholder="请输入你的密码">
</div>
</div>

注：还有其他状态如下

//label标签同步相应状态如果想要把label和input的（css，颜色一样）需要添加control-label
<label for="" class="control-label">Input with success</label>
添加额外的图标
//文本框右侧内置文本图标
<div class="form-group has-feedback">
<label for="">电子邮件 </label>
<input type="email" class="form-control">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

控制尺寸
//从大到小
<input type="password" class="form-control input-lg">
<input type="password" class="form-control">
<input type="password" class="form-control input-sm">

图片

图片形状
//三种形状
（1.图片四角为圆形）
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1527505592894&di=63650eefcd4c95e8eb5725c1aa1a586d&imgtype=0&src=http%3A%2F%2Fpic15.photophoto.cn%2F20100402%2F0036036889148227_b.jpg" alt="美女1" class="img-rounded">
（2.图片为椭圆形）
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1527505592894&di=17c39b97f7d6ae82c1940468cc478a79&imgtype=0&src=http%3A%2F%2Fpic25.photophoto.cn%2F20121220%2F0036036800277861_b.jpg" alt="美女2" class="img-circle">
（3.图片有边框）
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1527505592893&di=78879c09be5c36c3c9b28f543077be05&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F15%2F36%2F76%2F09k58PICnqS_1024.jpg" alt="美女3" class="img-thumbnail">

//响应式图片（图片可以随着窗口变大变小）
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1527505592893&di=78879c09be5c36c3c9b28f543077be05&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F15%2F36%2F76%2F09k58PICnqS_1024.jpg" alt="美女4" class="img-responsive">

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单和图片</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body  style="margin: 50px">

     <!-- <form action="#"   class="form-inline">  //让所有表单放到一行上，内联表单 -->

<form  class="form-horizontal">
      
                  <div  class="form-group">
                             <label for="email"   class="col-sm-2  control-label">电子邮箱</label>
                             <div class="col-sm-4"> 
                                          <input   class="form-control  " id="email" type="email"   placeholder="请输入你的邮箱"> 
                             </div>
                 </div>
                
                 <div   class="form-group  has-success">
                             <label for="password"  class="col-sm-2  control-label">密码</label>
                             <div class="col-sm-4"> 
                                           <input    class="form-control"     id="password" type="password"   placeholder="请输入你的密码"> 
                             </div>
                 </div>


                  <div class="checkbox  disabled">
                           <label for="like1">
                                   <input id="like1"   type="checkbox"  disabled="disabled">体育
                           </label>
                  </div>
                 <div class="checkbox">
                           <label for="like2">
                                    <input  id="like2"  type="checkbox">音乐
                                    </label>
                  </div>
                 <div class="checkbox">
                            <label ><input type="checkbox" class="">美术
                            </label>
                </div>


                <label  class="checkbox-inline" ><input type="checkbox" class="">天文
                            </label>

                <label class="checkbox-inline"  ><input type="checkbox" class="">地理
                </label>


                <label class="radio-inline"  ><input type="radio" class="">男
                </label>
                <label class="radio-inline  disabled"  ><input type="radio" class=""  disabled>女
                </label>
                 
                 <div  class="radio  disabled"><label for=""><input type="radio"  disabled="disabled">测试</label></div>


                 <select name="" id="" class="form-control">
                       <option value="1">1</option>
                       <option value="2">2</option>
                       <option value="3">3</option>
                       <option value="4">4</option>
                       <option value="5">5</option>
                 </select>


                 <div class="form-group has-error">hello</div>
                 <label for="" class="control-label">Input with success</label>


                 <div  class="form-group has-feedback">
                             <label for="">电子邮件 </label>
                             <input type="email"  class="form-control">
                             <span class="glyphicon glyphicon-ok form-control-feedback"></span>
                 </div>

                 <input type="password" class="form-control input-lg">
                 <input type="password" class="form-control">
                 <input type="password" class="form-control input-sm">


                 <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1527505592894&di=63650eefcd4c95e8eb5725c1aa1a586d&imgtype=0&src=http%3A%2F%2Fpic15.photophoto.cn%2F20100402%2F0036036889148227_b.jpg" alt="美女1" class="img-rounded">
                 <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1527505592894&di=17c39b97f7d6ae82c1940468cc478a79&imgtype=0&src=http%3A%2F%2Fpic25.photophoto.cn%2F20121220%2F0036036800277861_b.jpg" alt="美女2" class="img-circle">
                 <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1527505592893&di=78879c09be5c36c3c9b28f543077be05&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F15%2F36%2F76%2F09k58PICnqS_1024.jpg" alt="美女3" class="img-thumbnail">



                 <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1527505592893&di=78879c09be5c36c3c9b28f543077be05&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F15%2F36%2F76%2F09k58PICnqS_1024.jpg" alt="美女4" class="img-responsive">
</form> 





<!-- 
<form >
     <div  class="form-group">
           <label for="email">电子邮箱</label>
      <input   class="form-control" id="email" type="email"   placeholder="请输入你的邮箱"> 
     </div>
    
     <div   class="form-group">
           <label for="password">密码</label>
      <input    class="form-control"     id="password" type="password"   placeholder="请输入你的密码"> 
     </div>

      <div   class="form-group">
           <label for="password">应收金额：</label>
           <div class="input-group">
                   <div  class="input-group-addon">￥</div>
                 <input    class="form-control"     id="price" type="text"   placeholder="请输入金额"> 
                 <div  class="input-group-addon">.00</div>
     </div>
      
     </div>
       
</form> -->


	<script src="js/bootstrap.js"></script>
	<script src="js/jquery.min.js"></script>
</body>
</html>

bootstrap学习笔记——04——表单和图片

猜你喜欢