改变图标的大小就是改变字体的,下拉菜单(基

时间:2020-03-28 15:57来源:美高梅游戏网站
Thisisalink 进度条 可以用来显示一个事件的进度,Bootstrap也做了很多样式,比如颜色,条纹,并且还可以使进度条动起来,但更多的效果功能还是要配合js来实现。 示例代码如下: div

Thisisalink

进度条

可以用来显示一个事件的进度,Bootstrap 也做了很多样式,比如颜色,条纹,并且还可以使进度条动起来,但更多的效果功能还是要配合 js来实现。

示例代码如下:

<div class="container">
  <div class="row">
    <div class="progress">
      <div class="progress-bar" style="width: 60%;">60%</div>
    </div>

    <div class="progress">
      <div class="progress-bar progress-bar-info" style="width: 36%;">36%</div>
    </div>

    <div class="progress">
      <div class="progress-bar progress-bar-warning" style="width: 70%;">70%</div>
    </div>

    <div class="progress">
      <div class="progress-bar progress-bar-danger" style="width: 20%;">20%</div>
    </div>

    <!--带条纹的进度条-->
    <div class="progress">
      <div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 20%;">20%</div>
    </div>

    <!--带堆叠效果的进度条-->
    <div class="progress">
      <div class="progress-bar" style="width: 10%;">10%</div>
      <div class="progress-bar progress-bar-info" style="width: 20%;">36%</div>
      <div class="progress-bar progress-bar-warning" style="width: 30%;">70%</div>
      <div class="progress-bar progress-bar-danger" style="width: 20%;">20%</div>
      <div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 10%;">20%</div>
    </div>
  </div>
</div>

图片 1.png)

Button1

标记

有时候想显示消息的数目,就像QQ或者微信那样,我们可以实用标记类加在 span 标签上。

示例代码如下:

<div class="container">
  <div class="row">
    <a href="#">未读消息12</a>
    <button class="btn btn-primary">未读消息12</button>
  </div>
</div>

注意:是 div.toolbar 包裹 div.btn-group,然后 div.btn-group 包裹同一个组的 button

$.foundation('dropdown',{activeClass:'open'});

面板

有标题和内容的部分就可以用面板来做。

  • panel 面板
  • panel-default 面板默认样式
  • panel-heading 面板的头部区域,不只是标题,还有副标题等等
  • panel-title 面板的头部区域里标题的样式
  • panel-body 面板的内容区域

示例代码如下:

<div class="container">
<div class="row">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">爱秋的艳</h3>
    </div>
    <div class="panel-body">
      <p>爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳</p>
    </div>
  </div>
</div>

<div class="row">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">爱秋的艳</h3>
    </div>
    <div class="panel-body">
      <p>爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳</p>
    </div>
  </div>
</div>

<div class="row">
  <div class="panel panel-success">
    <div class="panel-heading">
      <h3 class="panel-title">爱秋的艳</h3>
    </div>
    <div class="panel-body">
      <p>爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳</p>
    </div>
  </div>
</div>


<div class="row">
  <div class="panel panel-info">
    <div class="panel-heading">
      <h3 class="panel-title">爱秋的艳</h3>
    </div>
    <div class="panel-body">
      <p>爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳</p>
    </div>
  </div>
</div>

<div class="row">
  <div class="panel panel-warning">
    <div class="panel-heading">
      <h3 class="panel-title">爱秋的艳</h3>
    </div>
    <div class="panel-body">
      <p>爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳</p>
    </div>
  </div>
</div>

<div class="row">
  <div class="panel panel-danger">
    <div class="panel-heading">
      <h3 class="panel-title">爱秋的艳</h3>
    </div>
    <div class="panel-body">
      <p>爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳</p>
    </div>
  </div>
</div>

面板还可以结合列表来使用,注意列表组没有放在panel-body中哦。

示例代码如下:

<!--面板与列表组结合起来-->
      <div class="row">
        <div class="panel panel-danger">
          <div class="panel-heading">
            <h3 class="panel-title">学院</h3>
          </div>
          <div class="panel-body">
            <p>程序媛爱程序猿程序媛爱程序猿程序媛爱程序猿程序媛爱程序猿程序媛爱程序猿程序媛爱程序猿程序媛爱程序猿程序媛爱程序猿程序媛爱程序猿程序媛爱程序猿</p>
          </div>
          <ul class="list-group">
          <li class="list-group-item">html</li>
          <li class="list-group-item">css</li>
          <li class="list-group-item">javascript</li>
          <li class="list-group-item">html5/css3</li>
          <li class="list-group-item">less/sass</li>
          <li class="list-group-item">bootstrap</li>
        </ul>  
        </div>
      </div>

以上呢就是 Bootstrap 组件的全部内容啦,Bootstrap 的设计是很有规律的呢,多看多用,自然就可以记住啦。

Bootstrap 系列:

Bootstrap学习文档(一)
Bootstrap学习文档(二)
Bootstrap学习文档(三)
Bootstrap学习文档(四)

<ul >

AlertButton

分页

对一个数量比较多的列表内容,我们需要使用分页功能来显示一部分内容,Bootstrap 为我们提供了分页的组件。

示例代码如下:

