bootstrap51-Bootstrap 基本的输入框组

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Bootstrap 基本的输入框组</title>

<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<body>

<div class="container">

<div style="padding:100px 100px 10px;">

<form action="" role="form" class="bs-example bs-example-form">

<div class="input-group">

<span class="input-group-addon">@</span>

<input type="text" placeholder="twitterhandle" class="form-control">

</div>

<br>

<div class="input-group">

<input type="text" class="form-control">

<span class="input-group-addon">0.0</span>

</div>

<br>

<div class="input-group">

<span class="input-group-addon">$</span>

<input type="text" class="form-control">

<span class="input-group-addon">.00</span>

</div>

</form>

</div>

</div>

<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>

时间: 2024-11-16 23:10:47

bootstrap51-Bootstrap 基本的输入框组的相关文章

2016年5月31日上午(传智Bootstrap笔记(Bootstrap 布局组件输入框组))

一.Bootstrap 输入框组 本章将讲解 Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输入添加公共的元素.例如您可以添加美元符号,或者在Twitter用户名前添加@,或者应用程序接口所需要的其他公共的元素. 向.form-control添加前缀或后缀元素的步骤如下: 把前缀或后缀元素放在一个带有.input-group 的 <div>

bootstrap下拉列表与输入框组结合的样式调整

输入框组默认是div.input-group 已知可在input表单元素前后加入两类元素[分别是文本和按钮]如下所示: div.input-group-addon{文字或符号} input.form-control div.input-group-btn 其中按钮还可嵌套下拉菜单(包括分裂式下拉菜单) 一.基本用法如下: <div class="input-group"> <span class="input-group-addon">@&l

bootstrap的输入框组

通过在文本输入框 <input> 前面.后面或是两边加上文字或按钮,可以实现对表单控件的扩展.为 .input-group 赋予 .input-group-addon 类,可以给 .form-control 的前面或后面添加额外的元素. 只支持文本输入框 <input> 这里请避免使用 <select> 元素,因为 WebKit 浏览器不能完全绘制它的样式. 避免使用 <textarea> 元素,由于它们的 rows 属性在某些情况下不被支持. 输入框组中的

Bootstrap&lt;基础十五&gt; 输入框组

Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输入添加公共的元素.例如,可以添加美元符号,或者在 Twitter 用户名前添加 @,或者应用程序接口所需要的其他公共的元素. 向 .form-control 添加前缀或后缀元素的步骤如下: 把前缀后后缀元素放在一个带有 class .input-group 的 <div> 中. 接着,在相同的 &

Bootstrap入门(十一)组件5:输入框组

1.为其中添加第一个输入框 2.添加额外的元素 3.为用户提供标识 4.改变输入框的尺寸 5.为额外添加多选/单选框 6.与按钮结合 7.与下拉菜单结合 先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="jquery-3.1.0

&lt;Bootstrap&gt; 学习笔记四. 表单组和输入框组的使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <link rel="stylesheet&

bootstrap之输入框组

向输入域添加前缀和后缀的内容 <div style="padding: 100px 100px 10px;"> <form class="bs-example bs-example-form" role="form"> <div class="input-group input-group-lg"> <span class="input-group-addon"&g

Bootstrap 关于输入框组的使用

只支持文本输入框 <input> 这里请避免使用 <select> 元素,因为 WebKit 浏览器不能完全绘制它的样式. 避免使用 <textarea> 元素,由于它们的 rows 属性在某些情况下不被支持. 将输入框组嵌套到表单组或栅格相关元素的内部.不要将表单组或栅格列(column)类直接和输入框组混合使用. 为 .input-group 赋予.input-group-addon 类 <div class="input-group"&g

bootstrap52-Bootstrap 输入框组的大小

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 输入框组的大小</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"