前端|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。

6.Bootstrap 分页

7.Bootstrap 徽章(Badges)

徽章(Badges)主要用于突出显示新的或未读的项。如需使用徽章,只需要把 添加到链接、Bootstrap 导航等这些元素上即可。

总结

总而言之,这些bootstrap组件给带来了非常多的便利。虽然我在这里住的例子都比较的简单,但是如果直接用静态网页的代码来实现的话会更加的复杂,要写很多代码。Bootstrap的这些组件学习会使我们做项目更加的方便快捷,更加的高效做出一个网页。

END

主  编   |   张祯悦

责  编   |   周婷婷

where2go 团队

   

微信号:算法与编程之美          

长按识别二维码关注我们!

温馨提示: 点击页面右下角 “写留言”发表评论,期待您的参与!期待您的转发!

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章