<div class="container">
  <div class="row">
    <ul class="pagination">
      <li class="disabled"><a href="#"><<</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li class="active"><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">>></a></li>
    </ul>
  </div>

  <div class="row">
    <ul class="pagination pagination-lg">
      <li class="disabled"><a href="#"><<</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li class="active"><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">>></a></li>
    </ul>
  </div>

  <div class="row">
    <ul class="pagination pagination-md">
      <li class="disabled"><a href="#"><<</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li class="active"><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">>></a></li>
    </ul>
  </div>

  <div class="row">
    <ul class="pagination pagination-sm">
      <li class="disabled"><a href="#"><<</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li class="active"><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">>></a></li>
    </ul>
  </div>

翻页
可以分居两边,只需要加上 previous 和 next 的class 类名

  <ul class="pager">
    <li><a href="#">←上一页</a></li>
    <li><a href="#">下一页→</a></li>
  </ul>
  <ul class="pager">
    <li class="previous disabled"><a href="#">←上一页</a></li>
    <li class="next"><a href="#">下一页→</a></li>
  </ul>
</div>
<div >    <div >      …    </div>    <div >      …    </div>    <div >      …    </div>    <div >      …    </div>  </div>  

Button1

路径导航

在比较复杂点页面中,有时候我们需要让用户知道自己所处的位置,我们就可以使用路径导航组件,使用起来也很简单的。

示例代码如下:

<div class="container">
  <div class="row">
    <ul class="breadcrumb">
      <li><a href="#">bootstrap</a></li>
      <li><a href="#">dist</a></li>
      <li class="active">css</li>
    </ul>
  </div>
</div>

下拉菜单(原理分析)

上面的代码示例演示了按钮的所有预设大小、样式和状态。每一个小示例都提供强大的灵活性;这些预设都是可以被定制样式来重写,那就意味着你不用重头开始编写你的按钮。

导航

Bootstrap 中的导航分为标签页式导航,面包屑式导航,两端对齐式导航,可以有需要的选择使用,导航里面又可以放下拉菜单。

示例代码如下:

  • nav 导航的基本样式
  • nav-tabs 标签式导航
  • nav-pills 胶囊式导航
  • nav-stacked 导航竖着排
  • nav-stacked 两端对齐式导航
<div class="container">
  <div class="row">
    <ul class="nav nav-tabs">
      <li><a href="#">程序员</a></li>
      <li class="active"><a href="#">程序媛</a></li>
      <li><a href="#">code</a></li>
    </ul>
  </div>

  <div class="row" style="margin-top: 10px;">
    <ul class="nav nav-pills">
      <li><a href="#">程序员</a></li>
      <li class="active"><a href="#">程序媛</a></li>
      <li><a href="#">code</a></li>
    </ul>
  </div>

  <div class="row" style="margin-top: 10px;">
    <ul class="nav nav-pills nav-stacked">
      <li><a href="#">程序员</a></li>
      <li class="active"><a href="#">程序媛</a></li>
      <li><a href="#">code</a></li>
    </ul>
  </div>

  <div class="row" style="margin-top: 10px;">
    <ul class="nav nav-pills nav-justified">
      <li><a href="#">程序员</a></li>
      <li class="active"><a href="#">程序媛</a></li>
      <li><a href="#">code</a></li>
    </ul>
  </div>


  <!--导航中放下拉菜单 -->
  <div class="row" style="margin-top: 10px;">
    <ul class="nav nav-tabs">
      <li><a href="#">程序媛</a></li>
      <li class="active"><a href="#">程序猿</a></li>
      <li><a href="#">kaivon</a></li>
      <li>
        <a href="#" data-toggle="dropdown">课程 </a>
        <ul class="dropdown-menu">
          <li><a href="#">html</a></li>
          <li><a href="#">css</a></li>
          <li><a href="#">javascript</a></li>
          <li><a href="#">less</a></li>
          <li><a href="#">bootstrap</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

选项卡

上面的导航可以变成选项卡式的,这样对于内容较多的页面就可以进行有效的分离。

制作选项卡的步骤:

  • 1.导航对应的所有内容需要放到一个class为tab-content的层里面
  • 2.一个内容块都要加上一个名为tab-pane的class,并且给对应的默认显示的内容添加一个active的class
  • 3.给每一个导航的a标签添加一个data-toggle="tab"的自定义属性表示选项卡,还记得下拉菜单的data-toggle的值吗?没错,是dropdown。
  • 4.给每一个内容部分添加一个id
  • 5.给每一个导航里的a标签添加一个锚点

示例代码如下:

<style>
  .tab1{
    border: 1px solid #ddd;
    border-top: none;
    padding: 100px;
    border-radius: 0 0 5px 5px;
  }
</style>

<div class="container">
  <div class="row">
    <ul class="nav nav-tabs">
      <li class="active"><a href="#content1" data-toggle="tab">程序员</a></li>
      <li><a href="#content2" data-toggle="tab">程序媛</a></li>
      <li><a href="#content3" data-toggle="tab">code</a></li>
    </ul>
    <div class="tab-content">
      <div id="content1" class="tab-pane active">html</div>
      <div id="content2" class="tab-pane">css</div>
      <div id="content3" class="tab-pane">js</div>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-4">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#content4" data-toggle="tab">程序员</a></li>
        <li><a href="#content5" data-toggle="tab">程序媛</a></li>
        <li><a href="#content6" data-toggle="tab">code</a></li>
      </ul>
      <div class="tab-content tab1">
        <div id="content4" class="tab-pane active">html</div>
        <div id="content5" class="tab-pane">css</div>
        <div id="content6" class="tab-pane">js</div>
      </div>
    </div>
  </div>
</div>  

注意是在 li 上面加类 dropdown,而是 .dropdown-toggle 不再是添加到 button 上而是添加在 a 上面,因此 a 也不需要 .btn 和 .btn-default,另外 a 里面一定要有 ,不然鼠标放上去光标不会发生改变。

