内容 参数
  OS   Windows 10 x64
  browser   Firefox 65.0.2
  framework     Bootstrap 3.3.7
  editor   Visual Studio Code 1.32.1  
  typesetting   Markdown

 

code

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <!-- IE将使用最新的引擎渲染网页 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 页面的宽度与设备屏幕的宽度一致

         初始缩放比例 1:1 -->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Demo</title>

    <meta name="author" content="www.cnblogs.com/kemingli">

    <!-- 引入外部bootstrap的css文件(压缩版)，版本是3.3.7 -->

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->

    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->

    <!--[if lt IE 9]>

        <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>

        <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

    <![endif]-->

</head>

<body>

    <!-- start : demo -->

    <div class="container" style="background-color:gray">

        <form class="form-horizontal">

            <div class="form-group">

                <!-- 属性值col-xs-3中，这个数字3是根据实践经验而来的 -->

                <label class="col-md-2 col-sm-2 col-xs-3 text-right" for="username">

                    用户名

                </label>

                <!--

                    为什么要用div把input包裹起来呢？

                    因为输入框不能使用栅格系统，也就是说 input不能加 col-xx-xx。

                  -->

                <div class="col-md-10 col-sm-8 col-xs-6">

                    <input type="text" name="username" id="username" class="form-control" />

                </div>

            </div>

        </form>

    </div>

    <!-- 输入框大小会随着浏览器大小的变化而变化，自己也可以试一试，挺好玩的。 -->

    <!-- end : demo -->

    <!-- NO.1 加载框架依赖的jQuery文件(压缩版)，版本是1.12.4 -->

    <script src="bootstrap/js/jquery.min.js"></script>

    <!-- NO.2 加载Bootstrap的所有JS插件，版本是3.3.7 -->

    <script src="bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

 

result

 

resource

  • [ 文档 ] getbootstrap.com/docs/3.3
  • [ 源码 ] github.com/twbs/bootstrap
  • [ 源码 ] archive.mozilla.org/pub/firefox/releases/65.0/source/
  • [ 平台 ] www.cnblogs.com
  • [ 平台 ] github.com
  • [ 扩展 - 平台] www.bootcss.com
  • [ 扩展 - 浏览器 ] www.mozilla.org/zh-CN/firefox/developer

 

Bootstrap是前端开源框架，优秀，值得学习。

博文讲述的是V3版本，更为先进的是V4版本。学有余力的话，可作简单地了解。

Firefox是开源的浏览器，优秀，值得关注。

面对开源框架，分析、领悟与应用，能对其进行加减裁化，随心所欲而不逾矩。

博文的质量普通，仅供参考。盲目复制，处处是坑。Think twice before you act(三思而后行)！

Bootstrap3基础 form-horizontal 表单元素横向布局 简单示例的更多相关文章

  1. HTML5 学习08——Input 类型、表单元素及属性

    注意:并不是所有的主流浏览器都支持新的input类型,不过您已经可以在所有主流的浏览器中使用它们了.即使不被支持,仍然可以显示为常规的文本域. (1)Input 类型: color color 类型: ...

  2. 9月8日HTML表单元素（form、文本、按钮、选择）

    表单元素 一.form form代表表单,功能:用于申明表单,定义采集数据的范围,也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里.<for ...

  3. form表单 无法提交js动态添加的表单元素问题。。

    第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url   ...

  4. 表单组件 form fastadmin（生成表单元素）

    Form组件 定义文件位置: /extend/fast/Formphp 通用参数 $name 通常为我们组件的名称(name属性值),我们在后台接收时可以通过这个名称来获取到它所对应的值 $value ...

  5. 遍历form表单里面的表单元素，取其value

    form.elements 获取所有表单元素 form 表单 <form action="http://localhost:1995/api/post" class=&quo ...

  6. JS基础-表单元素-新表单元素-js概述

    1.表单元素 1.input元素 1.隐藏域和文件选项框 1.隐藏域 <input type="hidden"> 要提交给服务器的数据,但是不想展示给用户看可以放在隐藏 ...

  7. 【jQuery】form表单元素序列化为json对象

    序列化form表单元素为json对象: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head&g ...

  8. form表单元素的值序列化成对象

    /** * 将form表单元素的值序列化成对象 * param: form jquery form对象 */ var serializeObject = function(form) { var o ...

  9. 将form表单元素的值序列化成对象

    /**jQuery * 将form表单元素的值序列化成对象 * @returns object */ var serializeObject = function(form) { var o = {} ...

随机推荐

  1. 删掉centos原有的openjdk并安装sun jdk

    [环境变量]删掉centos原有的openjdk并安装sun jdk   一.卸载原有openjdk rpm -qa | grep java 之后,将展示出来的全部卸载掉,我这里是5个 rpm -e ...

  2. c#除掉字符串最后一个字符几种方法

    有一数组:转换为字符串后为 aaa|bbb|ccc|ddd| 现要去掉最后一个| 第一种方法: 语句为:str1=aaa|bbb|ccc|ddd| str=str1.substring(0,lasti ...

  3. EF性能优化

    下面总结了一些在使用EF的过程中应当特别注意的地方,避免大家再走弯路. 1.分清真分页和假分页 大家都知道分页分为真分页和假分页,并且假分页是特别耗费性能的.我们在使用的过程中也是以真分页为主,但是在 ...

  4. mysql制造大量测试数据心得

    为了测试1000万条数据的查询性能,就需要1000万条数据,于是在我们做的项目的一个游客表的一条记录的基础上来制造. 1.使用mysql的while循环语句,比如手机号的循环,还有一些随机数,比如性别 ...

  5. eclipse设置字体_字符编码_快捷键

    eclipse设置字体.字符编码.快捷键 1.设置字体: preferences->general->appearnce->colors and fonts-->basic-- ...

  6. discuz用户组

    非公众用户组当用户组设置为“非公众用户组”时,无论是以主用户组的形式,还是以扩展用户组的形式,均只能由管理员手工将用户加入本组. 公众用户组当本用户组设置为“公众用户组”,且用户当前所在的用户组被允许 ...

  7. ajax评论

    评论有好几种格式:有评论树.评论楼等的格式 发表评论注意事项: 1. 展示评论 1. 评论楼(Django模板语言渲染) 1. 从后端查询出所有的评论 2. 如果有父评论就展示父评论 2. 评论树 通 ...

  8. Vector集合——单列集合的“祖宗”类

    是实现可增长的对象数组:所以底层也是数组: 与collection集合不同的是,vector是同步的,意味着是单线程的,意味着效率低,速度慢, 所以在jdk1.2版本之后被ArrayList集合所取代 ...

  9. PIVOT(透视转换)和UNPIVOT(逆透视转换)

    一.原数据状态 二.手动写透视转换1 三.手动写透视转换2 四.PIVOT(透视转换)和UNPIVOT(逆透视转换)详细使用 使用标准SQL进行透视转换和逆视转换 --行列转换 create tabl ...

  10. serving inference

    1.确定要提供服务的inference的input,output,以及exporter的signature:(这里用classify的signature做例子,input为byte数组,output为 ...