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 icon 不显示怎么办

bootstrap是什么,有什么特点?

html5表单验证的解析

bootstrap模态框是用来做什么的?

bootstrap如何设置鼠标悬停提示

bootstrap怎么实现可关闭tab

vue cli3引入bootstrap的方法介绍

bootstrap能分24格吗

什么是bootstrap以及其作用

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




打赏

取消

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

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

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

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

评论

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