Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

时间 2019-11-08

标签 bootstrap 框架基础按钮网格导航下拉菜单栏目 Bootstarp 繁體版

原文原文链接

一,按钮css

注意：虽然在Bootstrap框架中使用任何标签元素均可以实现按钮风格，但我的并不建议这样使用，为了不浏览器兼容性问题，我的强烈建议使用button或a标签来制做按钮。html

框架中提供了基础按钮的例子:jquery

<button class="btn" type="button">基础按钮.btn</button>
<button class="btn btn-default" type="button">默认按钮.btn-default</button>
<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
<button class="btn btn-success" type="button">成功按钮.btn-success</button>
<button class="btn btn-info" type="button">信息按钮.btn-info</button>
<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
<button class="btn btn-link" type="button">连接按钮.btn-link</button>

不过这里说一下这个button这个标签为啥还要加个type="button"我我的理解是就像input标签同样任何标签均可成为按钮,换言之就是只要你加了样式以后不少控件也能够挂羊头卖狗肉 ,因此这里指明一下type是button 固然这也只是我我的的一个想法,不少人认为这是一个小BUG,确实我也不否定.bootstrap

另外按钮的大小也有相应的定义浏览器

从上表中不难发现，在Bootstrap框架中控制按钮的大小都是经过修改按钮的padding、line-height、font-size和border-radius几个属性。框架

按钮的焦点状态也有这么几种 ,基本和input框响应效果同样一样是加了伪类":focus"Bootstrap按钮的活动状态主要包括按钮的悬浮状态(:hover)，点击状态(:active)和焦点状态（:focus）几种。编辑器

1.1图像部分这点没有特地拿出来单作一个标题内容不是特别多ide

图像在网页制做中也是常要用到的元素，在Bootstrap框架中对于图像的样式风格提供如下几种风格：字体

一、img-responsive：响应式图片，主要针对于响应式设计
二、img-rounded：圆角图片
三、img-circle：圆形图片
四、img-thumbnail：缩略图片网站

<img  alt="140x140" src="http://placehold.it/140x140">
<img  class="img-rounded" alt="140x140" src="http://placehold.it/140x140">
<img  class="img-circle" alt="140x140" src="http://placehold.it/140x140">
<img  class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140">
<img  class="img-responsive" alt="140x140" src="http://placehold.it/140x140">

因为样式没有对图片作大小上的样式限制，因此在实际使用的时候，须要经过其余的方式来处理图片大小。好比说控制图片容器大小。（注意不能够经过css样式直接修改img图片的大小，这样操做就不响应了）

图标问题:这里说的图标就是Web制做中常看到的小icon图标，能够说这些小icon图标是一个优秀Web中不可缺乏的一部分，起到画龙点睛的效果。在Bootstrap框架中也为你们提供了近200个不一样的icon图片，而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。

二.网状表格

这里引用慕课网上的对于网状表格的工做原理定义:

一、数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。如：

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

二、在行(.row)中能够添加列(.column)，但列数之和不能超过平分的总列数，好比12。如：

<div class="container">
<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-8"></div>

三、具体内容应当放置在列容器（column）以内，并且只有列（column）才能够做为行容器(.row)的直接子元素

总结:经过设置内距（padding）从而建立列与列之间的间距。而后经过为第一列和最后一列设置负值的外距（margin）来抵消内距(padding)的影响

经过为“列（column）”设置 padding 属性，从而建立列与列之间的间隔（gutter）。经过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

列偏移:有的时候，咱们不但愿相邻的两个列紧靠在一块儿，但又不想使用margin或者其余的技术手段来。这个时候就可使用列偏移（offset）功能来实现。使用列偏移也很是简单，只须要在列元素上添加类名“col-md-offset-*”(其中星号表明要偏移的列组合数)，那么具备这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度。

列排序:列排序其实就是改变列的方向，就是改变左右浮动，而且设置浮动的距离。在Bootstrap框架的网格系统中是经过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号表明移动的列组合数)。

列嵌套:Bootstrap框架的网格系统还支持列的嵌套。你能够在一个列中添加一个或者多个行（row）容器，而后在这个行容器中插入列（像前面介绍的同样使用列）。但在列容器中的行容器（row），宽度为100%时，就是当前外部列的宽度。来看一个简单示例：

