内容 参数
  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. node.js连接MongoDB数据库，db.collection is not a function完美解决

    解决方法一. mongodb数据库版本回退: 这个错误是出在mongodb的库中,在nodejs里的写法和命令行中的写法不一样,3.0的api已经更新和以前的版本不不一样,我们在npm中没指定版本号的 ...

  2. Oracle 23的用户管理

    创建用户的语法格式 Create user <user_name> Identified by<password> Default tabespace<default t ...

  3. C#中生成的随机数为什么不随机？

    from:https://www.xcode.me/more/net-csharp-generate-random 随机数生成方法可以说是任何编程语言必备的功能,它的重要性不言而言,在C#中我们通常使 ...

  4. Mockito/PowerMockito Straige Issues

    http://blog.csdn.net/xiaoyaoyulinger/article/details/52415494 http://breezylee.iteye.com/blog/208843 ...

  5. 09 查找列表中元素，移除每个元素的空格，并查找以a或A开头并且以c结尾的所有元素

    li = ["alex"," aric","Alex","Tony","rain"]for i in ...

  6. Python - 3. Input and Output

    from:http://interactivepython.org/courselib/static/pythonds/Introduction/InputandOutput.html Input a ...

  7. spring部分注解

    @Controller @SpringBootApplication @Configuration @ComponentScan(basePackages={"first",&qu ...

  8. 转：MD5辅助类

    public class MD5Helper { private static MD5 md5 = new MD5CryptoServiceProvider(); private static str ...

  9. Robot Framework 自动化测试--部署篇

    一.产品介绍 Robot Framework是一个基于Python的,可扩展的关键字驱动的测试自动化框架.它是为了端 到端的验收测试(End-To-End Acceptance Test)以及验收测试 ...

  10. linux OS与SQL修改时区，系统时间

    linux修改系统时间和linux查看时区.修改时区的方法 一.查看和修改Linux的时区 1. 查看当前时区命令 : "date -R" 2. 修改设置Linux服务器时区方法 ...