内容 参数
  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. python windows 安装jieba....

    用cmd进入到python安装路径,进入scripts文件夹,输出pip install jieba 安装完成提示

  2. PM2管理工具的使用

    linux上PM2可以管理服务程序,防止程序无故关闭,具有程序守护功能,自动重启服务器程序,监控程序等好处,很方便,具体自己去体会! 官网地址:  http://pm2.keymetrics.io/ ...

  3. 未能正确加载“EditorPackage”包（转）

    打开vs2012加载项目的时候报如下的错误: 未能正确加载“Microsoft.VisualStudio.Editor.Implementation.EditorPackage”包.此问题可能是由配置 ...

  4. c扩展开发

    为什么要用C扩展 C是静态编译的,执行效率比PHP代码高很多.同样的运算代码,使用C来开发,性能会比PHP要提升数百倍.IO操作如CURL,因为耗时主要在IOWait上,C扩展没有明显优势. 另外C扩 ...

  5. html5-列表

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  6. Spark核心RDD：combineByKey函数详解

    https://blog.csdn.net/jiangpeng59/article/details/52538254 为什么单独讲解combineByKey? 因为combineByKey是Spark ...

  7. 最小二乘法的Java实现

    最小二乘法原理十分简单,这里不再赘述.对于预测公式y' = a * x + b,最优解如下 double a = Sxy / Sxx; double b = yAvg - a * xAvg; doub ...

  8. 转：Http下载文件类 支技断点续传功能

    using System; using System.Collections.Generic; using System.Text; using System.IO; using System.Net ...

  9. flask 请求上下文

    一篇引用大牛的 https://www.cnblogs.com/zhaopanpan/p/9457343.html ### 线程安全 ```python# 线程不安全class Foo(object) ...

  10. 问题 1084: 用筛法求之N内的素数。

    #include <iostream> #include <cstdio> #include <cstring> #include <string> # ...