<div class="container">
    <div class="row">
        <div class="col-md-8">
        个人里面嵌套了一个网格
            <div class="row">
            <div class="col-md-6">col-md-6</div>
            <div class="col-md-6">col-md-6</div>
          </div>
        </div>
    <div class="col-md-4">col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
    <div class="col-md-8">
    个人里面嵌套了一个网格
        <div class="row">
          <div class="col-md-4">col-md-4</div>
          <div class="col-md-4">col-md-4</div>
          <div class="col-md-4">col-md-4</div>
        </div>
    </div>
    </div>
</div>

三.下拉菜单

下拉菜单是一个独立的组件必须引用Jquery 和Bootstrap.JS才能用或者直接引用框架里面的dropdown.js也是能够的,下面简单的介绍一下,其实整体上没啥特别变化可是有几点须要注意一下

在使用Bootstrap框架中的下拉菜单组件时，其结构运用的正确与否很是的重要，若是结构和类名未使用正确，直接影响组件是否能正常运用。咱们来简单的看看：

一、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为:

<div class="dropdown"></div>

二、使用了一个<button>按钮作为父菜单，而且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，此示例为:

data-toggle="dropdown"

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

<ul class="dropdown-menu">

在Bootstrap框架中的下拉菜单还提供了下拉分隔线，假设下拉菜单有两个组，那么组与组之间能够经过添加一个空的<li>，而且给这个<li>添加类名“divider”来实现添加下拉分隔线的功能。

同理既然能够分割,那么分割出来每一部分都是有本身独立的头尾的:

<li role="presentation" class="dropdown-header">第一部分菜单头部</li>

Bootstrap框架中下拉菜单默认是左对齐，若是你想让下拉菜单相对于父容器右对齐时，能够在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名,二者效果相同.

并且下拉菜单也有本身的状态下拉菜单项的默认的状态（不用设置）有悬浮状态（:hover）和焦点状态（:focus）,下拉菜单项除了上面两种状态，还有当前状态（.active）和禁用状态（.disabled）。这两种状态使用方法只须要在对应的菜单项上添加对应的类名

按钮组:

一、默认全部按钮都有圆角

二、除第一个按钮和最后一个按钮（下拉按钮除外），其余的按钮都取消圆角效果

三、第一个按钮只留左上角和左下角是圆角

四、最后一个按钮只留右上角和右下角是圆角

若是有按钮组的话

你只须要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中

若是想让按钮组纵向排列:按钮组都是水平显示的。但在实际运用当中，总会碰到垂直显示的效果。在Bootstrap框架中也提供了这样的风格。咱们只须要把水平分组的“btn-group”类名换成“btn-group-vertical”

还有移动端经常使用的等分按钮组:

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

等分按钮也常被称为是自适应分组按钮，其实现方法也很是的简单，只须要在按钮组“btn-group”上追加一个“btn-group-justified”类名

按钮下拉菜单:

按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是同样的。不一样的是在普通的下拉菜单的基础上封装了按钮（.btn）样式效果。简单点说就是点击一个按钮，会显示隐藏的下拉菜单。

按钮下拉菜单其实就是普通的下拉菜单，只不过把“<a>”标签元素换成了“<button>”标签元素。惟一不一样的是外部容器“div.dropdown”换成了“div.btn-group”。

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

下拉菜单里面的三角形:按钮的向下三角形，咱们是经过在<button>标签中添加一个“<span>”标签元素，而且命名为“caret”;

四.导航

标签形导航，也称为选项卡导航。特别是在不少内容分块显示的时，使用这种选项卡来分组十分适合。

标签形导航是经过“nav-tabs”样式来实现。在制做标签形导航时须要在原导航“nav”上追加此类名，如：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>标签形(tab)导航</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="nav nav-tabs">
    <li><a href="##">Home</a></li>
     <li><a href="##">CSS3</a></li>
     <li><a href="##">Sass</a></li>
     <li><a href="##">jQuery</a></li>
     <li><a href="##">Responsive</a></li>
</ul>
<br />
<ul class="nav nav-tabs">
    <li class="active"><a href="##">Home</a></li>
     <li><a href="##">CSS3</a></li>
     <li><a href="##">Sass</a></li>
     <li><a href="##">jQuery</a></li>
     <li><a href="##">Responsive</a></li>
</ul>
<br />
 <ul class="nav nav-tabs">
    <li class="active"><a href="##">Home</a></li>
     <li><a href="##">CSS3</a></li>
     <li><a href="##">Sass</a></li>
     <li><a href="##">jQuery</a></li>
     <li class="disabled"><a href="##">Responsive</a></li>
 </ul>
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>

