编程 Javascript

bootstrap为水平排列的表单和内联表单设置可选的图标

Posted in Javascript onFebruary 15, 2017

说明

为水平排列的表单和内联表单设置可选的图标.

示例

<!DOCTYPE html>
<html lang="zh-CN">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>Bootstrap 101 Template</title>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
 </head>
 <body>
 <div class="container">
  <form class="form-horizontal">
  <div class="form-group has-success has-feedback">
  <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
  <div class="col-sm-9">
   <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
   <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
   <span id="inputSuccess3Status" class="sr-only">(success)</span>
  </div>
 </div>
 <div class="form-group has-success has-feedback">
  <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
  <div class="col-sm-9">
   <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
   </div>
   <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
   <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
  </div>
 </div>
  </form>
  </div>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 </body>
</html>

输出

bootstrap为水平排列的表单和内联表单设置可选的图标

以上所述是小编给大家介绍的bootstrap为水平排列的表单和内联表单设置可选的图标，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

bootstrap为水平排列的表单和内联表单设置可选的图标

- Author -

mrr

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

网页禁用右键实现代码（JavaScript代码）

Oct 29 Javascript

javascript forEach通用循环遍历方法

Oct 11 Javascript

input输入框的自动匹配(原生代码)

Mar 19 Javascript

JavaScript动态改变HTML页面元素例如添加或删除

Aug 10 Javascript

javascript检测浏览器的缩放状态实现代码

Sep 28 Javascript

JavaScript使用指针操作实现约瑟夫问题实例

Apr 07 Javascript

jQuery数组处理函数整理

Aug 03 Javascript

AngularJS入门教程之Cookies读写操作示例

Nov 02 Javascript

javascript 中的try catch应用总结

Apr 01 Javascript

JavaScript中的遍历详解(多种遍历)

Apr 07 Javascript

Vue-router的使用和出现空白页,路由对象属性详解

Sep 03 Javascript

JavaScript实现多层颜色选项卡嵌套

Sep 21 Javascript

bootstrap中添加额外的图标实例代码

Feb 15 #Javascript

基于JavaScript实现轮播图原理及示例

Apr 10 #Javascript

js实现模糊匹配功能

Feb 15 #Javascript

js 性能优化之算法和流程控制

Feb 15 #Javascript

微信小程序常用工具类详解及实例

Feb 15 #Javascript

微信小程序基础知识css样式media标签

Feb 15 #Javascript

js 性能优化之快速响应的用户界面

Feb 15 #Javascript