图片 12

Foundation之按钮和下拉功能-Web前端之家

上一章大家上学了网页顶上部分导航的定制作用,那节我们要介绍Foundation一层层牢固的、风格一模二样的开关,並且是非常轻松选拔的。增添五个class”button”在放肆多少个锚点、输入框
也许开关成分,则使得该因素转变为Foundation样式的开关,那获得的也只是正规的、默许的开关,然则你却得以利用不相同体制与项目标开关。如下示例图:

图片 1

下拉菜单(基本用法)

DefaultButton

Bootstrap

特意评释:因为Bootstrap的机件交互作用效率都以正视于jQuery库写的插件,所以在动用bootstrap.min.js在此以前必定要先加载jquery.min.js才会生效果

TinyButton

留意上边包车型大巴组件,比比较多是内需用到 js 的,所以要引进 Bootstrap 的 js
文件和
jquery 文件在演示代码中,小编只是未有写,注意加上哦。

<div >  <button  type="button" id="dropdownMenu1" data-toggle="dropdown">  下拉菜单    </button>  <ul  role="menu" aria-labelledby="dropdownMenu1">     <li role="presentation"><a role="menuitem" tabindex="-1"  >下拉菜单项</a></li>     …     <li role="presentation" ></li>     <li role="presentation"><a role="menuitem" tabindex="-1"  >下拉菜单项</a></li>  </ul>  </div>  

SmallButton

字体Logo

Bootstrap
中还蕴藏无偿的Logo供我们应用,那个Logo使用起来比极粗略,就好像使用字体同样,改正Logo的大大小小就是改换字体的
font-size,改动Logo的颜色就是改动字体的颜色
color。有了那几个Logo,再也不用切图啦。其它还也许有第三方的Logo大家能够使用,比方说
Font
Awesome
,也是这种字体Logo。在Bootstrap的下载包中,记得引进fonts文件,那样Logo才具呈现出来。

演示代码如下:

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

  </div>

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

注意:

LargeButton

按钮组

  • 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>
  • 按键组Logo
    按键组中得以增进图标,举例说层见迭出的下拉开关Logo,,同期加上的点子也是有两样,下边依旧交给了三种差别的标签加多,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>

为下拉菜单按键扩充三个箭头符号:

SecondaryButton

下拉菜单

用 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>

图片 2.png)

SuccessButton

输入框

  • 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>

 图片 3

AlertButton

导航

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

示范代码如下:

  • Foundation之按钮和下拉功能-Web前端之家。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>  
tabindex="-1"   

RadiusButton

导航条

  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>

html中的tabIndex属性能够设置键盘中的TAB键在控件中的移动顺序,即主旨的逐条。将tabIndex赋值为-1,则在行使[Tab]键时,此成分被忽略。

RoundButton

路子导航

在可比复杂点页面中,偶尔候大家须要让顾客明白本人所处的岗位,我们就足以采用路线导航组件,使用起来也很简单的。

演示代码如下:

<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>

 

DisabledButton

分页

对一个数量比较多的列表内容,大家要求利用分页成效来显示一部分剧情,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>

使用办法:

地点的代码示例演示了按键的有所预设大小、样式和情景。每三个小示例都提供刚劲的眼观四路;那个预设都以能够被定制样式来重写,那就意味着你不要重头初阶编写制定你的按键。

标记

一时候想显示音讯的数据,就如QQ或然Wechat那样,大家得以实用标识类加在 span
标签上。

演示代码如下:

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

在运用Bootstrap框架中的下拉菜单组件时,其布局接收的不错与否特其他重要,假若协会和类名未选拔正确,间接影响组件是不是能健康使用。大家来轻便的探视:

在开关中动用相关联的class来赢得差异的样式,比方,在编排“button”的时候,就足以增加大小样式——“small”,颜色样式——
“success”和圆角样式——“round”。同期,你还能增多“disabled”来是按键处于不可按意况,样式效果就跟该class的
词义是一律的。

巨幕

巨幕能够用在全屏彰显只怕铺满全部页面,还以用在页头,挺实用的类

演示代码如下:

<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>

1、使用多少个名称叫“dropdown”的器皿包裹了总体下拉菜单成分,示例中为:

按钮组

缩略图

图表配上文字的首荐,只供给给父级增多二个 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>

<div ></div>

兑现这几个骨干开关是大致的,落成按键组也便是如此。一个简易的开关组的布局如下:

警告框

神迹客商在填写表单新闻时,大家能够在输入框下边填上一些音讯,并富含关闭的小按键,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>

2、使用了二个<button>按键做为父菜单,何况定义类名“dropdown-toggle”和自定义“data-toggle”属性,且值必需和最外容器类名一致,此示例为:

Button1

进度条

能够用来展现贰个风浪的进程,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>

data-toggle="dropdown"

Button2

图文编排

图文编排也是网页上时时应用的构件,比如在留言恐怕商量区域,或许文字表达,当然须求结合别的样式使用,才干是图像和文字搭配的更赏心悦目。

  • 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>

对 <button> 扩张类 .btn .btn-default会越来越赏心悦目一些,其它尽量表明type=”button”。

Button3

