bootstrap有哪些常用组件

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。

什么是组件?

组件:一般是指软件系统的一部分,承担了特定的职责,可以独立于整个系统进行开发和测试,一个良好设计的组件应该可以在不同的软件系统中被使用(可复用)。

例如bootstrap的轮播图就是一个组件。他可以应用在不同的网站开发中。

目前常用的bootstrap组件

字体图标

下拉菜单

响应式导航栏

为什么要使用bootstrap的下拉菜单

因为html的select下拉菜单样式无法完全自定义,尤其是文字的居中方式。

bootstrap的下拉菜单是用div+ul+li实现的,可以完全实现样式的自定义


如何使用这些bootstrap组件?

字体图标

1.像span元素添加glyphicon glyphicon-menu-left类名

2.确保span内容为空

下拉菜单

如需使用下拉菜单,只需要在 class .dropdown 内加上下拉菜单即可。

给下拉按钮添加dropdown-toggle类和指向性用id,如id="menu1",data-toggle用来控制弹出框元素

给菜单列表添加dropdown-menu类和aria-labelledby="menu1"用来表示指向哪个菜单

示例代码:

响应式导航条

创建一个默认的响应式导航条的步骤如下:

1.向nav标签添加 class .navbar、.navbar-default。

2.向上面的元素添加 navbar-header,navbar-header

3.给navbar-header的button添加data-toggle="collapse" data-target="#example-navbar-collapse"。

4.给下面的div添加class="collapse navbar-collapse" id="example-navbar-collapse"

示例代码:

demo


如何处理现有插件不能满足需求的问题

bootstrap可以根据需要定制,BootStrap提供了根据自己需要的组件及jquery插件进行定制,使用者也可以直接修改Less源码。

如果不想整体上修改,也可以在组件上直接添加一个自定义的类,来覆盖bootstrap的默认属性。需要注意的是bootstrap的样式权重很高,有可能需要我们使用!important来增加权重。


参考文献:

参考一:入门 Hello bootstrap

参考二:菜鸟教程


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 大家好,我是IT修真院郑州分院第6期的学员王栋,一枚正直、纯洁、善良的前端程序员今天给大家分享一下,修真院官网CS...
    17064阅读 3,969评论 0 2
  • 第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根...
    凛0_0阅读 5,087评论 0 66
  • 第4章 Bootstrap装饰插件 JavaScript是网页上事实上的脚本语言。流行的网页功能,例如:漂亮的图片...
    海上名月阅读 1,656评论 5 6
  • 原文出处 http://blog.poetries.top/2016/11/19/bootstrap-review...
    前端进阶之旅阅读 7,157评论 0 42
  • 不管是走遍五湖四海,还是踏过天涯海角,却总是忘不了养育我长大的故乡——山阳照川。 青山峻岭下,一道道溪水汇流入河。...
    溪水映月阅读 815评论 37 66