bootstrap v3学习笔记之组件

来源：互联网发布：tensorflow 好玩编辑：程序博客网时间：2024/06/13 08:43

1、字体图标使用方法：

<span class="glyphicon glyphicon-star" aria-hidden="true"></span>

class=“相应图标下面的名称即可”

2、按钮组：

<div class="btn-group" role="group" aria-label="...">  <button type="button" class="btn btn-default">Left</button>  <button type="button" class="btn btn-default">Middle</button>  <button type="button" class="btn btn-default">Right</button></div>

3、按钮式下拉菜单：

<!-- Single button --><div class="btn-group">  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">    Action <span class="caret"></span>  </button>  <ul class="dropdown-menu">    <li><a href="#">Action</a></li>    <li><a href="#">Another action</a></li>    <li><a href="#">Something else here</a></li>    <li role="separator" class="divider"></li>    <li><a href="#">Separated link</a></li>  </ul></div>

4、在输入框左侧或右侧添加额外元素：

<div class="input-group">  <span class="input-group-addon" id="basic-addon1">@</span>  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><div class="input-group">  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">  <span class="input-group-addon" id="basic-addon2">@example.com</span></div><div class="input-group">  <span class="input-group-addon">$</span>  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">  <span class="input-group-addon">.00</span></div>

5、徽章的显示：

<a href="#">Inbox <span class="badge">42</span></a><button class="btn btn-primary" type="button">  Messages <span class="badge">4</span></button>

6、可关闭的警告框

<div class="alert alert-warning alert-dismissible" role="alert">  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>  <strong>Warning!</strong> Better check yourself, you're not looking too good.</div>

0 0