前端|BootStrap 布局组件
欢迎点击「算法与编程之美」↑关注我们！
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
欢迎加入团队圈子！与作者面对面！直接点击！
部分组件的使用
1.Bootstrap 图标(Glyphicons)
使用图标的方法非常简单，只需要在任何内联元素上应用对应的样式即可。
如：
<span class=“glyphicon glyphicon-home”></span>
2.Bootstrap 下拉菜单
如需使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单：
3.Bootstrap 输入框组
向 .form-control 添加前缀或后缀元素的步骤如下：把前缀或后缀元素放在一个带有 class .input-group 的 <div>中接着，在相同的<div>内，在 class 为 .input-group-addon 的 <span>内放置额外的内容把该 <span> 放置在 <input>元素的前面或者后面。
4.Bootstrap 导航元素
创建一个标签式的导航菜单：以一个带有 class .nav 的无序列表开始。添加 class .nav-tabs。
5.Bootstrap 导航栏
创建一个默认的导航栏的步骤如下：
向标签添加 class .navbar、.navbar-default。
向上面的元素添加 role=”navigation”，有助于增加可访问性。向 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 元素。这会让文本看起来更大一号。为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。6.Bootstrap 分页
7.Bootstrap 徽章（Badges）
徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把 添加到链接、Bootstrap 导航等这些元素上即可。
总结
总而言之，这些bootstrap组件给带来了非常多的便利。虽然我在这里住的例子都比较的简单，但是如果直接用静态网页的代码来实现的话会更加的复杂，要写很多代码。Bootstrap的这些组件学习会使我们做项目更加的方便快捷，更加的高效做出一个网页。
END
主 编 | 张祯悦
责 编 | 周婷婷
where2go 团队
微信号：算法与编程之美
长按识别二维码关注我们!
温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！