澳门新葡8455最新网站:在Bootstrap中仍是可以透过选择标签&lt,为下拉菜单开关扩张一个箭头符号

澳门新葡8455最新网站 8

清除插件

下拉菜单

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

按钮的向下向上三角形

8.4模态弹出框–为弹出框增加过度动画效果
可通过给“.modal”增加类名“fade”为模态弹出框增加一个过渡动画效果。

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

导航条

  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>

运行效果如下:

? next:让“下一步”按钮居右

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

分页

对一个数量比较多的列表内容,我们需要使用分页功能来显示一部分内容,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>

现在我们来分析一下实现原理,非常简单,通过js技术手段,给父容器“div.dropdown”添加或移除类名“open”来控制下拉菜单显示或隐藏。也就是说,默认情况,“div.dropdown”没有类名“open”,当用户第一次点击时,“div.dropdown”会添加类名“open”;当用户再次点击时,“div.dropdown”容器中的类名“open”又会被移除。

6.2带表单的导航条
在navbar容器中放置一个带有navbar-form类名的表单

DropdownButton

图文编排

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

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

使用的时候,只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”,并且和普通的按钮放在同一级。如下所示:

7、去点无序列表
bootstrap为众多开发者考虑的非常周道,通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。

Thisisalink

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

澳门新葡8455最新网站 1

5.17导航加下拉菜单(二级导航)
只需要将li当作父容器,使用类名“dropdown”,同时在li中嵌套另一个列表ul

Button2

列表组

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

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

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

  • 澳门新葡8455最新网站,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>

 

? panel-success:成功绿

Thisisalink

输入框

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

澳门新葡8455最新网站 2.png)

3.12表单控件状态(验证状态)
在制作表单时,不免要做表单验证。同样也需要提供验证状态样式,在Bootstrap框架中同样提供这几种效果。
1、.has-warning:警告状态(黄色)
2、.has-error:错误状态(红色)
3、.has-success:成功状态(绿色)
使用的时候只需要在form-group容器上对应添加状态类名
如果你想让表单在对应的状态下显示 icon
出来,只需要在对应的状态下添加类名“has-feedback”。请注意,此类名要与“has-error”、“has-warning”和“has-success”在一起:
注意:只有在远程引用css文件时icon图标才会有用

RadiusButton

路径导航

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

示例代码如下:

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

等分按钮的效果在移动端上特别的实用。整个按钮组宽度是容器的100%,而按钮组里面的每个按钮平分整个容器宽度。例如,如果你按钮组里面有五个按钮,那么每个按钮是20%的宽度,如果有四个按钮,那么每个按钮是25%宽度,以此类推。

5.16自适应导航(使用)
只不过在制作自适应导航时更换了另一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。

分隔按钮

缩略图

图片配上文字的首选,只需要给父级添加一个 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>

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

? label-success:成功标签,绿色

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

Bootstrap

<div ></div>

7.11媒体对象–媒体对象的嵌套
只需要将另一个媒体对象结构放置在媒体对象的主体内“media-body”

SuccessButton

字体图标

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

示例代码如下:

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

  </div>

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

 

3.10表单控件状态(焦点状态)
焦点状态是通过伪类“:focus”来实现
要让控件在焦点状态下有样式效果,需要给控件添加类名“form-control”

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

导航

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>  

按钮(按钮组)

第四章 网格系统
1、数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。
2、在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12
3、具体内容应当放置在列容器(column)之内,而且只有列(column)才可以作为行容器(.row)的直接子元素

LargeButton

巨幕

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

示例代码如下:

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

 

? 自动定位浮标Affix:对应的插件文件“affix.js”

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

进度条

可以用来显示一个事件的进度,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>

 澳门新葡8455最新网站 3

3.5表单控件(下拉选择框select)
Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple。

DefaultButton

面板

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

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

澳门新葡8455最新网站 4.png)

第六章 导航条
6.1基础导航条
第一步:首先在制作导航的列表(<ul
class=”nav”>)基础上添加类名“navbar-nav”
第二步:在列表外部添加一个容器(div),并且使用类名“navbar”和“navbar-default”

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

标记

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

示例代码如下:

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

当用户再次点击时,下拉菜单将继续隐藏,如下所示:

6、Bootstrap通过定义四个类名来控制文本的对齐风格:
.text-left: 左对齐
.text-center: 居中对齐
.text-right: 右对齐
.text-justify:两端对齐

RoundButton

警告框

有时候用户在填写表单信息时,我们可以在输入框下面填上一些信息,并带有关闭的小按钮,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>

运行效果如下所示:

5.8按钮(按钮工具栏)
你只需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中

按钮组

