bootstrap组件

简介: bootstrap组件

一、Bootstrap常用的组件:

icon图标,下拉菜单,导航,导航条,输入框,缩略图,媒体对象,列表组,分页导航。

二、小图标:

1.bootstrap中内置提供了250多种小图标。

2.语法:首页

三、下拉菜单:

往下拉




  • NO.1

  • NO.2

  • NO.3



  • NO.4



四、输入框:

姓名





百度一下


五、导航:

1.选项卡导航:

class=“nav nav-tabs”

2.胶囊式选项卡导航:

class=“nav nav-pills”

3.自适应导航:

class=“nav nav-tabs nav-justified”

4.二级导航:

通过ul-li实现,和下拉菜单的实现方式是一样的。

六、导航条:

1.基础导航条:


首页




2.导航条中的表单:

在ul标签外面直接写输入框的代码即可。注意form的class=“navbar-form navbar-right”

3.导航条中的文本,按钮,链接

按钮


4.顶部固定导航条和底部固定导航条:

(1)顶部:class=“navbar-fixed-top”

(2)底部:class=“navbar-fixed-bottom”

5.响应式导航条:

需要加的属性是:class=“collapse navbar-collapse”

相关文章
N..
|
6月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
66 0
|
前端开发 容器
|
前端开发 容器
|
前端开发 开发者 容器
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
|
前端开发
|
前端开发 JavaScript 容器
|
6月前
|
前端开发
bootstrap组件的案例代码
bootstrap组件的案例代码
|
6月前
Bootstrap5 导航组件和面包屑
Bootstrap5 导航组件和面包屑
59 0
|
6月前
|
前端开发 JavaScript 容器
BootStrap 组件和样式
BootStrap 组件和样式
67 0