bootstrap之表单和图片

最新推荐文章于 2019-11-17 22:58:06 发布
最新推荐文章于 2019-11-17 22:58:06 发布
阅读量77 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/Harold-Hua/p/5243921.html
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单和图片</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>

<body style="margin:50px;">

<!-- 1.基本表单样式 -->

    <form>
        <div class="form-group">
            <label>电子邮件：</label>
            <input type="email" placeholder="请输入你的电子邮件" class="form-control">
        </div>
        <div class="form-group">
            <label>密码：</label>
            <input type="password" placeholder="请输入你的密码" class="form-control">
        </div>
    </form>
    <!-- 只有正确设置了输入框的type类型，才能被赋予正确的样式。支持的输入框控件：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel、color。 -->
<br/>

<!-- 2.    内联表单 -->
    <form class="form-inline">
        <div class="form-group">
            <label>电子邮件：</label>
            <input type="email" placeholder="请输入你的电子邮件" class="form-control">
        </div>
        <div class="form-group">
            <label>密码：</label>
            <input type="password" placeholder="请输入你的密码" class="form-control">
        </div>
    </form>
<br/>

<!-- 3.表单合组 -->
    <form>
        <div class="input-group">
            <div class="input-group-addon">
                ￥
            </div>
            <input type="text" class="form-control" placeholder="请输入你的价格">
            <div class="input-group-addon">
                .00
            </div>
        </div>
    </form>
<br/>

<!-- 4.水平排列 -->
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">电子邮件：</label>
            <div class="col-sm-10">
                <input type="email" placeholder="请输入你的电子邮件" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">密码：</label>
            <div class="col-sm-10">
                <input type="password" placeholder="请输入你的密码" class="form-control">
            </div>
        </div>
    </form>
    <!-- 涉及到栅格系统 -->
<br>

<!-- 5.复选框和单选框 -->
    <form class="form-horizontal">
        <!-- 设置复选框在一行 -->
        <div class="checkbox">
            <label>
                <input type="checkbox">体育
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox">音乐
            </label>
        </div>

        <!-- 设置禁用的复选框 -->
        <div class="checkbox disabled">
            <label>
                <input type="checkbox" disabled>语文
            </label>
        </div>

        <!-- 设置内联一行显示的复选框 -->
        <label class="checkbox-inline">
            <input type="checkbox">英语
        </label>
        <label class="checkbox-inline disabled">
            <input type="checkbox" disabled>数学
        </label>
        <br>

        <!-- 设置单选框 -->
        <div class="radio disabled">
            <label>
                <input type="radio" name="sex" disabled>gay
            </label>
            <label>
                <input type="radio" name="sex" disabled>les
            </label>
        </div>
        <label class="radio-inline">
            <input type="radio" name="sex">男
        </label>
        <label class="radio-inline">
            <input type="radio" name="sex">女
        </label>
    </form>
<br>

<!-- 6.下拉列表 -->
    <form>
        <select class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </form>
<br>

<!-- 7.校验状态 -->
    <!--
    has-error：错误状态
    has-success：成功状态
    has-warning：警告状态
    -->
    <form>
        <!-- control-label：label标签同步相应状态 -->
        <div class="form-group has-success">
            <label class="control-label">电子邮件：</label>
            <input type="email" class="form-control" placeholder="请输入你的电子邮件">
        </div>
    </form>
<br>

<!-- 8.添加额外的图标 -->
    <!--
    文本框右侧内置文本图标
    glyphicon-ok；成功状态
    glyphicon-warning-sign：警告状态
    glyphicon-remove：错误状态
     -->
     <!-- has-feedback：设置相对点 -->
    <form>
        <div class="form-group has-success has-feedback">
            <label class="control-label">电子邮件：</label>
            <input type="email" class="form-control" placeholder="请输入你的电子邮件">
            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>
    </form>
<br>

<!-- 9.控制尺寸 -->
    <!--
    input-lg：大
    input-sm：小
    -->
    <form>
        <div class="form-group">
            <label>密码：</label>
            <input type="password" placeholder="请输入你的密码" class="form-control input-lg">
        </div>
    </form>
<br>

<!-- 10.图片 -->
    <!-- 图片形状 -->
    <!--
    img-rounded：圆角矩形
    img-circle：正/椭圆
    img-thumbnail：微缩图
    -->
    <img style="width:800px;height:600px;" src="img/1.jpg" alt="图片" class="img-rounded">
    <img style="width:800px;height:600px;" src="img/1.jpg" alt="图片" class="img-circle">
    <img style="width:800px;height:600px;" src="img/1.jpg" alt="图片" class="img-thumbnail">

    <!-- 响应式图片 -->
    <!-- img-responsive -->
    <img style="width:800px;height:600px;" src="img/1.jpg" alt="图片" class="img-circle img-responsive">




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

 

 

 

转载于:https://www.cnblogs.com/Harold-Hua/p/5243921.html