列表组

能够用来作为侧栏导航或然消息列表的彰显。

  • 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>

 

代码达成了一组正式的按键,你还足以加上“radius”来博取圆角,增加能够调节宽度的class“even-2”、“even-3”向来到
“even-8”。里面的数字代表开关的分寸,最棒是应用按键组中的按键个数。比方,借使您要创设4个按键,那么最棒使用“even-4”。

面板

有标题和内容的一对即可用面板来做。

  • 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学习文书档案(四)

3、下拉菜单项使用二个ul列表,何况定义三个类名称叫“dropdown-menu”,此示例为:

开关工具栏

<ul >

开关工具栏能够领略为一组开关组。编写三个div,然后加多class=”button-bar”,然后往div里面放置你想要多少的按钮组。但碰着更目眩神摇的按键构造时,这样做是很有帮带的。如下代码示例:

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

Button1

 

Button2

下拉菜单(原理分析)

Button3

Bootstrap框架中的下拉菜单组件,其下拉菜单项默许是隐身的,如下所示:

Button1

图片 4

Button2

图片 5.png)

Button3

因为“dropdown-menu”暗中同意样式设置了“display:none”

各样按键组在小显示屏上自行折叠,使得在其余大小的荧屏上看起来特别干净。如若您学会运用上述所包含的Button使用方法,你就可以心获得button的强硬与低价。

当客户点击父菜单项时,下拉菜单将会被出示出来,如下所示:

下拉开关

图片 6.png)

在新式的Foundation版本中,增添了叁个新的JavaScript插件叫dropdowns,这几个插件放置在顶上部分按键是那多少个平价的。当您接受它的时候,须要在button标签中增添class”dropdown”和三个自定义属性名叫”data-dropdown”。

 图片 7

接下去就增加三个冬辰列表,里面包括一个id,何况id的值和方面所说的“data-dropdown”的值是非常的。如下代码示例:

当顾客再度点击时,下拉菜单将持续掩瞒,如下所示:

DropdownButton

图片 8

Thisisalink

图片 9.png)

Thisisanother

规律剖析:

Yetanother

今天大家来分析一下降实原理,特别轻巧,通过js技能手腕,给父容器“div.dropdown”增添或移除类名“open”来调整下拉菜单展现或潜伏。也正是说,私下认可景况,“div.dropdown”未有类名“open”,当客户率先次点击时,“div.dropdown”会增多类名“open”;当客户再一次点击时,“div.dropdown”容器中的类名“open”又会被移除。

瞩目到地方代码,“f-dropdown”是那么些重大的,不要漏掉了。

 

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

下拉菜单(下拉汾水陵)

相隔离关

在Bootstrap框架中的下拉菜单还提供了下拉分隔线,若是下拉菜单有八个组,那么组与组之间能够由此丰硕三个空的<li>,并且给这几个<li>增添类名“divider”来落到实处增进下拉分隔线的意义。

值得您去学学最后的利落构造是在按键里增多三个相隔离关来提供接纳。分隔开关可以用来提示能够下拉、下载等你想要的成效。使用也很简单,只需在上边代码例子中增加class“split”,如下代码示例:

图片 10

DropdownButton

图片 11.png)

Thisisalink

留意:那个 .divider 的 li 因为是空的,所以能够无需包裹<a>

Thisisanother

 

Yetanother

下拉菜单(菜单标题)

dropdown js是二个简便的插件,但唯有四个抉择来激活它:设置钦赐的class:

上一小节讲明通过抬高“divider”能够将下拉菜单分组,为了让这一个分组更醒目,还足以给每一种组增添二个尾部(标题)。

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

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

免除插件

图片 12

撤废是一个异常的快、轻量级插件。当orbit滑动不起功用时,使用那么些插件是很简短的且使得的。

图片 13.png)

到近年来结束,你应该对Foundation的列表布局运作格局比较熟识了,同临时候也是以此插件的主干。制造三个冬天列表,在ul标签中增多class”clearing-thumbs”和多个空值的自定义属性为“data-clearing”,接着在每一种li里增多内容。

专心:这些 li 里面未有包装<a>,经过试验发掘,唯有愿意鼠标放到那么些li 下面时其背景产生退换才会在丰富 li 中进入<a>

借使您在首先个li标签中增添class”clearing-feature”,那么首先张图片就当做暗中认可图片。消亡也选择了前边作品所介绍的初读书人学习foundation:网格系统,使得全数的缩略图搞一致,何况均匀布满。

 

总结

下拉菜单(对齐方式)

好吧,今天就学到这里了,比较累了,选择几首好听的歌曲听听吧,今日大家成功按键和下拉坚决守住学习,接下去将学习定制的表单和切换了,努力吗!

Bootstrap框架中下拉菜单私下认可是左对齐,假若你想让下拉菜单相对于父容器右对齐时,能够在“dropdown-menu”上增多三个“pull-right”或许“dropdown-menu-right”类名。

注意:那么些对齐是周旋于父容器的。

 

下拉菜单(菜单项状态)

下拉菜单项的默许的状态有浮动状态(:hover)和要害状态(:focus),那三个意况都无须特意去设置。