澳门新葡8455最新网站 5

在使用Bootstrap框架中的下拉菜单组件时,其结构运用的正确与否非常的重要,如果结构和类名未使用正确,直接影响组件是否能正常运用。我们来简单的看看:

? 图片轮播Carousel:对应的插件文件“carousel.js”

Yetanother

按钮组

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

 

6.5反色导航条
使用方法并无区别,只是将navbar-deafult类名换成navbar-inverse。

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

澳门新葡8455最新网站 6

3.14基本按钮
Bootstrap框架V3.x版本的基本按钮和V2.x版本的基本按钮一样,都是通过类名“btn”来实现。
可以通过input a span 等标签实现

SecondaryButton

 

6.3固定导航条
Bootstrap框架提供了两种固定导航条的方式:

Thisisanother

注意:这个 .divider 的 li 因为是空的,所以可以不需要包裹<a>

3、要确保关闭按钮元素上设置了自定义属性:“data-dismiss=”alert””(因为可关闭警示框需要借助于Javascript来检测该属性,从而控制警示框的关闭)。

Button1

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

? 警告框(Alert):对应的插件文件“alert.js”

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

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

3.6表单控件(复选框checkbox和单选择按钮radio)
.checkbox .radio

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

 

第七章:其它内置组件
7.1缩略图(一)
Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。
在仅有缩略图的基础上,添加了一个div名为“caption“的容器,在这个容器中放置其他内容,比如说标题,文本描述,按钮等:

Yetanother

下拉菜单(下拉分割线)

?
媒体对像的对象:常使用“media-object”表示,就是媒体对象中的对象,常常是图片

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

导航基础样式

? .navbar-fixed-top:导航条固定在浏览器窗口顶部

Button2

这里有一个媒体查询条件:“@media
(min-width:768px){…}”表示自适应导航仅在浏览器视窗宽度大于768px才能按上图风格显示。当你的浏览器视窗宽度小于768px的时候,将会按下图的风格展示:

3.2水平表单
在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件:
1、在<form>元素是使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。

AlertButton

在实际运用当中,除了水平导航之外,还有垂直导航,就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可:

2、当某一段落需要突出显示时可添加lead类,其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理
class=”lead”

Button3

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

7.12媒体对象–媒体对象列表
Bootstrap框架提供了一个列表展示的效果,在写结构的时候可以使用ul,并且在ul上添加类名“media-list”,而在li上使用“media”

Button1

tabindex="-1"   

3.21块状按钮
Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满整个容器,并且这个按钮不会有任何的padding和margin值。

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

澳门新葡8455最新网站 7

1、当主标题下需要副标题时可在h中嵌套small
<h1>nihao<small>a</samll></h1>

总结

 

? label-warning:警告标签,橙色

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

按钮(嵌套分组)

4、斜体类似于加粗一样,除了可以给元素设置样式font-style值为italic实现之外,在Bootstrap中还可以通过使用标签<em>或<i>来实现。

Button3

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

7.7进度条–条纹进度条
使用Bootstrap框架中的条纹进度条只需要在进度条的容器“progress”基础上增加类名“progress-striped”

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

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

3.24图像
1、img-responsive:响应式图片,主要针对于响应式设计
2、img-rounded:圆角图片
3、img-circle:圆形图片
4、img-thumbnail:缩略图片

DropdownButton

<ul >

<button class=”navbar-toggle” type=”button”
data-toggle=”collapse”>
<span class=”sr-only”>Toggle Navigation</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
3、并为button添加data-target=”.类名/#id名”

Button1

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

? 按钮(Buttons):对应的插件文件“button.js”

Button2

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

10、Bootstrap为表格不同的样式风格提供了不同的类名,主要包括:
.table:基础表格
给表格设置了margin-bottom:20px以及设置单元内距
在thead底部设置了一个2px的浅灰实线
每个单元格顶部设置了一个1px的浅灰实线
.table-striped:斑马线表格
<table class=”table table-striped”>
.table-bordered:带边框的表格
<table class=”table table-bordered”>
.table-hover:鼠标悬停高亮的表格
<table class=”table table-hover”>
.table-condensed:紧凑型表格
<table class=”table table-condensed”>
.table-responsive:响应式表格
<table class=”table table-bordered”>

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

 

7.16列表组–列表项的状态设置
? active:表示当前状态
? disabled:表示禁用状态

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

澳门新葡8455最新网站 8

7.6进度条–彩色进度条
? progress-bar-info:表示信息进度条,进度条颜色为蓝色

Button3

 

3.9表单控件大小
1、input-sm:让控件比正常大小更小
2、input-lg:让控件比正常大小更大

相关文章

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图