代码实现了一组标准的按钮,你还可以添加“radius”来取得圆角,添加能够控制宽度的class“even-2”、“even-3”一直到 “even-8”。里面的数字表示按钮的大小,最好是使用按钮组中的按钮个数。举个例子,如果你要创建4个按钮,那么最好使用“even-4”。

注意下面的组件,很多是需要用到 js 的,所以要引入 Bootstrap 的 js 文件和
jquery 文件在示例代码中,我只是没有写,注意加上哦。

 

按钮组

输入框

  • input-group 输入框组,只能针对输入框,是我们前面说到的 form-group 的一部分
  • input-group-addon 给输入框前后添加的额外元素
  • input-group-* 修改输入框组的尺寸,与之前不同的是,这里 * 的内容只有 lg md sm 三种尺寸。
  • input-group-btn 添加的额外元素是按钮,一般的按钮的话用 span 标签包裹起来,下拉菜单按钮,外面需要 div 包裹起来,注意哦~。

示例代码如下:

<div class="container">
      <div class="row">
        <div class="input-group">
          @
          <input type="text" class="form-control" />
        </div>
      </div>

      <!--输入框组的尺寸-->
      <div class="row" style="margin-top: 10px;">
        <div class="input-group input-group-lg">
          @
          <input type="text" class="form-control" />
        </div>

        <div class="input-group input-group-md">
          @
          <input type="text" class="form-control" />
        </div>

        <div class="input-group input-group-sm">
          @
          <input type="text" class="form-control" />
        </div>

        <!--没有这样的尺寸-->
        <!--<div class="input-group input-group-xs">
          @
          <input type="text" class="form-control" />
        </div>-->
      </div>


      <!--额外内容里放的是checkbox-->
      <div class="row" style="margin-top: 10px;">
        <div class="input-group">

            <input type="checkbox" />

          <input type="text" class="form-control" />
        </div>
      </div>

      <!--额外内容里放的是radio-->
      <div class="row" style="margin-top: 10px;">
        <div class="input-group">

            <input type="radio" />

          <input type="text" class="form-control" />
        </div>
      </div>

      <!--额外内容里放的是按钮-->
      <div class="row" style="margin-top: 10px;">
        <div class="input-group">
          <input type="text" class="form-control" />

            <button type="button" class="btn btn-default">搜索</button>

        </div>
      </div>

      <!--额外内容里放的是按钮-->
      <div class="row" style="margin-top: 10px;">
        <div class="input-group">
          <div class="input-group-btn">
              <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Bootstrap课程 </button>
              <ul class="dropdown-menu">
                <li><a href="#">html</a></li>
                <li><a href="#">css</a></li>
                <li><a href="#">javascript</a></li>
                <li><a href="#">less</a></li>
                <li><a href="#">bootstrap</a></li>
              </ul>
          </div>
          <input type="text" class="form-control" />
        </div>
      </div>
    </div>
<ul >       <li ><a  >首页</a></li>       <li >          <a    data-toggle="dropdown">教程</a>          <ul >              <li><a  >CSS3</a></li>              …         </ul>       </li>       <li><a  >关于我们</a></li>  </ul>  

Yetanother

图片 2

按钮(等分按钮)

SecondaryButton

Bootstrap

运行效果如下:

到目前为止,你应该对Foundation的列表结构运作方式比较熟悉了,同时也是这个插件的核心。创建一个无序列表,在ul标签中添加class”clearing-thumbs”和一个空值的自定义属性为“data-clearing”,接着在每个li里添加内容。

导航条

  1. 导航条的基本样式
  • navbar 导航条的基础样式
  • nav navbar-nav 导航条里菜单的固定样式组合class
  • navbar-default 导航条的默认样式
  • navbar-inverse 导航条的样式为黑色
  • navbar-static-top 导航条为直角,改变导航条默认的圆角效果
  • navbar-fixed-top 导航条固定在最上边,需要给body加一个padding或者margin,使得固定的导航条不会覆盖下面的内容
    -navbar-fixed-bottom 导航条固定在最下边,不会随滚动的滚动而变动

示例代码如下:

<body style="padding: 50px 0; height: 2000px;">
<div class="container">
  <!--默认样式的导航条-->
  <nav class="navbar navbar-default">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">学院</a></li>
      <li><a href="#">程序媛</a></li>
      <li><a href="#">code</a></li>
    </ul>
  </nav>

  <!--黑色的导航条-->
  <nav class="navbar navbar-inverse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">学院</a></li>
      <li><a href="#">程序媛</a></li>
      <li><a href="#">code</a></li>
    </ul>
  </nav>

  <!--黑色的导航条-->
  <nav class="navbar navbar-inverse navbar-static-top">
    <ul class="nav navbar-nav">
     <li class="active"><a href="#">学院</a></li>
      <li><a href="#">程序媛</a></li>
      <li><a href="#">code</a></li>
    </ul>
  </nav>

  <!--固定在上边的导航条-->
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">学院</a></li>
      <li><a href="#">程序媛</a></li>
      <li><a href="#">code</a></li>
    </ul>
  </nav>

  <!--固定在上边的导航条-->
  <nav class="navbar navbar-default navbar-fixed-bottom">
    <ul class="nav navbar-nav">
     <li class="active"><a href="#">学院</a></li>
      <li><a href="#">程序媛</a></li>
      <li><a href="#">code</a></li>
    </ul>
  </nav>
