本文实例介绍了Bootstrap布局组件应用实践，分享给大家供大家参考，具体内容如下

字体图标的应用示例

<button type="button"> <span></span> </button>

下拉菜单示例

<div> <button type="button" id="dropdownMenu1" data-toggle="dropdown"> 主题 <span></span> </button> <ul role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation">下拉菜单标题</li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">选项1</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">选项2</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">选项3</a> </li> <li role="presentation"></li><> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">分离的链接</a> </li> </ul> </div>

按钮工具栏与按钮组

<div role="toolbar"><> <div> <> <button type="button">Button 1</button> <button type="button">Button 2</button> <button type="button">Button 3</button> </div> <div> <button type="button">Button 4</button> <button type="button">Button 5</button> <button type="button">Button 6</button> </div> <div> <button type="button">Button 7</button> <button type="button">Button 8</button> <button type="button">Button 9</button> </div> </div>

按钮下拉菜单

<div><> <button type="button" data-toggle="dropdown"> <> 默认 <span></span> </button> <ul role="menu"> <li><a href="#">功能</a></li> <li><a href="#">另一个功能</a></li> <li><a href="#">其他</a></li> <li></li><> <li><a href="#">分离的链接</a></li> </ul> </div>

表单中的输入框组

<form role="form"> <div><> <input type="text"> <span>.00</span> </div> <br> <div> <span> <input type="checkbox"><> </span> <input type="text"> </div> <br> <div> <input type="text"> <span><> <button type="button"> Go! </button> </span> </div> </form>