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>


本文转自 素颜猪 51CTO博客,原文链接:http://blog.51cto.com/suyanzhu/1895828

相关文章
开心档之Bootstrap4 输入框组
开心档之Bootstrap4 输入框组
41 0
开心档 - 软件开发入门之 Bootstrap4 输入框组
我们可以使用 .input-group 类来向表单输入框中添加更多的样式,如图标、文本或者按钮。
|
前端开发
bootstrap 组件之 输入框组 超大屏幕 列表组件学习总结
bootstrap 组件之 输入框组 超大屏幕 列表组件学习总结
|
前端开发
Bootstrap响应式前端框架笔记九——输入框组
Bootstrap响应式前端框架笔记九——输入框组
344 0
Bootstrap响应式前端框架笔记九——输入框组
|
开发框架 前端开发 Go
Bootstrap 组件_输入框组2 | 学习笔记
快速学习 Bootstrap 组件_输入框组2
115 0
|
前端开发
Bootstrap系列 -- 14. 表单控件输入框input
     每一个表单都是由表单控件组成。离开了控件,表单就失去了意义。接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识。   单行输入框,常见的文本输入框,也就是input的type属性值为text。
1076 0
|
前端开发 JavaScript Go
Bootstrap<基础十五> 输入框组
原文:Bootstrap 输入框组 Bootstrap 支持的另一个特性,输入框组。输入框组扩展自 表单控件。使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。 通过向输入域添加前缀和后缀的内容,您可以向用户输入添加公共的元素。
776 0