</div>
</body>

2.导航条的进阶

  • navbar-header 导航的头部,一般情况下来放logo
  • navbar-brand 用来放logo的,需要配合navbar-header

示例代码如下:

<!--一般情况下都会把nav标签包在container的外面,解决 active 项溢出的问题-->
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <a href="#" class="navbar-brand">logo</a>
    </div>

    <ul class="nav navbar-nav">
      <li class="active"><a href="#">程序员</a></li>
      <li><a href="#">程序媛</a></li>
      <li><a href="#">code</a></li>
    </ul>
  </div>
</nav>

<!--对齐方式的导航条-->
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <a href="#" class="navbar-brand">logo</a>
    </div>
    <!--navbar-left表示内容以左边对齐-->
    <ul class="nav navbar-nav navbar-left">
      <li class="active"><a href="#">程序员</a></li>
      <li><a href="#">程序媛</a></li>
      <li><a href="#">code</a></li>
    </ul>
    <!--navbar-left表示内容以右边对齐-->
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">登录</a></li>
      <li><a href="#">注册</a></li>
    </ul>
  </div>
</nav>

<!--有链接与文字的导航条-->
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <a href="#" class="navbar-brand">logo</a>
    </div>
    <!--navbar-left表示内容以左边对齐-->
    <ul class="nav navbar-nav navbar-left">
      <li class="active"><a href="#">程序员</a></li>
      <li><a href="#">程序媛</a></li>
      <li><a href="#">code</a></li>
    </ul>
    <!--如果导航里有文字需要给文字加上navbar-text,如果有链接需要给链接加上navbar-text-->
    <a href="#" class="navbar-link navbar-text">链接</a>
    <p class="navbar-text">这里是一段文字</p>
    <!--navbar-left表示内容以右边对齐-->
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">登录</a></li>
      <li><a href="#">注册</a></li>
    </ul>
  </div>
</nav>

<!--有表单的导航条-->
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <a href="#" class="navbar-brand">logo</a>
    </div>
    <!--navbar-left表示内容以左边对齐-->
    <ul class="nav navbar-nav navbar-left">
      <li class="active"><a href="#">程序员</a></li>
      <li><a href="#">程序媛</a></li>
      <li><a href="#">code</a></li>
    </ul>
    <!--如果导航里只有一个按钮,那给它加一个navbar-btn-->
    <button class="btn btn-default navbar-btn">搜索</button>
    <!--如果导航里有form,那就需要给form添加一个navbar-form,想让它们在一行显示,就要添加一个navbar-left-->
    <form action="http://www.apeclass.com/" class="navbar-form navbar-left">
      <input type="text" class="form-control" />
      <button class="btn btn-default">搜索</button>
    </form>
    <!--navbar-left表示内容以右边对齐-->
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">登录</a></li>
      <li><a href="#">注册</a></li>
    </ul>
  </div>
</nav>

下拉菜单(下拉分割线)

实现这些基本按钮是简单的,实现按钮组也正是如此。一个简单的按钮组的结构如下:

字体图标

Bootstrap 中还带有免费的图标供我们使用,这些图标使用起来很简单,就像使用字体一样,改变图标的大小就是改变字体的 font-size,改变图标的颜色就是改变字体的颜色 color。有了这些图标,再也不用切图啦。另外还有第三方的图标我们可以使用,比如说 Font Awesome ,也是这种字体图标。在Bootstrap的下载包中,记得引入fonts文件,这样图标才能显示出来。

示例代码如下:

<div class="container">
  <div class="row">

  </div>

  <button class="btn btn-danger">
     kaivon
  </button>
</div>

下拉菜单项的默认的状态有悬浮状态(:hover)和焦点状态(:focus),这两个状态都不用刻意去设置。

DisabledButton

巨幕

巨幕可以用在全屏显示或者铺满整个页面,还以用在页头,挺实用的类

示例代码如下:

<div class="container">
  <div class="jumbotron">
    <h1>程序员</h1>
    <p>程序员程序员程序员程序员程序员程序员程序员程序员程序员程序员程序员程序员程序员程序员程序员程序员程序员程序员程序员</p>
    <p><a href="#" class="btn btn-primary">程序媛</a></p>
  </div>
</div>


<div class="jumbotron">
  <div class="container">
    <h1>程序员</h1>
    <p>程序员程序员程序员程序员程序员程序员程序员程序员程序员程序员程序员程序员程序员程序员程序员程序员程序员程序员程序员</p>
    <p><a href="#" class="btn btn-primary">程序媛</a></p>
  </div>
</div>

使用方法:

Yetanother

下拉菜单

用 Bootstrap 做一个下拉菜单只需要三步,Bootstrap 官网上写的有些复杂,这是因为 Bootstrap 考虑到了屏幕阅读器这类用户的体验,我们则不需要这个。

  • 1.给父级div添加一个 dropdown的class,或者给父级添加定位属性
  • 2.给button按钮添加一个data-toggle="dropdown"的属性,最好再加一个dropdown-toggle的class,这样可以消除按钮上的光环
  • 3.ul需要添加一个dropdown-menu的class

示例代码如下:

<div class="container">
  <div class="row">
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">前端 </button>

      <ul class="dropdown-menu">
        <li><a href="#">html</a></li>
        <li><a href="#">css</a></li>
        <li><a href="#">javascript</a></li>
        <li><a href="#">less</a></li>
        <li><a href="#">bootstrap</a></li>
      </ul>
    </div>
  </div>
</div>

