Bootstrap-表单和图片

最新推荐文章于 2022-10-09 14:09:16 发布

幸运的菇凉

最新推荐文章于 2022-10-09 14:09:16 发布

阅读量186

点赞数

分类专栏：学习心得

本文链接：https://blog.csdn.net/qq_27626645/article/details/78808448

版权

学习心得专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!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 ><!--左浮动 成为一行class="form-inline"-->
        <div class="form-group has-success has-feedback"><!--输入成功  has-error/haswarning-->
        <label class="control-label">电子邮件</label><!--label可以点击文字也出发事件-->
        <input type="email" class="form-control" placeholder="请输入"/><!--块级元素-->
            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>

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

        <div class="input-group">
            <div class="input-group-addon">￥</div>
            <input type="text" class="form-control" placeholder="请输入"/>
        </div>
    </form>
    <!--水平排列：标签和文本框为一行-->
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label"><!--同步，和上面的格式一样-->电子邮件</label>
            <div class="col-sm-10"><!--col-sm指距离左边的宽度-->
            <input type="email" class="form-control" placeholder="请输入"/><!--块级元素-->
            </div>
        </div>

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

        <div class="checkbox">
            <label >
                <input type="checkbox">体育
            </label>
        </div>
        <div class="checkbox disabled" ><!--文字和选择框都禁用-->
            <label >
                <input type="checkbox" >音乐
            </label>
        </div>
<!--内联一行-->
        <label class="checkbox-inline">
            <input type="checkbox">体育
        </label>
        <label class="checkbox-inline ">
            <input type="checkbox">体育
        </label>
        <label class="radio-inline">
            <input type="radio"/>男
        </label>
        <!--下拉列表-->
        <select class="form-control">
            <option >1</option>
            <option >2</option>
            <option >3</option>
        </select>
    </form>
<!--图片-->
    <!--三种形状-->
    <img src="" alt="" class="img-rounded"/><!--圆角矩形-->
    <img src="" alt="" class="img-circle"/><!--圆-->
    <img src="" alt="" class="img-thumbnail"/><!--缩略图，有白色边框-->
    <!--响应式图片-->
    <img src="" alt="" class="img-responsive"/><!--响应式：自动缩放-->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

幸运的菇凉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap-表单和图片

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"></head>...
复制链接

扫一扫

专栏目录