Bootrasp入门基础（五）

来源：互联网发布：中信总行程序员待遇编辑：程序博客网时间：2024/06/16 12:37

布局组件(一)

1，字体图标

含有字体图标两百多个，参看http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm

用法：

一个相应的class就是一个图标

<span class="glyphicon glyphicon-search"></span>

2，下拉菜单

用法：在class.dropdown 内加下拉菜单即可

对齐：在.dropdown-menu添加.pull-right(left)表示向右或左对齐

在下拉菜单便签区加标题 .dropdown-header

3,按钮组

一组按钮水平排列 .btn-group

垂直按钮 .btn-group-vertical

4,按钮下拉菜单

下三角<span class="caret"></span>可以用来指示下拉菜单

下拉菜单.dropdown(默认) 上拉菜单 .droup

5，导航菜单

标签式的导航菜单：

以一个带有 class .nav 的无序列表开始。

添加标签式： class .nav-tabs

胶囊式导航：class.nav-pills

垂直：class.nav-stacked

两端对齐：class.nav-justified

6,导航栏

默认导航：

向 <nav> 标签添加 class .navbar、.navbar-default。
向上面的元素添加 role="navigation"，有助于增加可访问性。
向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表

响应式导航栏：

为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有 class.navbar-toggle 及两个 data- 元素的按钮。第一个是data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是data-target，指示要切换到哪一个元素。三个带有 class.icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为.nav-collapse <div> 中的元素

<nav class="navbar navbar-default" role="navigation">   <div class="navbar-header">      <button type="button" class="navbar-toggle" data-toggle="collapse"          data-target="#example-navbar-collapse">         <span class="sr-only">切换导航</span>         <span class="icon-bar"></span>         <span class="icon-bar"></span>         <span class="icon-bar"></span>      </button>      <a class="navbar-brand" href="#">W3Cschool</a>   </div>   <div class="collapse navbar-collapse" id="example-navbar-collapse">      <ul class="nav navbar-nav">         <li ></li>... ...

导航栏的表单 .navbar-form

导航栏的按钮：用 class .navbar-btn 向不在 <form> 中的 <button> 元素添加按钮，按钮在导航栏上垂直居中。.navbar-btn 可被使用在 <a> 和 <input> 元素上。

注意：不要在 .navbar-nav 内的 <a> 元素上使用 .navbar-btn，因为它不是标准的button class

导航栏固定在顶部 .navbar-fixed-top

静态的顶部 (随着页面一起滚动) .navbar-static-top

倒置的导航栏（黑色背景白色文本）.navbar-inverse

注：为了防止导航栏与页面主体中的其他内容的顶部相交错，请向 <body> 标签添加至少 50 像素的内边距（padding），内边距的值可以根据您的需要进行设置

面包屑导航 .breadcrumb

0 0