2016年5月29日晚上(传智Bootstrap笔记三(表单))

  在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。

一、支持的表单控件

  Bootstrap 支持最常见的表单控件,主要是 input、textarea、checkbox、radio 和 select。

  (1)输入框(Input)

    最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。

   Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持,包括:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。适当的 type 声明是必需的,这样才能让 input 获得完整的样式。

  (2)表单组样式(.form-group)

    将<label>和表单元素包含其中,可以获得更好的排列

    以前的表单用的是这种:

       <form>
           <label for="username">用户名:</label>
           <input type="text" id="username" value="请输入你的用户名">
       </form>   

      

    这样的效果很不好看,那我们应该怎么做呢?这里我们再引入一个元素:.form-control

  (3).form-control表单元素样式:常用于<input>、<textarea>、<select>。

     <form>
            <div class="form-group">
                <label for="usename">用户名:</label>
                <input type="text" class="form-control" id="usename" value="请输入你的密码">
            </div>
        </form>

  当使用了上面代码的时候,效果图如下,变得很漂亮了;

          

  表单元素属性:placehoder属性(用于给<input>添加提示信息的。)

  这个属性是HTML5新增加的!

<body style="padding:50px;">
        <form>
            <div class="form-group">
                <label for="usename">用户名:</label>
                <input type="text" class="form-control" id="usename" placeholder="请输入你的密码">
            </div>
        </form>
    </body>

  这样的话当光标移入地话我们就可以看到文本框里面的字没有了,当光标移出的时候字体又出现了,很好的属性!!!

        

 <body style="padding:50px;">
        <form>
            <div class="form-group">
                <label for="usename">用户名:</label>
                <input type="text" class="form-control" id="usename" placeholder="请输入你的密码">
            </div>
           <div class="form-group">
               <label for="password">密  码:</label>
               <input type="text" class="form-control" id="password" placeholder="请输入你的密码">
           </div>
    </body>

          

  (4)form-inline 内联表单样式(用于form元素),可以使元素一行排列;

  <body style="padding:50px;">
        <form class="form-inline">
            <div class="form-group">
                <label for="usename">用户名:</label>
                <input type="text" class="form-control" id="usename" placeholder="请输入你的密码">
            </div>
           <div class="form-group">
               <label for="password">密  码:</label>
               <input type="text" class="form-control" id="password" placeholder="请输入你的密码">
           </div>    </form>
    </body>

          

  (5).sr-only 用于隐藏元素。

  <body style="padding:50px;">
        <form class="form-inline">
            <div class="form-group">
                <label for="usename" class="sr-only">用户名:</label>
                <input type="text" class="form-control" id="usename" placeholder="请输入你的密码">
            </div>
            <div class="form-group">
                <label for="password" class="sr-only">密  码:</label>
                <input type="text" class="form-control" id="password" placeholder="请输入你的密码">
            </div>
        </form>
    </body>

              

  (6).radio-inline 可以使一组当选框排在同一行

时间: 05-27

2016年5月29日晚上(传智Bootstrap笔记三(表单))的相关文章

2016年5月29日晚上(传智Bootstrap笔记五(表单2))

一.总表单实例 <body style="padding:50px;background-color:#ccc;"> <form class="form-horizontal"> <div class="form-group"> <label for="username" class="col-md-2 control-label">用户名:</labe

2016年5月29日晚上(传智Bootstrap笔记四(栅格系统 ))

一.栅格系统(网格系统) 1.栅格系统介绍 Bootstrap提供了一套响应式.移动设备优先的栅格系统.随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类. Bootstrap的栅格系统,由一个行和多个列构成.栅格系统通过行列的形式来创建网页布局,把具体的数据放入列当中. (注意:栅格系统,必须放在container和container-fluid之中) 移动设备优先策略 内容 决定什么是最

2016年5月29日上午(菜鸟Bootstrap(less))

一.快速入门 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. Less 可以运行在 Node.浏览器和 Rhino 平台上.网上有很多第三方工具帮助你编译 Less 源码.

软考信息系统监理师:2016年4月29日作业

软考信息系统监理师:2016年4月29日作业一.信息应用系统分析设计阶段监理1.需求分析的进入条件是什么?(记)2.需求分析的目标是什么?3.需求分析阶段的成果有哪些?(记)4.软件概要设计阶段的进入条件是什么?(记,并理解:加不加概要2字,答案均相同)5.软件详细设计阶段的进入条件是什么?6.描述算法除了流程图外,还有一些别的工具,如哪3种?7.软件设计阶段的成果是什么?(记)8.软件工程化要求以软件质量保证为核心,紧紧抓住哪8个主要环节?二.信息应用系统实施阶段监理1.编码阶段进入条件是什么

2016年04月29日【EPM-易通元】最新价位公布

2016年04月29日[EPM-易通元]最新价位公布   涨了.涨了.又涨了!   我们的「EPM易通元」天天见涨!太给力了!!   2016.04.29日今天已涨0,01美金,目前已到0.35美金啦!   如果你有1000个易通元,你今天就收益10美金   如果你有10000个易通元,今天就收益100美金   如果你有100000个易通元,你今天就收益1000美金.   恭喜买到「EPM易通元」的朋友们,买到即是赚到!   买入210美金到3500美金 :1美金:6.3人民币兑换,举例买入35

20.5 语音合成(百度2016年2月29日发布的tts引擎)

分类:C#.Android.VS2015: 创建日期:2016-03-17 一.简介 编写手机App时,有时需要使用文字转语音(Text to Speech)的功能,比如开车时阅读收到的短信.导航语音提示.界面中比较重要的信息通过语音强调.--等. 由于Android自带的Pico TTS并不支持中文,所以要既能阅读中文文本,还能阅读英文文本,必须下载第三方提供的能说中文的语音包. 二.申请百度tts授权 本节以百度2016年2月29日发布的"离在线融合语音合成SDK_Android 2.2.3

2016年5月29日上午(传智Bootstrap(笔记一))

一.Bootstrap简介 简单灵活可用于架构流行的用户界面和交互接口的html,css,javascript工具集. 基于html5.css3的bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档,自定义JQuery插件,完整的类库,基于Less等. 要想使用Bootstrap,需要加载jquery.js 二.Bootstrap基本模板 HTML5文档类型定义.字符集设置.移动设备优先.引入css和js文件: (1)HTML5文档类型定义.

2016年5月29日下午(传智Bootstrap(笔记二))

一.Bootstrap 排版 1.行内文本样式 <b>.<strong>.<i>.<em>.<del>. Bootstrap 提供了一些用于强调文本的类,如下面实例所示: <small>本行内容是在标签内</small><br> <strong>本行内容是在标签内</strong><br> <em>本行内容是在标签内,字体为斜体</em><br&

2016年5月29日周总结

本周的周二时,算是重新制定了2016年目标和未来五年的职业规划情况,很可惜有不少地方无法落实到实处.比如,目标太多,涉及面太广,而平时自己的时间少,导致很多会无法完成甚至开始干都没法干. 每周周一到周六晚上会加班到十点半以后,回家再洗漱休息一下,看会书或者查点资料,就要过了零点了,接着就要睡觉休息了,第二天还要七点以前起床,七点四十到办公室.在上班的时间倒是很想看会想看的书,却发现事情太杂太多,电话一个接一个,事情一个接一个,根本没法静下心来. 很矛盾,很纠结煎熬,但是没办法,这就是工作和生活的