文档章节

bootstrap表单样式

kitty1116
 kitty1116
发布于 2018/03/12 15:10
字数 242
阅读 13
收藏 0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
    <form role="form" class="form-inline"><!--表单变成内联,宽度自适应-->
    <div class="form-group">
        <label>密码</label>
        <input type="password" name="" class="form-control" placeholder="Enter password">
    
    </div>
        <div class="form-group">
            <label>email</label>
            <input type="email" name="" class="form-control" placeholder="Enter email">
            <button type="submmit">提交</button>

        </div>
        <div class="form-group">
            <label class="sr-only">选择文件</label> <!--lable添加class sr-only 可以隐藏lable-->
            <input type="file" name="">
            <p class="help-block">选择你需要的文件</p>
        
        </div>


    </form>
    <form role="form" class="form-horizontal">
        <div class="form-group">
                <label class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                    <input type="email" name="" class="form-control" placeholder="email"><!--加类form-control带圆角效果-->
                </div>
    
    
        </div>
        <div class="form-group">
                <label class="col-sm-2 control-label">password</label>
                <div class="col-sm-10">
                    <input type="password" name="" placeholder="password">
                </div>
    
    
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2"><!--添加类名col-md-offset-2向右移动两个位子-->
                <div class="checkbox">
                    <label>

                        <input type="checkbox" name="">记住密码
                    </label>

                </div>


            </div>


        </div>    
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submmit" class="btn btn-default">登录</button>

            </div>


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

© 著作权归作者所有

下一篇: js-幸运转盘
kitty1116
粉丝 0
博文 109
码字总数 31493
作品 0
武汉
前端工程师
私信 提问
Bootstrap 表单

在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标记和扩展的类即可创建出不同样式的表单。 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默...

wybo521
2016/01/26
91
0
Django Bootstrap toolkit

bootstrap为前端的快速开发提供了一个很好的框架;Django则为后端的快速提供了全方位的支持,但是需要自己负责实现前端的视觉部分。一前一后两个框架正好可以结合构建一套完整的开发方案出来...

XuYuan
2013/06/28
5.9K
0
Bootstrap学习笔记(二)

7.响应式表单 表单组样式:将和表单元素包含其中,可以获得更好的排列 表单元素样式:常用于、、元素 内联表单样式(用于form表单):可以使元素一行显示 在一侧加入附加内容 或 类应用到一系...

Mr_欢先生
2017/11/02
0
0
Bootstrap响应式前端框架笔记四——表单

Bootstrap响应式前端框架笔记四——表单 一、基本表单样式 在Bootstrap框架中,可以为表单标签添加form-control属性来为其设置默认样式,默认表单控件的宽度将充满父容器标签。需要注意,在布...

珲少
2016/12/06
262
0
Bootstrap WPF Style,Bootstrap风格的WPF样式

简介 GitHub地址:https://github.com/ptddqr/bootstrap-wpf-style 此样式基于bootstrap-3.3.0,样式文件里的源码行数都是指的这个版本.CSS源文件放到了Content文件夹下的bootstrap.css WPF样式...

刘元蛟
03/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

IT兄弟连 HTML5教程 HTML5的基本语法 简单HTML实例制作

现在学习HTML5的方式 目前HTML还处于HTML4与HTML5之间的过渡使用阶段。移动端的Web界面开发已经全面使用HTML5的技术,而在PC端由于用户升级浏览器周期较长,面临着页面的兼容性问题,以及开发...

老码农的一亩三分地
25分钟前
3
0
[Android] 【每日更新书源】「阅读」APP -100+ 精品书源一键导入!每天自动更新最新书源!

我特地写了个爬虫爬取书源,每天自动更新书源(URL是固定的)!大家也可以定期导入一下! 放心!导入时会自动去除重复书源的! 前段时间我发过一个书源大礼包的帖子,不过现在已经无法编辑修...

xiaogg
29分钟前
10
0
Qt编写自定义控件58-直方对称图

一、前言 本控件也非原创控件,是参考网上的代码而来的,对称顾名思义就是将画布平均成上下两部分,将设置的值自动按照画布高度的一半作为参照高度进行绘制,然后增加动态过渡效果,有点类似...

飞扬青云
39分钟前
7
0
Java中创建对象的5种方法

将会列举5种方法去创建 Java 对象,以及他们如何与构造函数交互,并且会有介绍如何去使用这些方法的示例。 作为一个 Java 开发人员,我们每天都会创建大量的 Java 对象,但是我们通常会使用依...

liululee
42分钟前
6
0
Java描述设计模式(11):观察者模式

本文源码:GitHub·点这里 || GitEE·点这里 一、观察者模式 1、概念描述 观察者模式是对象的行为模式,又叫发布-订阅(Publish/Subscribe)模式。观察者模式定义了一种一对多的依赖关系,让多...

知了一笑
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部