bootstrap静态控件的使用

最新推荐文章于 2020-06-12 10:44:05 发布

南京闫伟亮的野爹

最新推荐文章于 2020-06-12 10:44:05 发布

阅读量148

点赞数

分类专栏：前端文章标签： Bootstrap

原文链接：https://www.mk2048.com/blog/blog.php?id=jcj001iab&title=bootstrap%E9%9D%99%E6%80%81%E6%8E%A7%E4%BB%B6%E7%9A%84%E4%BD%BF%E7%94%A8

版权

前端专栏收录该内容

368 篇文章 3 订阅

订阅专栏

静态控件

如果需要在表单中将一行纯文本和

label

元素放置于同一行，为

<p>

元素添加

.form-control-static

类即可。

email@example.com

Password

复制

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

email@example.com

Password

复制

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">email@example.com</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>