Bootstrap学习之表单格式与字体图标


当前第2页 返回上一页

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<p class="container">

    <form action="#" method="post" class="form-horizontal">

        <p class="form-group">

        <label for="user" class="col-lg-2 control-label">用户名</label>

        <p class="col-lg-10"><input type="text" name="user" id="user" value="" class="form-control" /></p>

        </p>

        <p class="form-group">

        <label for="pd" class="col-lg-2 control-label">密码</label>

        <p class="col-lg-10"><input type="password" name="pd" id="pd" value="" class="form-control" /></p>

        </p>

        <p class="form-group col-lg-5 col-lg-offset-5">

        <p class="col-lg-5 col-lg-offset-5"">

        <input type="checkbox" name="" id="cx" value="" />

        <label for="cx">是否同意</label>

        </p>

        <p class="col-lg-2 col-lg-offset-5">

        <button type="submit" class="btn btn-success">提交</button>

        </p>

    </form>

</p>

这里的 control-label 是给 label 同步 input 的样式

字体图标

出于性能的考虑,所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意,为了设置正确的内补(padding),务必在图标和文本之间添加一个空格。具体字体图标,请访问Bootstrap中文网(https://v3.bootcss.com/components/)查询。

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。

以上就是Bootstrap学习之表单格式与字体图标的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

bootstrap收费吗

bootstrap怎么学

bootstrap如何兼容ie6

layui和bootstrap区别

html5新表单元素的图文实例

bootstrap 怎么关闭弹出框

html5 表单、select 下拉、textarea多行文本的介绍

bootstrap与html5的区别是什么

详解bootstrap中的缩略图

怎么解决bootstrap乱码问题

更多相关阅读请进入《表单》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...