Bootstrap学习笔记-表单

最新推荐文章于 2019-09-17 14:11:31 发布
最新推荐文章于 2019-09-17 14:11:31 发布
阅读量153 收藏
点赞数
分类专栏： BootStrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37791322/article/details/79744999
版权

内联表单

    1.源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/js/jquery-1.12.3.min.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/jquery.bootgrid.min.css">
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="/js/jquery.bootgrid.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap-datetimepicker.min.js"></script>
    <link rel="stylesheet" href="/css/bootstrap-datetimepicker.min.css" type="text/css"></link>
    <title>Title</title>
</head>
<body>
    <div class="container">

        <!--class="form-inline" 表示创建的为内联表单
                内联表单的内容变为自适应的
        -->
        <!--class="sr-only" label属性文字变为不可见-->
        <form role="form" class="form-inline">
            <div class="form-group">
                <label>用户名:</label>
                <input type="email" class="form-control" placeholder="Enter email">
                <label>注册日期:</label>
                <input type="date" class="form-control" placeholder="Enter date">
            </div>

            <!--密码-->
            <div class="form-group">
                <label>密码:</label>
                <input type="password" class="form-control" placeholder="Enter password">
            </div>

            <!--选择文件-->
            <div class="form-group">
                <label >选择文件:</label>
                <input type="file">
                <p class="help-block">选择你需要的文件</p>
            </div>

            <div class="form-group">

            </div>
        </form>
    </div>
</body>
</html>

2.效果


水平表单

1.源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/js/jquery-1.12.3.min.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/jquery.bootgrid.min.css">
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="/js/jquery.bootgrid.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap-datetimepicker.min.js"></script>
    <link rel="stylesheet" href="/css/bootstrap-datetimepicker.min.css" type="text/css"></link>
    <title>Title</title>
</head>
<body>
    <div class="container">

        <!--
            class="form-control"  圆角效果
            class="col-sm-2 control-label" 栅格对其
        -->

        <form  class="form-horizontal" role="form">

            <!--邮箱-->
            <div class="form-group">
                <label class="col-sm-2 control-label">email:</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" placeholder="Enter email">
                </div>
            </div>

            <!--密码-->
            <div class="form-group">
                <label class="col-sm-2 control-label">password:</label>
                <div class="col-sm-10">
                    <input type="password"  class="form-control"  placeholder="Enter password">
                </div>
            </div>
            
            <!--复选框-->
            <div class="form-group">
                <div class="col-sm-10 col-sm-offset-2">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> 记住密码
                        </label>
                    </div>
                </div>
            </div>

            <!--按钮-->
            <div class="form-group">
                <div class="col-sm-10 col-sm-offset-2">
                    <button type="submit" class="btn btn-default">登录</button>
                </div>
            </div>
        </form>
    </div>
</body>
</html>


2.效果