下拉菜单的样式
下拉菜单除了上面默认的样式还有其他不同的样式,比如说下拉菜单右对齐(默认是左对齐),下拉菜单里面也有样式可以选择。

  • open 默认菜单是展开的,给 dropdown 添加
  • dropup 让菜单在上面显示,将默认的 dropdown 换为dropup
  • dropdown-menu-right 下拉菜单右对齐,注意button按钮的位置,要撑满整个父级,可以用按钮的 btn-block 类名
  • dropdown-header 菜单里有标题,给 li 添加
  • text-center 让内容居中,对段落 p 标签也是适用的哦
  • divider 分隔线,给li添加

示例代码如下:

<div class="container">
  <div class="row">
    <div class="col-lg-4">
      <div class="dropdown open">
        <button class="btn btn-default dropdown-toggle btn-block" data-toggle="dropdown">默认打开 </button>

        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">html</a></li>
          <li><a href="#">css</a></li>
          <li><a href="#">javascript</a></li>
          <li><a href="#">less</a></li>
          <li><a href="#">bootstrap</a></li>
        </ul>
      </div>
    </div>
    <div class="col-lg-4" style="margin-top: 150px;">
      <div class="dropup">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">向上展开 </button>

        <ul class="dropdown-menu">
          <li><a href="#">html</a></li>
          <li><a href="#">css</a></li>
          <li><a href="#">javascript</a></li>
          <li><a href="#">less</a></li>
          <li><a href="#">bootstrap</a></li>
        </ul>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">带有标题和分割线 </button>

        <ul class="dropdown-menu">
          <li class="dropdown-header text-center"><a href="#">前端</a></li>
          <li><a href="#">html</a></li>
          <li><a href="#">css</a></li>
          <li><a href="#">javascript</a></li>
          <li><a href="#">less</a></li>
          <li><a href="#">bootstrap</a></li>
          <li class="divider"></li>
          <li class="dropdown-header text-center"><a href="#">后端</a></li>
          <li><a href="#">php</a></li>
          <li><a href="#">java</a></li>
          <li class="disabled"><a href="#">.net</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

按钮的向下向上三角形

DropdownButton

按钮组

  • btn-group 按钮组
  • btn-group-* 改变按钮的尺寸,* 的内容为 lg md sm xs
  • btn-group-vertical 按钮组竖着排
  • btn-group-justified 让按钮两端对齐,三种实现方式,推荐使用 a 标签
    • 如果说是 button 标签,那需给他们添加一个父级,并且给父级添加一个 btn-group 的 class
    • 如果说是 input 标签,那需给他们添加一个父级,并且给父级添加一个 btn-group 的 class
    • 如果说是 a 标签,则不需要给他们添加一个父级,写起来起来比较简单

示例代码如下:

<div class="container">
  <!--单个按钮-->
  <div class="row">
    <button class="btn btn-primary">kaivon</button>
    <button class="btn btn-success">kaivon</button>
    <button class="btn btn-info">kaivon</button>
  </div>

  <!--按钮组-->
  <div class="row" style="margin-top: 10px;">
    <div class="btn-group">
      <button class="btn btn-primary">kaivon</button>
      <button class="btn btn-success">kaivon</button>
      <button class="btn btn-info">kaivon</button>
    </div>
  </div>

  <!--按钮组-->
  <div class="row" style="margin-top: 10px;">
    <div class="btn-group btn-group-lg">
      <button class="btn btn-primary">kaivon</button>
      <button class="btn btn-success">kaivon</button>
      <button class="btn btn-info">kaivon</button>
    </div>
    <div class="btn-group btn-group-md">
      <button class="btn btn-primary">kaivon</button>
      <button class="btn btn-success">kaivon</button>
      <button class="btn btn-info">kaivon</button>
    </div>
    <div class="btn-group btn-group-sm">
      <button class="btn btn-primary">kaivon</button>
      <button class="btn btn-success">kaivon</button>
      <button class="btn btn-info">kaivon</button>
    </div>
    <div class="btn-group btn-group-xs">
      <button class="btn btn-primary">kaivon</button>
      <button class="btn btn-success">kaivon</button>
      <button class="btn btn-info">kaivon</button>
    </div>
  </div>

  <!--按钮组,竖着排-->
  <div class="row" style="margin-top: 10px;">
    <div class="btn-group-vertical">
      <button class="btn btn-primary">kaivon</button>
      <button class="btn btn-success">kaivon</button>
      <button class="btn btn-info">kaivon</button>
    </div>
  </div>

  <!--btn两端对齐,如果说是button,那需给他们添加一个父级,并且给父级添加一个btn-group的class-->
  <div class="row" style="margin-top: 10px;">
    <div class="btn-group btn-group-justified">
      <div class="btn-group">
        <button class="btn btn-primary">kaivon</button>
      </div>
      <div class="btn-group">
        <button class="btn btn-success">kaivon</button>
      </div>
      <div class="btn-group">
        <button class="btn btn-info">kaivon</button>
      </div>
    </div>
  </div>

  <!--btn两端对齐,如果说是input,那需给他们添加一个父级,并且给父级添加一个btn-group的class-->
  <div class="row" style="margin-top: 10px;">
    <div class="btn-group btn-group-justified">
      <div class="btn-group">
        <input type="button" class="btn btn-primary" value="kaivon" />
      </div>
      <div class="btn-group">
        <input type="button" class="btn btn-success" value="kaivon" />
      </div>
      <div class="btn-group">
        <input type="button" class="btn btn-info" value="kaivon" />
      </div>
    </div>
  </div>

  <!--btn两端对齐,如果说是 a 标签,则不需要给他们添加一个父级,写起来起来比较简单-->
  <div class="row" style="margin-top: 10px;">
    <div class="btn-group btn-group-justified">
      <a href="#" class="btn btn-primary">kaivon</a>
      <a href="#" class="btn btn-success">kaivon</a>
      <a href="#" class="btn btn-info">kaivon</a>
    </div>
  </div>
