内容 参数
  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. Nginx.代理MySQL

    Nginx.代理MySQL 1. Nginx在安装的时候,需要加上一个参数:--with-stream 即Nginx安装指令为:./configure --prefix=/u01/app/nginx  ...

  2. jQuery获取点击对象的父级

    一.使用$('body').on('click','.index',function(event){})绑定事件时,例: <div class="project-box"&g ...

  3. C#中换行的代码

    1.Windows 中的换行符"\r\n"2.Unix/Linux 平台换行符是 "\n".3.MessageBox.Show() 的换行符为 "\n ...

  4. python对缩进的严格要求

    一般的编辑器都会默认Tab键为四格缩进,但是在python脚本中,Tab与直接4个tablespace空格是有区别的. 一般表现为报错信息如下: IndentationError: unindent ...

  5. qDeleteAll 之后必须清空容器

    [1]qDeleteAll应用示例 qDeleteAll源码如下: template <typename ForwardIterator> Q_OUTOFLINE_TEMPLATE voi ...

  6. 虚拟机连不上网 Xshell连不上虚拟机

    以centos7 为例 1,确定network connection 为NAT 2, 打开网络连接中心 Control Panel\Network and Internet\Network Conne ...

  7. linux 环境RPM 安装MYSQL5.6

    linux 环境RPM 安装MYSQL5.6 系统环境 CentOS7.2 1.关闭selinux 服务[SELinux是一种基于域-类型 模型(domain-type)的强制访问控制(MAC)安全系 ...

  8. git push跳过用户名和密码认证配置教程

    在使用git commit命令将修改从暂存区提交到本地版本库后,只剩下最后一步将本地版本库的分支推送到远程服务器上对应的分支了,如果不清楚版本库的构成,可以查看我的另一篇,git 仓库的基本结构. 新 ...

  9. 怎样从外网访问内网Jupyter Notebook？

    本地安装了一个Jupyter Notebook,只能在局域网内访问,怎样从外网也能访问到本地的Jupyter Notebook呢?本文将介绍具体的实现步骤. 准备工作 安装并启动Jupyter Not ...

  10. 【视频】使用fiddler开发工具进行新架构页面本地调试

    [视频]使用fiddler开发工具进行新架构页面本地调试,视频没录制好,有些部分比较模糊...