斗木獬
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap学习笔记--表单
qq_38409944的博客
05-27 315
Bootstrap表单有三种类型： 1. 垂直表单 ：表单元素垂直分布 2. 内联表单：表单元素行内分布，左对齐 3. 水平表单：表单元素水平分布 默认：所有文本&amp;amp;amp;lt;input&amp;amp;amp;gt;，&amp;amp;amp;lt;textarea&amp;amp;amp;gt;和 &amp;amp;amp;lt;select&amp;amp;amp;gt;类的元素.form-control都有100％的宽度。
Bootstrap5学习笔记
weixin_48778425的博客
10-20 1029
一、布局 1.1 网格 先div.container，再div.row + div.col，例如col-6，col-md-2代表当宽度大于md≥768px才生效 1.2 列 掌握垂直对齐 + 水平对齐 + offset列偏移 + 独立列的示例（演示图片+环绕文字） 1.3 列填充 写在row上，gx-5 水平方向，gy-5 垂直方向间隙，g-5 水平垂直同时都有列间隙，g-0 是无间隙 二、页面内容 2.1 排版 标题 + 显示标题（比h1-h6还大）+ 内联文本元素（下划线，删除线，斜体等）+ 列
bootstrap学习笔记<五>（表单一）
12-05 117
表单 bootstrap为表单提供三种样式：默认表单，水平表单，内联表单。 <form class="form-horizontal" role="form"> <!--默认表单--> </form> <!--分割线--> <form class="form-horizontal" role="form"&g...
深入理解bootstrap 学习笔记-表单元素
weixin_30394333的博客
09-18 80
1. bootstrap在定义input元素样式时，都指定了type类型，所以必须声明type类型 2. select元素：多行选择设置mulitiple属性为multiple 插件：bootstrap-select ，Bootstrap Multiselect 3. textarea元素：设置 .form-control 时，cols不再起作用，因为.formcontrol样式的表单控件...
bootstrap学习笔记-CSS-表单
chijierui5435的博客
06-15 83
<!doctype html> <html> <head> <meta charset="gbk"> <title>布局学习</title> <meta name="viewport" content...
bootstrap学习笔记-CSS-表单布局
chijierui5435的博客
06-15 91
<!doctype html> <html> <head> <meta charset="gbk"> <title>布局学习</title> <meta name="viewport" content="w...
bootstrap学习笔记--bootstrap组件
abn1122的博客
01-07 168
前面已经学习了bootstrap环境搭建以及基本布局方面的知识，下面将学习下关于bootstrap的相关组件，知识点有点多。 关于bootstrap组件知识点目录： Bootstrap--代码显示 Bootstrap--表格 Bootstrap--表单 Bootstrap--按钮 Bootstrap--图片 Bootstrap--辅助类 Bootstrap--响应式实...
Bootstrap学习笔记系列3-------Bootstrap简单表单显示
zzz19的博客
09-17 232
表单布局 垂直或基本表单 基本的表单结构时BootStrap自带的，创建基本表单的步骤如下： 向父 <form>元素添加 role = “form”； 为了获取最佳的间距，把标签和控件放在一个 div...
Bootstrap学习笔记 21 - Forms
Cynhard的专栏
12-04 504
Forms 以 .form-control 修饰的表单控件宽度为 100%，例如：<input>，<textarea>，<select> Bootstrap 提供了 3 种表单样式：Vertical，Horizontal，Inline 如何应用表单样式？ form 节点添加 role="form" 将 label 与 表单控件应用 <div class="form-group"> <input>，
bootstrap学习笔记-html5
12-22
这个“bootstrap学习笔记-html5”压缩包文件显然包含了有关如何使用Bootstrap和HTML5进行网页设计的资料，非常适合初学者入门。接下来，我们将深入探讨这两个重要主题。 HTML5（超文本标记语言第五版）是网页开发的...
Bootstrap简单表单显示学习笔记
11-28
基本的表单结构时BootStrap自带的，创建基本表单的步骤如下： 1、向父<form>元素添加role = “form”； 2、为了获取最佳的间距，把标签和控件放在一个div.form-group中,div放在父form下； 3、向所有的文本元素...
bootstrap模板paper-m开发笔记
06-10
Bootstrap模板“Paper-M”开发笔记 Bootstrap是一款广受欢迎的开源前端框架，用于快速构建响应式、移动优先的网站。Paper-M是基于Bootstrap的一个主题模板，它以简洁、清新的纸张风格为设计灵感，提供了丰富的组件...
bootstrap学习笔记之初识bootstrap
10-22
为了更好地学习和应用Bootstrap，建议通过官方文档或中文网了解详细信息，实践操作并逐步掌握各个组件的用法。此外，不断探索和研究社区中丰富的插件和扩展，将使你的Bootstrap项目更具特色和功能。 总之，...
matlab下载.pdf
07-14
matlab下载下载方式及注意事项
Android系统原理及开发要点详解-从入门到精通
07-13
Android系统原理及开发要点详解 Java4 Android视频教程 Android开发视频教学 从入门到精通 Android的软件管理器的开发教程视频 Android深入浅出_Android高端课程分享试听 JavaWeb Android系统的手机防盗软件的实现 Android开发入门与实战随书视频 视频列表.txt 0.0MB 开发入门与实战代码.rar 6.1MB 第9章 我来“广播”你的“意图”——Intent和Broadcast面对面.wmv 15.1MB 第8章 移动信息仓库——Android的数据存储操作之轻轻地我保护——SharedPreferences存储-2.wmv 0.6MB 第8章 移动信息仓库——Android的数据存储操作之轻轻地我保护——SharedPreferences存储-1.wmv 24.3MB 第8章 移动信息仓库——Android的数据存储操作之Android数据存储概述.wmv 57.7MB 第7章 良好的学习开端——Android基本组件介绍之友好地互动交流——对话框(Dialog)介绍与实例-2.wmv 7.
GESP等级认证 2024年6月 C++一级真题
最新发布
07-14
GESP等级认证 2024年6月 C++一级真题 从官网上刚刚下载下来的,题都是热乎的,这可是最新真题 大家看一看瞧一瞧,走过路过不要错过,免费下载,全篇无水印,不好用随便吐槽我! 涵盖选择题,判断题,编程题,基础知识多,满满的干货,非常建议下载!!!!! 萌新小白来做做题,复习巩固都很合适!
大学生创业计划书(35)三份资料.doc
07-14
大学生创业计划书(35)三份资料.doc
大学生创业计划书(33)三个文档.doc
07-14
大学生创业计划书(33)三个文档.doc
sudo keystone-manage bootstrap --bootstrap-password cqu2022\ --bootstrap-admin-url http://localhost:5000/v3/ \ --bootstrap-internal-url http://localhost:5000/v3/ \ --bootstrap-public-url http://localhost:5000/v3/ \ --bootstrap-region-id RegionOne
06-12
- `--bootstrap-admin-url`：用于设置管理员API终端的URL。 - `--bootstrap-internal-url`：用于设置内部API终端的URL。 - `--bootstrap-public-url`：用于设置公共API终端的URL。 - `--bootstrap-region-id`：用于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值