</div>
  • 按钮组图标
    按钮组中可以添加图标,比如说常见的下拉按钮图标,,同时添加的方式也有不同,下面还是给出了三种不同的标签添加,input标签是不能这样使用的。

示例代码如下:

<!--给按钮添加三角形-->
  <div class="row" style="margin-top: 10px;">
    <div class="btn-group">
      <button class="btn btn-primary">kaivon </button>
      <a href="#" class="btn btn-success">kaivon </a>
      <input type="button" class="btn btn-info" value="kaivon" /> 
    </div>
  </div>

  <!--能过组的试给按钮添加下三角形-->
  <div class="row" style="margin-top: 10px;">
    <div class="btn-group">
      <button class="btn btn-primary">kaivon</button>
      <button class="btn btn-primary"></button>
    </div>
  </div>

  <!--能过组的试给按钮添加上三角形-->
  <div class="row" style="margin-top: 10px;">
    <div class="btn-group dropup">
      <button class="btn btn-primary">kaivon</button>
      <button class="btn btn-primary"></button>
    </div>
  </div>

面包屑(Breadcrumb)一般用于导航,主要是起的作用是告诉用户现在所处页面的位置(当前位置)。

RoundButton

列表组

可以用来用作侧栏导航或者信息列表的展示。

  • list-group 列表组,给 ul 添加
  • list-group-item 列表项,给 li 添加

示例代码如下:

<div class="row">
  <ul class="list-group">
    <li class="list-group-item">html</li>
    <li class="list-group-item">css</li>
    <li class="list-group-item">javascript</li>
    <li class="list-group-item">html5/css3</li>
    <li class="list-group-item">less/sass</li>
    <li class="list-group-item">bootstrap</li>
  </ul>
</div>

还可以结合前面的标记组件来使用,并且标记会自动跑到右边显示。

示例代码如下:

<!--给每个列表项添加了一个标记,那这个标记就会自动跑到右侧-->
<div class="row">
  <ul class="list-group">
    <li class="list-group-item">html12</li>
    <li class="list-group-item">css34</li>
    <li class="list-group-item">javascript52</li>
    <li class="list-group-item">html5/css335</li>
    <li class="list-group-item">less/sass27</li>
    <li class="list-group-item">bootstrap7</li>
  </ul>
</div>

列表组不仅可以用 ul 和 li 来做,还可以使用 div 加 a 标签来做哦。

示例代码如下:

<!--用a标签做的列表组,可以添加激活状态,禁用状态,背景色-->
<div class="row">
  <div class="list-group">
    <a href="#" class="list-group-item active">html12</a>
    <a href="#" class="list-group-item disabled">css34</a>
    <a href="#" class="list-group-item list-group-item-info">javascript52</a>
    <a href="#" class="list-group-item list-group-item-warning">html5/css335</a>
    <a href="#" class="list-group-item list-group-item-danger">less/sass27</a>
    <a href="#" class="list-group-item list-group-item-success">bootstrap7</a>
  </div>
</div>

列表组里面还可以是标题加段落,可以用来做文章列表。

  • list-group-item-heading 列表组标题
  • list-group-item-text 列表组内容

示例代码如下:

<!--添加标题与段落的列表组,列表组标题:list-group-item-heading,列表组内容:list-group-item-text-->
<div class="row">
  <ul class="list-group">
    <li class="list-group-item active">
      <h4 class="list-group-item-heading">程序媛</h4>
      <p class="list-group-item-text">程序媛爱程序猿程序媛爱程序猿程序媛爱程序猿程序媛爱程序猿</p>
    </li>
    <li class="list-group-item">
      <h4 class="list-group-item-heading">程序媛</h4>
      <p class="list-group-item-text">程序媛爱程序猿程序媛爱程序猿程序媛爱程序猿程序媛爱程序猿</p>
    </li><li class="list-group-item">
      <h4 class="list-group-item-heading">程序媛</h4>
      <p class="list-group-item-text">程序媛爱程序猿程序媛爱程序猿程序媛爱程序猿程序媛爱程序猿</p>
    </li><li class="list-group-item">
      <h4 class="list-group-item-heading">程序媛</h4>
      <p class="list-group-item-text">程序媛爱程序猿程序媛爱程序猿程序媛爱程序猿程序媛爱程序猿</p>
    </li>
  </ul>
</div>

 

备注:千万别忘记添加已下载来的Foundation工程包中的“foundation.dropdown.js”。

警告框

有时候用户在填写表单信息时,我们可以在输入框下面填上一些信息,并带有关闭的小按钮,Bootstrap 也为我们提供了这些组件,而不用我们自己在写 js 的代码,还是通过自定义属性实现的,data-dismiss="alert",在使用时只需要加上 alert 的类名即可,其实现在可以感受到,学习 Bootstrap 就是记住 class ,不用我们在使用是想样式。

示例代码如下:

<div class="container">
  <div class="row">
    <p class="alert alert-success">这里是一个警告框!!!!<button class="close" data-dismiss="alert">×</button></p>
    <p class="alert alert-info">这里是一个警告框!!!!</p>
    <p class="alert alert-warning">这里是一个警告框!!!!</p>
    <p class="alert alert-danger">这里是一个警告框!!!!</p>
  </div>