weixin_30949361
关注
Bootstrap表单布局详解
qq_32506555的博客
07-20 3930
Bootstrap表单时我们前端必学的内容，所以我给大家写了一个关于表单的Bootstrap学习教程： 在Bootstrap 提供了下列类型的表单布局： 垂直表单（默认） -> 这个不好看，都是手机版了，PC版占一排不好看； 内联表单 -> 我相信这个才是你想要的，PC版响应横排，手机版响应竖排。 水平表单 -> 用栅格系统控制显示   一、垂直表单 垂直
bootstrap登录表单
06-01
Bootstrap是世界上最受欢迎的前端开发框架之一，用于构建响应式、移动优先的网页项目。这个“bootstrap登录表单”是一个基于Bootstrap构建的用户登录界面，它适用于创建简洁、现代且易于使用的网页登录页面。...
Bootstrap中水平排列的表单form-inline
weixin_34129145的博客
10-02 703
1 &lt;html&gt; 2 &lt;head&gt; 3 &lt;title&gt;初识Bootstrap&lt;/title&gt; 4 &lt;meta charset="utf-8"&gt; 5 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0&
【Bootstrap3.0建站笔记一】表单元素排版
人生若南柯一梦
06-20 2456
【Bootstrap3.0建站笔记一】表单元素排版
Bootstrap~表单Form
weixin_34239169的博客
07-21 153
回到目录 在进行自己的后台改版时，大体布局都使用了bootstrap，剩下的表单部分没理由不去使用它，对于表单的美化和布局，bootstrap做的也是很不错的，有大气的边框，多功能的按钮及宏观的表单布局，一切都是那么的完整与完美！ 普通表单 我们需要将表单元素包裹到form-group类里，一般以&lt;div class="form-group"&gt;...&lt;/div&gt;来...
Bootstrap表单布局样式
01-24 150
1.并排和下拉选项 <form class="form-horizontal" role="form"> <fieldset> <legend>配置数据源</legend> <div ...
第四章之BootStrap表单与图片
09-02
在本章中，我们将专注于Bootstrap中的表单和图片处理。 **一、Bootstrap 表单** 1. **基本格式**：Bootstrap 提供了 `.form-group` 类来组织表单元素，如输入框、标签等。例如，通过添加 `class="form-control"` ...
基于vue+ bootstrap实现图片上传图片展示功能
08-30
vue和bootstrap是目前非常流行的前端开发框架和UI框架，通过结合两者的优势，可以实现图片上传和展示功能。该功能可以应用于各种Web应用程序中，例如社交媒体、博客、电商平台等。 二、实现图片上传功能 图片上传...
Bootstrap实现水平排列的表单
09-02
在Bootstrap中，实现水平排列的表单是常见的需求，这可以帮助用户更直观地阅读和填写表单信息。下面我们将详细介绍如何使用Bootstrap来创建水平排列的表单。 首先，为了创建一个水平表单，你需要在`<form>`元素中...
Bootstrap表单布局
小新正在敲代码
11-14 906
本月完成
bootstrap-表单样式
wendZzoo的博客
12-21 1369
水平表单 &lt;form class="form-horizontal" role="form"&gt; &lt;div class="form-group"&gt; &lt;label for="inputEmail" class="col-sm-2 control-label"&gt;邮箱&lt;/label&g
Bootstrap 表单
21号先锋者
02-08 200
@{ Layout = null; } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width" /&gt; &lt;title&gt;biaodan&lt;/title&gt; &
form-inline+form-group 实现表单横排显示（Bootstrap）
weixin_30294709的博客
07-10 235
运行后的效果如下： 使用时要注意如下：如果form元素有form-line修饰，那么form-group 所修饰的元素内部只能包含一个元素，否则，不会达到预期效果 转载于:https://www.cnblogs.com/a-du/p/7146398.html...
bootstrap-为水平排列的表单和内联表单设置可选的图标
weixin_34326429的博客
02-15 112
说明为水平排列的表单和内联表单设置可选的图标示例<!DOCTYPEhtml> <htmllang="zh-CN"> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> ...
bootstrap学习笔记-CSS-表单布局
chijierui5435的博客
06-15 110
<!doctype html> <html> <head> <meta charset="gbk"> <title>布局学习</title> <meta name="viewport" content="w...
一款非常漂亮的bootstrap表单checkbox/radio样式推荐
热门推荐
Love.Hope.Faith
03-02 3万+
如题。 http://www.bootcss.com/p/icheck/ 这个bootstrap提供的icheck插件，首先是非常小。效率相对较高。其优点如下图所示： 可以有十种颜色可以供用户自定义。样式也是够丰富的。更重要的是，其样式是根据css来的。也就是用户如果觉得不爽，可以直接修改css文件来达到进一步的自定义。 如果你使用一个盒子来包住它。元素的大小就会根据父级元素来进行
1-17. Bootstrap 表单样式汇总
淡泊以明志，宁静以致远
01-13 3001
网站数据交互一般都是通过表单实现 Bootstrap中表单布局类型有哪些？ 垂直表单 内联表单 水平表单 向父 <form> 元素添加 role="form" 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。 向所有的文本元素 <input>、<textarea> 和 &l...
bootstrap笔记（七）——表单样式
兮动人
11-17 378
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--支持移动设备优先--> <meta name="viewport" content="width=...
Bootstrap登录验证表单含验证码实现
在这个登录界面中，作者使用了Bootstrap的样式和组件来设计界面，同时引入了BootstrapValidator库来实现表单验证。该登录表单可能不支持旧版的IE浏览器，特别是IE8及以下版本。" Bootstrap是一个广泛使用的HTML、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值