文档章节

学习Bootstrap知识记录点②

覃光林
 覃光林
发布于 2017/07/28 14:12
字数 351
阅读 3
收藏 0

****************************************华丽分割线****************************************

1.行信息居中(class="text-center") ,左对齐,右对齐依此类推

<tr  class="text-center">
    <td class="alert-warning">我不管</td>
    <td class="alert-danger">我最帅</td>
    <td class="text-success">你们都是小可爱</td>
</tr>

****************************************华丽分割线****************************************

2.文件上传框、多选框、单选框

<input type="file" name="inputfile">
<input type="checkbox" name="checkboxs">
<input type="checkbox" name="checkboxs">
<input type="radio" name="1">
<input type="radio" name="1">

****************************************华丽分割线****************************************

3、水平表单

水平表单与其他表单不仅标记的数量上不同,而且表单的呈现形式也不同。如需创建一个水平布局的表单,请按下面的几个步骤进行:

  • 向父 <form> 元素添加 class .form-horizontal
  • 把标签和控件放在一个带有 class .form-group 的 <div> 中。
  • 向标签添加 class .control-label
  • <form action="" method="post" class="form-horizontal">
        <div class="form-group">
            <label>用户名:</label>
            <input type="text" placeholder="userName" id="name" name="name" class="form-control">
            <label>密&nbsp;&nbsp;码:</label>
            <input type="password" placeholder="passWord" id="password" name="password" class="form-control">
        </div>
        <div class="form-group">
            <input type="submit" value="提&nbsp;交" class="btn btn-success form-control">
            <input type="button" value="清&nbsp;空" class="btn btn-danger form-control">
        </div>
    </form>

****************************************华丽分割线****************************************

4.状态验证

Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class(.has-warning、 .has-error 或 .has-success)即可使用验证状态。

<div class="form-group has-success">
    ...
</div>

****************************************华丽分割线****************************************

5.控制表单大小

<div class="row">

    <div class="col-lg-2">     

</div>

 

© 著作权归作者所有

覃光林
粉丝 13
博文 142
码字总数 66492
作品 0
深圳
QA/测试工程师
私信 提问
JS切换卡效果

JS实现动画切换效果,大体实现效果为五个页面,依次触发相应按钮,类比轮播图进行相应页面效果的切换和替换。 参考某源码进行学习,如下: ③:给元素A绑定多个触发事件 ④:selector选择器一...

萧沐垚
2016/12/16
53
0
学习之路/目录

目标 从今日起,我将开启我的学习模式,我会将我每学习的一个技能,分享学习的过程和内容,在记录自己知识点的同时也分享经验,有不足之处还希望朋友们见谅,毕竟本人能力有限。 路线 我的知...

DennisGuo
2015/11/23
70
0
每周一书-《Bootstrap基础教程》

首先说明,本周活动有效时间为8月15日到21日。本周为大家送出的书是有电子工业出版,贺臣/陈鹏编著的《Bootsrap基础教程》,为前端入门必读书籍。 下面是从书中摘录的内容。 “ Bootstrap 讨...

zting科技
2017/01/11
0
0
Bootstrap V4 自学开始!

记在前面!!! 记在前面!!! 记在前面!!! 目标:克服一切困难学习Bootstrap V4文档所有知识,并做出相应效果实例。 结束日期:2016年3月25日 学习地址:http://wiki.jikexueyuan.com/project/b...

Asktao
2016/01/25
163
1
C语言编程学习之——文件详解

小辰我这次带来一个知识点,C语言里面的文件。涉及到的内容有,1、打开文件 2、读写操作3、关闭文件 4、文件指针。 1、打开文件 2、①读写文件--字符读(fgetc) ②读写文件--字符写(fputc...

小辰带你看世界
2018/01/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Docker 常用命令速查手册

记录一下docker的日常使用命令,本文主要针对linux + mac操作系统而言,window是否适用不太确定,谨慎使用 <!-- more --> 1. docker进程 docker进程启动、停止、重启,常见的三种case # 启动...

小灰灰Blog
14分钟前
3
0
主流移动端账号登录方式的原理及设计思路

1、引言 在即时通讯网经常能看到各种高大上的高并发、分布式、高性能架构设计方面的文章,平时大家参加的众多开发者大会,主题也都是各种高大上的话题——什么5G啦、AI人工智能啦、什么阿里双...

imtech
21分钟前
3
0
如何递归计算目录中的所有代码行?

我们有一个PHP应用程序,并希望计算特定目录及其子目录下的所有代码行。 我们不需要忽略评论,因为我们只是想弄清楚。 wc -l *.php 该命令在给定目录中运行良好,但忽略子目录。 我当时认为...

技术盛宴
51分钟前
4
0
使用 try-with-resources 优雅关闭资源

我们知道,在 Java 编程过程中,如果打开了外部资源(文件、数据库连接、网络连接等、redis),我们必须在这些外部资源使用完毕后,手动关闭它们。 因为外部资源不由 JVM 管理,无法享用 JVM ...

七弦桐
58分钟前
4
0
04.深入浅出索引(上)

简单来说,索引的出现就是为了提高数据查询效率,就像书的目录一样。 索引的常见模型 索引实现的方式有很多种,所以这里就引入了索引模型的概念,可以用于提高读写效率的数据结构很多,比较常...

scgaopan
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部