</div>

在二级导航中用分隔线只需要添加“<li class=”nav-divider”></li>”这样的一个空标签就可以了。

Thisisalink

图文编排

图文编排也是网页上经常使用的组件,例如在留言或者评论区域,或者文字说明,当然需要结合其他样式使用,才能是图文搭配的更好看。

  • media 图文混排,默认图片靠上对齐
  • media-left 图片的区域,在左边显示
  • media-right 图片的区域,在右边显示
  • media-middle 图片居中对齐
  • media-bottom 图片靠下对齐
  • media-body 内容区域
  • media-heading 内容区域里的标题

示例代码如下

<div class="container">
  <div class="row">
    <div class="media">
      <a href="http://www.baidu.com" class="media-left">
       ![](...)
      </a>
      <div class="media-body">
        <h4 class="media-heading">程序员</h4>
        <p>程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员</p>
        <p>程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员</p>
        <p>程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员</p>
        <p>程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员</p>
      </div>
    </div>
  </div>

  <!--图片在右边显示-->
  <div class="row">
    <div class="media">
      <div class="media-body">
        <h4 class="media-heading">程序员</h4>
        <p>程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员</p>
        <p>程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员</p>
        <p>程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员</p>
        <p>程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员</p>
      </div>
      <a href="http://www.baidu.com" class="media-right">
        ![](...)
      </a>
    </div>
  </div>

图文混排复杂的使用方式

  <!--左右都有图片-->
  <div class="row">
    <div class="media">
      <a href="http://www.baidu.com" class="media-left">
      ![](...)
      </a>
      <div class="media-body">
        <h4 class="media-heading">程序员</h4>
        <p>程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员</p>
        <p>程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员</p>
        <p>程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员</p>
        <p>程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员</p>
      </div>
      <a href="http://www.baidu.com" class="media-right">
       ![](...)
      </a>
    </div>
  </div>

  <!--图片在居中对齐和靠下对齐-->
  <div class="row">
    <div class="media">
       <a href="http://www.baidu.com" class="media-left media-middle">
        ![](...)
      </a>
      <div class="media-body">
        <h4 class="media-heading">程序员</h4>
        <p>程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员</p>
        <p>程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员</p>
        <p>程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员</p>
        <p>程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员</p>
      </div>
      <a href="http://www.baidu.com" class="media-right media-bottom">
       ![](...)
      </a>
    </div>
  </div>

  <!--右侧内容又嵌套了一个media-->
  <div class="row">
    <div class="media">
      <a href="http://www.baidu.com" class="media-left">
       ![](...)
      </a>
      <div class="media-body">
         <h4 class="media-heading">程序员</h4>
        <p>程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员</p>
        <p>程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员</p>
        <p>程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员</p>
        <p>程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员</p>
        <div class="media">
          <a href="http://www.baidu.com" class="media-left">
           ![](...)
          </a>
          <div class="media-body">
             <h4 class="media-heading">程序员</h4>
            <p>程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员</p>
            <p>程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员</p>
            <p>程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员</p>
            <p>程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员程序媛爱程序员</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

图片 3

SuccessButton

缩略图

图片配上文字的首选,只需要给父级添加一个 thumbnail 类名就可以变成一个缩略图,而给文字加上 caption 类名会使文字与间距增大一点。

示例代码如下:

<div class="container">
  <div class="row">
    <div class="col-lg-3">
      <a href="http://www.baidu.com" class="thumbnail">
        ![](...)
      </a>
    </div>
    <div class="col-lg-3">
      <a href="http://www.baidu.com" class="thumbnail">
        ![](...)
      </a>
    </div>
    <div class="col-lg-3">
      <a href="http://www.baidu.com" class="thumbnail">
        ![](...)
      </a>
    </div>
    <div class="col-lg-3">
      <a href="http://www.baidu.com" class="thumbnail">
       ![](...)
      </a>
    </div>
  </div>

  <!--还可以把thumbnail给父级,会有不同的样式-->
  <div class="row">
    <div class="col-lg-4">
      <div class="thumbnail">
        <a href="http://www.baidu.com">
         ![](...)
        </a>
        <div>
          <h3>程序员</h3>
          <p>程序员爱程序媛程序员爱程序媛程序员爱程序媛程序员爱程序媛</p>
          <p><a href="#" class="btn btn-primary">程序媛</a> <a href="#" class="btn btn-danger">code</a></p>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="thumbnail">
        <a href="http://www.apeclass.com">
         ![](...)
        </a>
        <div class="caption">
          <h3>程序员</h3>
          <p>程序员爱程序媛程序员爱程序媛程序员爱程序媛程序员爱程序媛</p>
          <p><a href="#" class="btn btn-primary">程序媛</a> <a href="#" class="btn btn-danger">code</a></p>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="thumbnail">
        <a href="http://www.apeclass.com">
          ![](...)
        </a>
        <div class="caption">
         <h3>程序员</h3>
          <p>程序员爱程序媛程序员爱程序媛程序员爱程序媛程序员爱程序媛</p>
          <p><a href="#" class="btn btn-primary">程序媛</a> <a href="#" class="btn btn-danger">code</a></p>
        </div>
      </div>
    </div>
  </div>
</div>

