<Bootstrap> 学习笔记四. 表单组和输入框组的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css">
    <script src="bootstrap/js/jquery-3.2.1.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <style>

    </style>
</head>
<body>
<form>
    <div class="container">
        <!--输入框-->
        <div class="form-group">
            <label for="tel">手机号</label>
            <input type="input" name="tel" id="tel" class="form-control">
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="input" name="tel" id="password" class="form-control">
        </div>

        <!--复选框-->
        <div class="form-group">
            <label class="checkbox-inline"><input type="checkbox" name="hobby">唱歌</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby">唱歌</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby">唱歌</label>
        </div>

        <!--单选框-->
        <div class="form-group">
            <label class="radio-inline"><input type="radio" name="sex" value="男">男</label>
            <label class="radio-inline"><input type="radio" name="sex" value="女">女</label>
        </div>

        <!--输入框组-->
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">搜索</span>
                <input type="text" name="search" class="form-control">
            </div>
        </div>

        <div class="form-group">
            <div class="input-group">
                <input type="text" name="search" class="form-control">
                <span class="input-group-addon">搜索</span>
            </div>
        </div>

        <div class="form-group">
            <div class="input-group">
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-user"></span>
        </span>
                <input type="text" name="username" class="form-control">
            </div>
        </div>

        <div class="form-group">
            <div class="input-group">
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-lock"></span>
        </span>
                <input type="password" name="username" class="form-control">
            </div>
        </div>
    </div>
</form>
</body>
</html>

原文地址:https://www.cnblogs.com/ZeroHour/p/8288779.html

时间: 2024-11-05 22:55:33

<Bootstrap> 学习笔记四. 表单组和输入框组的使用的相关文章

Bootstrap学习笔记(四)表单input

单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type="?"](其中?号代表type类型,比如说text类型,对应的是input[type="text"])的形式来定义样式的. <form role="form"> <div class=&quo

Bootstrap学习笔记(二) 表单

在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名"form-control",将会实现一些设计上的定制效果. 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4px的圆角 4.设置阴影效果

Bootstrap 学习笔记 之表单(4 day)

Bootstrap学习到这里,理解了为什么它是一个框架,所谓的框架,目前看来就是它本身提供了一套完整的HTML结构和样式. 我们在使用的时候,只要按照这套规则来搭建HTML结构和加上相应的样式名后就可以了. 今天学习的是表单, Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 需要一提的就是表单的状态: 表单控件状态 除了 :focus 状态(即,用户点击 input 或使用 tab 键聚焦到 input 上),Bootstrap 还为禁用的输入框定义了样式,

JAVA学习笔记(四十一)-多线程与线程组

线程组ThreadGroup /* * 线程组ThreadGroup * * 结论: * 如果在设置线程组优先级之前设置线程优先级,则线程优先级不受线程组优先级限制 * 如果在设置线程组优先级之后设置线程优先级,则线程优先级不能超过线程组优先级 * * 线程的优先级,默认与启动它的父线程相同,但受到所有线程组的限制 */ public class Test02 { public static void main(String[] args) { System.out.println(Thread

bootstrap学习笔记一 登录水平表单

先上效果图: 样式定义: <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="UserName">用户名</label> <div class="controls"> <input type="tex

Symfony2学习笔记之表单

对于一个Web开发者来说,处理HTML表单是一个最为普通又具挑战的任务.Symfony2集成了一个Form组件,让处理表单变的容易起来.在这一节里,我们将从基础开始创建一个复杂的表单,学习表单类库中最重要的内容. Symfony2 的Form组件是一个独立的类库,你可以在Symfony2项目之外使用它. 创建一个简单的表单:假设你要创建一个应用程序的todo列表,需要显示一些任务.因为你的用户需要编辑和创建任务,所以你需要创建一个表单.在你开始之前,首先来看通用的Task类,用来表示和存储一个单

小猪的数据结构学习笔记(四)

小猪的数据结构学习笔记(四) 线性表之静态链表 --转载请注明出处:coder-pig 本章引言: 在二,三中中我们分别学习了顺序表中的线性表与单链表,线性表有点类似于 我们前面所学的数组,而单链表使用的最多的是指针,这里问个简单的问题, 如果是在以前没有指针的话,前辈先人们怎么实现单链表呢?大家思考下! 没有指针,那么用什么来代替呢?前辈先人们非常机智,想出了使用下标+游标的方式 来实现单链表的效果!也就是今天要讲的--静态链表! 当然你也可以直接跳过本章,因为有了单链表就没有必要用静态链表了

NLTK学习笔记(四):自然语言处理的一些算法研究

自然语言处理中算法设计有两大部分:分而治之 和 转化 思想.一个是将大问题简化为小问题,另一个是将问题抽象化,向向已知转化.前者的例子:归并排序:后者的例子:判断相邻元素是否相同(与排序). 这次总结的自然语言中常用的一些基本算法,算是入个门了. 递归 使用递归速度上会受影响,但是便于理解算法深层嵌套对象.而一些函数式编程语言会将尾递归优化为迭代. 如果要计算n个词有多少种组合方式?按照阶乘定义:n! = n*(n-1)*...*1 def func(wordlist): length = le

CCNA学习笔记四——Telnet CDP

CDP协议:Cisco发现协议 show cdp show cpd neighbors:查看当前设备连接了哪些Cisco设备 cdp timer:修改发送间隔时间 cdp holdtime:修改保留时间 cdp advertise-2:修改版本号 debug cdp packets show cdp traffic:查看有关cdp包的统计信息 show cdp interface:查看端口cdp信息 show cdp entry:查看所有邻居的详细信息 cdp run:全局开启所有接口cdp协议