bootstrap入门4——菜单、导航及按钮

菜单

中文文档里都有，包括对齐方式，标题，禁用方式，分割线，禁用的菜单项。

导航

<ul class="nav nav-tabs">
	<li class="active"><a href="#">1a>li>
	<li><a href="#">2a>li>
	<li class="disabled"><a href="#">3a>li>
ul>

• 胶囊形导航
  • 垂直堆叠的 导航
    • 二级导航中的分隔线
    • 自适应导航
      • 二级导航的实现：

      <ul class="nav nav-pills">
      	<li class="active"><a href="#">首页a>li>
      	<li class="dropdown">
      		<a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret">span>a>
      		<ul class="dropdown-menu">
      			<li><a href="##">CSSa>li>
      			<li><a href="##">HTML5a>li>
      		ul>
      	li>
      	<li><a href="##">关于我们a>li>
      ul>

      • 面包屑式导航：

      按钮

      • 按钮组：

      <div class="btn-group">
      	<button type="button" class="btn btn-default">
      		<span class="glyphicon glyphicon-step-backward">span>
      	button>
      	<button type="button" class="btn btn-default">
      		<span class="glyphicon glyphicon-step-forward">span>
      	button>
      div>

      • 按钮工具栏：

      <div class="btn-toolbar">
      
      	<div class="btn-group btn-group-lg">
      		<button class="...">button>
      	div>
      
      	<div class="btn-group btn-group-sm">
      		<button class="...">button>
      	div>
      div>

      • 按钮嵌套分组

      <div class="btn-group">
      	<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret">span>button>
      	<ul class="dropdown-menu">
      		<li><a>公司简介a>li>
      	ul>
      div>

      以上代码与处在同一级

      • 垂直分组：把btn-group改为btn-group-vertical
      • 自适应：

      <div class="wrap">
      	<div class="btn-group btn-group-justified">
      
      		<a href="#" class="btn btn-default">1a>
      		<a href="#" class="btn btn-default">2a>
      	div>
      div>

      注意要用 标签