有些菜单是需要向上弹出的,比如说你的菜单在页面最底部,而这个菜单正好有一个下拉菜单,为了让用户有更好的体验,不得不让下拉菜单向上弹出。在Bootstrap框架中专门为这种效果提代了一个类名“dropup”。使用方法正如前面所示,只需要在“btn-group”上添加这个类名(当然,如果是普通向上弹出下拉菜单,你只需要在“dropdown”类名基础上追加“dropup”类名即可)。

在最新的Foundation版本中,添加了一个新的JavaScript插件叫dropdowns,这个插件放置在顶部按钮是非常方便的。当你使用它的时候,需要在button标签中添加class”dropdown”和一个自定义属性名为”data-dropdown”。

 图片 4

Thisisanother

在介绍按钮一节中,我们知道按钮是通过btn-lg、btn-sm和btn-xs三个类名来调整padding、font-size、line-height和border-radius属性值来改变按钮大小。那么按钮组的大小,我们也可以通过类似的方法:

Button3

3、下拉菜单项使用一个ul列表,并且定义一个类名为“dropdown-menu”,此示例为:

值得你去学习最后的灵活布局是在按钮里添加一个分隔按钮来提供选择。分隔按钮可以用来指示可以下拉、下载等你想要的功能。使用也很简单,只需在上面代码例子中添加class“split”,如下代码示例:

 

LargeButton

 

按钮工具栏

  ☑  .btn-group-lg:大按钮组

DropdownButton

html中的tabIndex属性可以设置键盘中的TAB键在控件中的移动顺序,即焦点的顺序。将tabIndex赋值为-1,则在使用[Tab]键时,此元素被忽略。

在按钮中使用相关联的class来获得不同的样式,例如,在编写“button”的时候,就可以添加大小样式——“small”,颜色样式—— “success”和圆角样式——“round”。同时,你还可以添加“disabled”来是按钮处于不可按状态,样式效果就跟该class的 词义是一致的。

特别声明:在制作等分按钮组时,请尽量使用<a>标签元素来制作按钮,因为使用<button>标签元素时,使用display:table在部分浏览器下支持并不友好。

分隔按钮

对 <button> 增添类 .btn .btn-default会更加好看一些,另外尽量声明 type="button"。

SmallButton

<div ></div>

清除插件

Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名。

dropdown js是一个简单的插件,但只有一个选择来激活它:设置指定的class:

注意:这个 li 里面没有包裹<a>,经过实验发现,只有希望鼠标放到那个 li 上面时其背景发生改变才会在那个 li 中加入<a>

Thisisanother

按钮(按钮组)

DefaultButton

图片 5

TinyButton

  ☑  .btn-group-sm:小按钮组

注意到上面代码,“f-dropdown”是非常重要的,不要遗漏了。

 

清除是一个超级快、轻量级插件。当orbit滑动不起作用时,使用这个插件是很简单的且有用的。

<li role="presentation" >第一部分菜单头部</li>

Button3

 

上一章我们学习了网页顶部导航的定制功能,这节我们要介绍Foundation一系列稳定的、风格一致的按钮,并且是很容易使用的。添加一个class”button”在任意一个锚点、输入框 或者按钮元素,则使得该元素转化为Foundation样式的按钮,这得到的也只是标准的、默认的按钮,然 而你却可以使用不同样式与种类的按钮。如下示例图:

在Bootstrap框架中制作二级导航就更容易了。只需要将li当作父容器,使用类名“dropdown”,同时在li中嵌套另一个列表ul,使用前面介绍下拉菜单的方法就可以:

如果你在第一个li标签中添加class”clearing-feature”,那么第一张图片就作为默认图片。清除也使用了前面文章所介绍的初学者学习foundation:网格系统,使得所有的缩略图搞一致,并且均匀分布。

导航(胶囊形(pill)导航)

Button2

 

好吧,今天就学到这里了,比较累了,选择几首好听的歌曲听听吧,今天我们完成按钮和下拉功能学习,接下来将学习定制的表单和切换了,努力吧!

注意:li 里面的内容都要放到 a 中。

RadiusButton

对于结构方面,非常的简单。使用一个名为“btn-group”的容器,把多个按钮放到这个容器中。如下所示:

每个按钮组在小屏幕上自动折叠,使得在任何大小的屏幕上看起来非常整洁。如果你学会使用以上所涵盖的Button使用方法,你就会体会到button的强大与便利。

图片 6.png)

接下来就添加一个无序列表,里面包含一个id,而且id的值和上面所说的“data-dropdown”的值是相等的。如下代码示例:

 图片 7

Button2

注意:这个对齐是相对于父容器的。

按钮工具栏可以理解为一组按钮组。编写一个div,然后添加class="button-bar",然后往div里面放置你想要多少的按钮组。但遇到更复杂的按钮布局时,这样做是很有帮助的。如下代码示例:

tabindex="-1"   

总结

有的时候我们的下拉菜单会向上弹起(接下来一个小节会介绍),这个时候我们的三角方向需要朝上显示,实现方法:需要在“.btn-group”类上追加“dropup”类名(这也是做向上弹起下拉菜单要用的类名)。

Button3

对于多个按钮,想让其中的一部分为一组,其中的另一个部分为另一组的话:

下拉按钮

实现原理主要是让容器的多个分组“btn-group”元素进行浮动,并且组与组之前保持5px的左外距。

Button1

 

Button2

  1. li 里面使用 a 将文字包裹

自适应导航(使用)

为下拉菜单按钮增加一个箭头符号:

图片 8.png)


图片 9

编辑:美高梅游戏网站 本文来源:改变图标的大小就是改变字体的,下拉菜单(基

关键词: