Bootstrap 基本样式-图片、表单

最新推荐文章于 2022-11-02 20:03:30 发布

litengbin

最新推荐文章于 2022-11-02 20:03:30 发布

阅读量318

点赞数

分类专栏：前端-Bootstrap

前端-Bootstrap 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

1 : 圆角 img-rounded
2 : 圆形 img-circle
3 : 缩略图 img-thumbnail

圆角

图片的四个边角变得圆滑

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
  
<img src="example.gif" class="img-rounded">

圆形

图片以圆形表示

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
  
<img src="example.gif" class="img-circle">

缩略图

图片以缩略图的形式表示

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
  
<img src="http://how2j.cn/example.gif" class="img-thumbnail">

BOOTSTRAP 基本样式表单

对输入元素使用form-control 可以去除阴影，边框附带淡蓝色，输入状态更加柔和

表单输入元素
一般会在文本框密码框和文本域上使用

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
   
<input type="text" class="form-control" value="文本框">
 
<br>
 
<input type="password" class="form-control" value="password">
<br>
<textarea  class="form-control">文本域</textarea>
<br>
<select class="form-control">
   <option>Java</option>
   <option>Html</option>
   <option>IOS</option>
</select>