其实上例的效果和咱们平时看到的选项卡效果并不一致。通常状况之下，选项卡教会有一个当前选中项。其实在Bootstrap框架也相应提供了。假设咱们想让“Home”项为当前选中项，只须要在其标签上添加类名“class="active"”便可.

还有一种胶囊形态的选中样式:胶囊形（pills）导航听起来有点别扭，由于其外形看起来有点像胶囊形状。但其更像咱们平时看到的大众形导航。当前项高亮显示，并带有圆角效果。其实现方法和“nav-tabs”相似，一样的结构，只须要把类名“nav-tabs”换成“nav-pills”

除了胶囊形态的还有一种垂直型的li:在实际运用当中，除了水平导航以外，还有垂直导航，就相似前面介绍的垂直排列按钮同样。制做垂直堆叠导航只须要在“nav-pills”的基础上添加一个“nav-stacked”类名便可

以前说到的相似于下拉菜单里面的分割线在导航栏同样可使用:你们是否还记得，在下拉菜单一节中，下拉菜单组与组之间有一个分隔线。其实在垂直堆叠导航也具备这样的效果，只须要添加在导航项之间添加“<li class=”nav-divider”></li>”便可

自适应导航(我的感受凡是跟自适应沾边的用处都不少):

自适应导航指的是导航占据容器所有宽度，并且菜单项能够像表格的单元格同样自适应宽度。自适应导航和前面使用“btn-group-justified”制做的自适应按钮组是同样的。只不过在制做自适应导航时更换了另外一个类名“nav-justified”。固然他须要和“nav-tabs”或者“nav-pills”配合在一块儿使用。

自适应,如字面意思本身适应屏幕取处理导航的宽度大小,不过在屏幕比较小的时候这个导航会从横向排列直接转为纵向排列:浏览器视窗宽度大于768px才能按横向排列。当你的浏览器视窗宽度小于768px的时候，将会按纵向排列

二级导航:

前面介绍的都是使用Bootstrap框架制做一级导航，但不少时候，在Web页面中是离不开二级导航的效果。那么在Bootstrap框架中制做二级导航就更容易了。只须要将li看成父容器，使用类名“dropdown”，同时在li中嵌套另外一个列表ul，使用前面介绍下拉菜单的方法就能够,父容器li 加 class="dropdown",同时别忘记 class="dropdown-toggle" data-toggle="dropdown" <span class="caret"></span>, 子容器ul 加class="dropdown-menu"

另外还有一种面包屑样式的导航:使用方式就很简单，为ol加入breadcrumb类

基础导航条:

在制做一个基础导航条时，主要分如下几步：

第一步：首先在制做导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”

第二步：在列表外部添加一个容器（div），而且使用类名“navbar”和“navbar-default”

示例查看右侧代码编辑（10-19行）。

“.navbar”样式的主要功能就是设置左右padding和圆角等效果，但他和颜色相关的样式没有进行任何的设置。

导航标题:

在Web页面制做中，经常在菜单前面都会有一个标题（文字字号比其它文字稍大一些），其实在Bootstrap框架也为你们作了这方面考虑，其经过“navbar-header”和“navbar-brand”来实现

表单能够嵌套在导航栏中嘛?固然能够:

在Bootstrap框架中提供了一个“navbar-form”，使用方法很简单，在navbar容器中放置一个带有navbar-form类名的表单，示例代码编辑器（29-34行）。

实现导航条表单的样式代码源码请查看bootstrap.css文件第3839行～第3904行，咱们也对60多行样式代码节选了出来放到右侧bootstrap.css文件中，有兴趣的同窗请查看。

在上面的示例中，你们看到了“navbar-left”让表单左浮动，更好实现对齐。在Bootstrap框架中，还提供了“navbar-right”样式，让元素在导航条靠右对齐

导航栏中的链接,按钮,文本:

Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form以外，还可使用其余元素。框架提供了三种其余样式：

一、导航条中的按钮navbar-btn

二、导航条中的文本navbar-text

三、导航条中的普通连接navbar-link

但这三种样式在框架中使用时受到必定的限制，须要和navbar-brand、navbar-nav配合起来使用。并且对数量也有必定的限制，通常状况在使用一到两个不会有问题，超过两个就会有问题。

响应式导航条:

这种导航条比较经常使用!!:

一、保证在窄屏时须要折叠的内容必须包裹在带一个div内，而且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。

二、保证在窄屏时要显示的图标样式（固定写法）：

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

