BootStrap入门教程 (三)

发布时间：2020-12-17 21:13:18 所属栏目：安全来源：网络整理

导读：?上讲回顾： Bootstrap的基础CSS(Base CSS)提供了优雅，一致的多种基础Html页面要素，包括排版 ,表格,表单,按钮等,能够满足前端工程师的基本要素需求。 ? ? ? Bootstrap作为完整的前端工具集，内建了大量的强大优雅可重用的组件,包括按钮( Button),导航(Na

?上讲回顾：Bootstrap的基础CSS(Base CSS)提供了优雅，一致的多种基础Html页面要素，包括排版,表格,表单,按钮等,能够满足前端工程师的基本要素需求。

? ? ? Bootstrap作为完整的前端工具集，内建了大量的强大优雅可重用的组件,包括按钮(Button),导航(Navigation),标签(Labels)，徽章(Badges)，排版(Typography)，缩略图(?thumbnails),提醒(Alert)，进度条(progress bar)，杂项(Miscellaneous)。本讲将深入讲解这些内容。

? ??1. 按钮(Button) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

? ? ? ?上讲最后提及到button的多种简单样式，然而在bootstrap中可以通过组合button，从而获得更多类似于工具条的功能，组件中的按钮可以组合成按钮组(button group)和按钮式下拉菜单(button drown menu).

(下一讲的Javascript Plugin会提及到更多的按钮的应用).

? ? ? 1.1?按钮组(button group)

? ? ? ? ?按钮组顾名思义是将多个按钮集合成一个页面部件。只需要使用btn-group类和一系列的<a>或者<button>标签，就可以轻易地生成一个按钮组或者按钮工具条。关于btn-group的编程实践上：

?建议在单一的按钮组中不要混合使用<a>和<button>标签，只用它们其中一个。
同一按钮组最好使用单一色
使用图标的时候要确保正确的引用位置

? ? ? ? 按钮组和按钮工具条都非常容易实现，如图3-1所示：

图3-1 按钮组(button group)

? ? ? ? 1.2?按钮式下拉菜单(button drown menu)

? ? ? ? ?Bootstrap允许使用任意的按钮标签来触发一个下拉菜单，只需要将正确的菜单内容并置于在.btn-group类标签内。如图3-2所示：

图3-2 按钮下拉菜单

? ? ? ? 以上两种按钮组件，代码片段如下：

View Code 
   
 
  
  <div class="span4 well pricehover">
                       h2>按钮组</>
      ="btn-group" style="margin: 9px 0;">
          button ="btn btn-large btn-primary">Leftbutton="btn btn-large  btn-primary">Middle="btn   btn-large btn-primary">Right>
        div>

        >
 >
>按钮工具条>
    ="btn-toolbar"="btn-group"="btn">1>2>3>4>5>6>7>8>

="span8 well pricehover">

      h3>按钮下拉菜单p></="btn-toolbar" ="btn dropdown-toggle" data-toggle="dropdown">Action span ="caret"spanul ="dropdown-menu">
            li><a href="#">Actiona>Another action>Something else hereli ="divider">Separated linkul><!-- /btn-group -->
        ="btn btn-primary dropdown-toggle"="btn btn-danger dropdown-toggle">Danger -->
      ="btn btn-warning dropdown-toggle">Warning ="btn btn-success dropdown-toggle">Success ="btn btn-info dropdown-toggle">Info ="btn btn-inverse dropdown-toggle">Inverse  /btn-toolbar -->
     
   
 
  

? ?同时bootstrap还有分隔符的下拉菜单和上拉菜单按钮，可以参考文档。

??? ? 2.导航(Navigation) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

? ? ?2.1 轻量导航(Nav,tabs,and pills)?

? ? ? ? ?bootstrap的导航非常多样和灵活，允许使用同样的标签，不同的CSS类，带来不同风格的导航条，具有非常高的可定制性。所有的导航组件，包括tabs,pills,lists标签，都必须使用.nav的类实现基础的导航标签。除了我们常见的导航，还可以利用.nav-stacked类来实现堆叠式(stacked)--竖式的导航条。

? ? ? ? ? 如图3-3所示，展示了多种基础风格的导航。

? 图3-3 多种基础风格导航

? ? ? ? 代码片段如下：

View Code

复制代码

="row">

     
        ="span5 well pricehover">基础tabs="nav nav-tabs"="active">Home>Profile>Messages>
  >基础pills="nav nav-pills">
    
      >
       


      >竖排tabs="nav nav-tabs nav-stacked">
        
      
              >竖排pills="nav nav-pills nav-stacked">

? ? ? ?下拉菜单的导航条和列表式(Nav list)的导航条都是页面常用要素，Nav list 类似于OSX的Finder，可以带有图标。它们同样可以用.nav 作为基础类，来实现这些组件。同时还有各种tab风格的导航条，在下讲再补充。如图3-4所示：

图3-4 列表与下拉导航

? ? ? ? ? 代码依然简单，片段如下：

View Code

>基础Nav List="nav nav-list"="nav-header">List header>Library>Applications>Another list header>Settings>Help> >图标List> i ="icon-white icon-home"i> Home="icon-book"> Library="icon-pencil"> Applications="icon-user"> Profile="icon-cog"> Settings="icon-flag"> Help> >pills式的下拉菜单="dropdown-toggle"="dropdown" href>Dropdown b b>tab式的下拉菜单> ? ?

? ?2.2 导航条(Navbar)

? ? ? ? ??最最重要的页面要素，莫过于页面头部的导航条，这是几乎任何页面都会使用到的。Bootstrap提供的基础样式的导航条，是目前互联网的流行的“硬又黑”，当然你可以用Less来定制它。我们要注意到导航条的基础类不再是.nav而是navbar。

，至于顶部或者底部，用navbar-fixed-top与navbar-fixed-bottom来置顶/底.同时可以在navbar中使用form要素，比如.navbar-form。同时支持响应式操作，通过.nav-collapse或者直接是.collapse类实现。如图3-5所示：

图3-5 导航条

? ? ? ? ? ? 代码片段如下：

View Code

复制代码

   ="span10 well pricehover"="navbar"="navbar-inner"="container"="btn btn-navbar"="collapse" data-target=".nav-collapse"="icon-bar"="brand">Project name="nav-collapse"="nav">Link>
              ="#" class>
                >Nav header>One more separated linkform ="navbar-search pull-left" action=""input type="text"="search-query span2" placeholder="Search"form="nav pull-right"="divider-vertical" /.nav-collapse  /navbar-inner -->
   /navbar  ? 
 ? ? 2.3?面包屑导航(Breadcrumbs)与页码(Pagination) 

?面包屑导航(BreadCrumbs)导航用作显示用户在网站或者App的位置，关于Breadcrumbs 面包屑导航的优点与对SEO的作用，请参考这个页面。Bootstrap的“面包”用在代码仓库式的页面很优雅，具体实现如图3-6所示： 

 
 
 图3-6 面包屑导航(BreadCrumbs) 
 ?? 
 ? ? 

页码(Pagination)也是非常常用的页面要素，Bootstrap提供两种风格的翻页组件。?一个是多页面导航，用于多个页码的跳转，它具有极简主义风格的翻页提示，能够很好应用在结果搜索页面；另一种则是Pager，是轻量级组件，可以快速翻动上下页，适用于个人博客或者杂志。如图3-7所示： 
  图3-7 页码(Pagination)
  

 ? ? ? ? 以上两种导航，代码片段如下： 
 
 
View Code 
  
   
    
   
          ="breadcrumb"> >/>Data="pagination"="disabled">&laquo;&raquo;>10>11>12>...>20="pagination pagination-centered">

     
 >
      
="pager">Previous>Next="previous"&larr; Older="next">Newer &rarr; ? 
 ? ? ?3.标签(Label)、徽章(Badges)、排版(Typographic)与缩略图(Thumbnails) ? ? ? ? ? ? ? ? ? ? ? ? ?
 
 ? ? ? 3.1 标签(Label)与徽章(Badges) 
 ? ? ? 标签是一个很好用的页面小要素，bootstrap具有多种颜色标签，表达不同的页面信息。只需要简单使用label标签即可。徽章是细小而简单的组件，用于指示或者计算某种类别的要素，在在email客户端很常见，实际上在一些签到式的网站(LBS)上也常常用到。如图3-8所示： 
 
 
 图3-8?标签(Label)与徽章(Badges) 
 
 
View Code 
  
   
    
   
      table ="table table-bordered table-striped"theadtrth>Labels>Markuptbodytd="label">Defaultcode&lt;span class="label"&gt;Default&lt;/span&gt;="label label-success">Success&lt;span class="label label-success"&gt;Success="label label-warning">Warning&lt;span class="label label-warning"&gt;Warning="label label-important">Important&lt;span class="label label-important"&gt;Important="label label-info">Info&lt;span class="label label-info"&gt;Info="label label-inverse">Inverse&lt;span class="label label-inverse"&gt;Inversetable>Name>Example
              Default
            ="badge"&lt;span class="badge"&gt;1
              Success
            ="badge badge-success"&lt;span class="badge badge-success"&gt;2
              Warning
            ="badge badge-warning"&lt;span class="badge badge-warning"&gt;4
              Important
            ="badge badge-important"&lt;span class="badge badge-important"&gt;6
              Info
            ="badge badge-info"&lt;span class="badge badge-info"&gt;8
              Inverse
            ="badge badge-inverse"&lt;span class="badge badge-inverse"&gt;10 ? ?? 
 ? ? ? 3.2?排版(Typographic) 
 ? ? ? ?我们在第一讲就提及到排版(Typographic)，这里主要是涉及到两个排版组件:Hero-unit,Page-header.Hero-unit是一个轻量级的可扩展的组件，主要用于市场推广网站显示它们大量的要素。而Page-header则是简单为页面段落的头部设置一个合适的空间和排版形式。如图3-9所示： 
 
 
 图3-9?排版(Typographic) 
 ? ? ? 代码片段如下： 
 
 
View Code 
  
   
   ="container-fliud">

   

      

      ="row-fliud"="span5 pricehover hero-unit">
    
        h1>Hello,world!>简单的hero unit.>
       
      ="span5well pricehover"="page-header">  page header 例子   small>Subtext for header>    
      
      半小时左右，每25分钟集中精力工作，然后休息5分钟。哪怕工作没有
      完成，也要定时休息，然后再进入下一个番茄时间。 
　　
       ? ? ? 
 ? ? 3.3 缩略图(Thumbnails) 
 ? ? ? ?缩略图，可以作为图片，视频，文字的格网结构展示。实现默认形式的bootstrap缩略图，只需要简单的thumbnails标签。Thumbnails多应用于图片、视屏的搜索结果等页面，还可以链接到其他页面。同样的它具有很好的可定制性，可以将文章片段，按钮等标签融入缩略图，同时可以混合与匹配不同大小的缩略图。如图3-10,3-11所示： 
 
 
 图3-10 缩略图1(thumbnails) 
 ? ? ? ? ? 
 
 
 ?图3-11 缩略图2(thumbnails) 
 ? ? ? ? ? 代码片段如下： 
 
 
View Code 
  
   
   ="span6">环绕式缩略图="thumbnails"="span4"="thumbnail"img src="http://placehold.it/360x268" alt="span2"="http://placehold.it/160x120"="span6 ">默认缩略图="span3"="http://placehold.it/260x180">
      
      >可定制>
   ="caption"h5>Thumbnail label>Cras justo odio,dapibus ac facilisis in,egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.="btn btn-primary">
         
   
    ? ? ??4.提醒区域(Alerts),进度条(Progressing Bar)，杂项(Miscellaneous) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
 
 ? ? ? ? 4.1提醒区域(Alerts) 
 ? ? ? ? ? ?在Bootstrap 2中重写了提醒区域的基础类，使用.alert简化了原有的.alert-message 类。为了使得组件更为简洁与耐用，Bootstrap去除了不同的alert block的外观，内容具有更多padding边距和可以显示更多文字。如图3-12所示： 
 
 
 图3-12 ?提醒区域(Alert) 
 ? ? ? ? ? ?代码片段如下： 
 
 
View Code 
  
   
   ="span3 well pricehover">
                        >alert例子="alert"="button"="close" data-dismiss&times;strong>测试这是alert info提醒区域.
        >
 

="alert alert-error"这是alert error提醒区域.
        ="alert alert-success"这是alert success提醒区域.
         
   
  
 
 ? ? ?4.2 进度条(Processing Bar) 
 ? ? ? ? 进度条，这也是不可缺少的页面要素，在重定向，载入等页面都经常用到，Bootstrap提供多种漂亮、简单、多种颜色的进度条。不过其中条纹和动画效果的进度条不支持IE浏览器，原因是进度条使用了CSS3的渐变(gradients)、透明度(transitions)、动画效果(animations)来实现它们的效果。IE7-9和旧版的Firefox都不支持这些特性，所以在实现进度条的时候请注意浏览器支持程度。如图3-13所示， 
 
 
 图3-13 进度条(Processing Bar) 
 
 
View Code 
  
   
   >
                     >基础>默认的进度条 ="progress"="bar"="width: 60%;">
       >动画效果>带有条纹的动画效果进度条 (no IE).="progress progress-striped active"="width: 45%">
         >Striped>使用透明度来生成条纹效果 (no IE).="progress progress-striped"="width: 20%;">


         ? ? ? ?? 
 ? ? ? ?4.3 杂项(Miscellaneous)
 
 ? ? ? ? ? ? ? Bootstrap的杂项包括两个轻量级的组件，一个是well，用于表达插入效果。另一个是关闭图标，可以用于提醒区域，模式窗口(Modal)的关闭。Modal将会在下讲的javascript pluging中讲解到。如图3-14所示： 
 
 
 图3-14?杂项(Miscellaneous) 
 ? ? ? ? ?代码如下： 
 
 
View Code 
  
   
   ="span4  pricehover">
                      >Wells>使用Well来显示插入效果="well"
        看！我是Well！
      >关闭图标>用于提醒区域，模式窗口(Modal)的关闭.="float: none;" ?参考文献与延伸阅读： 
 ? ? ? ? ? 1.CSS3 Tutorials?http://www.w3schools.com/css3/default.asp
        
            
        	


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!