三、并为button添加data-target=".类名/#id名"，究竞是类名仍是id名呢？由须要折叠的div来决定。如：

须要折叠的div代码段：

<div class="collapse navbar-collapse" id="example">
      <ul class="nav navbar-nav">
      …
      </ul>
</div>

窄屏时显示的图标代码段：

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example">
  ...
</button>

也能够这么写，须要折叠的div代码段：

<div class="collapse navbar-collapse example" >
      <ul class="nav navbar-nav">
      …
      </ul>
</div>

窄屏时要显示的图标：

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example">
  ...
</button>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>响应式导航条</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style type="text/css">
    body{padding:50px 0 0 0;}
</style>
</head>

<body>
<!--代码-->
<div class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
     　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
       <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
         <span class="sr-only">Toggle Navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
       <!-- 确保不管是宽屏仍是窄屏，navbar-brand都显示 -->
       <a href="##" class="navbar-brand">慕课网</a>
  </div>
  <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
  <div class="collapse navbar-collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav">
              <li class="active"><a href="##">网站首页</a></li>
              <li><a href="##">系列教程</a></li>
              <li><a href="##">名师介绍</a></li>
              <li><a href="##">成功案例</a></li>
              <li><a href="##">关于咱们</a></li>
         </ul>
  </div>
</div>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

</body>
</html>

黑色导航条:

用法与普通导航条同样只是样式稍做修改:反色导航条实际上是Bootstrap框架为你们提供的第二种风格的导航条，与默认的导航条相比，使用方法并没有区别，只是将navbar-deafult类名换成navbar-inverse(原做者竟然单拿出来作一章容我作一个无奈的表情)

分页导航:

Bootstrap框架除了提供带页码的分页导航以外还提供了翻页导航。这种分页导航经常在一些简单的网站上看到，好比说我的博客，杂志网站等。这种分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>分页导航</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
<!--代码-->
<ul class="pagination pagination-lg">
  <li><a href="#">&laquo;第一页</a></li>
  <li><a href="#">11</a></li>
  <li><a href="#">12</a></li>
  <li class="active"><a href="#">13</a></li>
  <li><a href="#">14</a></li>
  <li><a href="#">15</a></li>
  <li class="disabled"><a href="#">最后一页&raquo;</a></li>
</ul> 
  
<ul class="pagination pagination">
  <li><a href="#">&laquo;第一页</a></li>
  <li><a href="#">11</a></li>
  <li><a href="#">12</a></li>
  <li class="active"><a href="#">13</a></li>
  <li><a href="#">14</a></li>
  <li><a href="#">15</a></li>
  <li class="disabled"><a href="#">最后一页&raquo;</a></li>
</ul>   
<ul class="pagination pagination-sm">
  <li><a href="#">&laquo;第一页</a></li>
  <li><a href="#">11</a></li>
  <li><a href="#">12</a></li>
  <li class="active"><a href="#">13</a></li>
  <li><a href="#">14</a></li>
  <li><a href="#">15</a></li>
  <li class="disabled"><a href="#">最后一页&raquo;</a></li>
</ul>   

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

</body>
</html>

平时不少同窗喜欢用div>a和div>span结构来制做带页码的分页导航。不过，在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination方法.

分页导航之翻页分页导航:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>分页导航（翻页分页导航）</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
<!--代码-->
<ul class="pager">
  <li><a href="#">&laquo;上一页</a></li>
  <li><a href="#">下一页&raquo;</a></li>
</ul> 
<!--左右对齐-->
<ul class="pager">
  <li class="previous"><a href="#">&laquo;上一页</a></li>
  <li class="next"><a href="#">下一页&raquo;</a></li>
</ul> 
<!--禁止状态-->
<ul class="pager">
  <li class="disabled"><span>&laquo;上一页</span></li>
  <li><a href="#">下一页&raquo;</a></li>
</ul>  
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

</body>
</html>

五.进度条和乱七八糟部分

1.1缩略图

缩略图在网站中最经常使用的地方就是产品列表页面，一行显示几张图片，有的在图片底下（左侧或右侧）带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并经过“thumbnail”样式配合bootstrap的网格系统来实现。能够将产品列表页变得更好看。

Bootstrap框架中也是按这样的方式实现的，他提供了两个容器，外容器使用“progress”样式，子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式，而progress-bar用于限制进度条的进度。使用方法很是的简单：

<div class="progress">
       <div class="progress-bar" style="width:40%"></div>
</div>