二种常用的bootstrap成效。

—苏醒内容开首—

       
 笔者对此bootstrap定义与一种插件,他能够使我们的网页布局进一步的炫酷,尤其的干净和合理。他的长处不多说,缺点2个就够我们喉咙疼的,那正是亟需记一些漫漫英文名。

自作者为我们说三种常用的bootstrap的常用效率,希望您们用到的时候,能够来看下。

         <nav class=”navbar navbar-default navbar-fixed-top” role=”navigation”> 

  1.   <div class=”container-fluid”>  
  2.     <!– 荧屏小到自然的尺码时候导航栏发生的转变 –>  
  3.     <div class=”navbar-header”>  
  4.         <button class=”navbar-toggle collapsed” data-target=”#navigation-list” data-toggle=”collapse” type=”button”>  
  5.             <span class=”sr-only”>Toggle navigation</span>  
  6.             <span class=”icon-bar”></span>  
  7.             <span class=”icon-bar”></span>  
  8.             <span class=”icon-bar”></span>  
  9.         </button>  
  10.         <a class=”navbar-brand” href=”/”>Bootstrap Web</a>  
  11.     </div>  
  12.     <!– 不荒谬尺寸下的导航拦 –>  
  13.      <div class=”collapse navbar-collapse” id=”navigation-list”>  
  14.       <ul class=”nav navbar-nav”>  
  15.         <li class=”active”><a href=”#”>开始</a></li>  
  16.         <li><a href=”http://phalcon.framework.dev/Index/touch"&gt;娱乐&lt;/a&gt;&lt;/li&gt;  
  17.         <li><a href=”http://phalcon.framework.dev/List"&gt;列表&lt;/a&gt;&lt;/li&gt;  
  18.         <li><a href=”http://phalcon.framework.dev/List/display"&gt;内容&lt;/a&gt;&lt;/li&gt;  
  19.         <li><a href=”#” data-target=”#about” data-toggle=”modal”>关于</a></li>  
  20.       </ul>  
  21.       <ul class=”nav navbar-nav navbar-right”>          
  22.         <li><a href=”http://www.baidu.com"&gt;百度&lt;/a&gt;&lt;/li&gt;  
  23.         <li><a href=”http://www.sina.con.cn"&gt;新浪&lt;/a&gt;&lt;/li&gt;  
  24.         <li><a href=”http://cn.bing.com"&gt;必应&lt;/a&gt;&lt;/li&gt;  
  25.         <li><a href=”http://phalcon.framework.dev/Index/login"&gt;登录&lt;/a&gt;&lt;/li&gt;  
  26.         <?php } ?>  
  27.       </ul>  
  28.     </div>  
  29.   </div>  
  30. </nav>  

弹出框

  1. <li><a href=”#” data-target=”#about” data-toggle=”modal”>关于</a></li> <!–  3个data-target 属性指向对应的id即可 –>  
  2.  <div class=”modal fade” id=”about”>  
  3.     <div class=”modal-dialog”>  
  4.         <div class=”modal-content”>  
  5.             <div class=”modal-heading”>  
  6.                 <button type=”button” class=”close” data-dismiss=”modal”>  
  7.                     <span style=”padding-right:10px;” aria-hidden=”true”>×</span>  
  8.                     <span class=”sr-only”>Close</span>  
  9.                 </button>  
  10.                 <h3 class=”feature-heading”>传销<span class=”text-muted”>侵扰社经秩序影响安定团结</span></h3>  
  11.             </div>  
  12.             <div class=”modal-body”>  
  13.                 首要体超越十分之五消费者或投资者的结尾权益得不到保证。上面我们把传销与常规经营销售逐一对照,供我们辨别。  
  14. 消费行为与经营行为模糊,传销者用有个别“伎俩套路”,先前时代给您宣传的是投资经营行为,后来你下意识成为了消费者;可能宣传的是消费行为,后来让你成为了投资者;  
  15. 竟然引用“消费资本化”之类令人歪曲的概念,令你迷失在投资与开销之间,这样给您在法律上的维护合法权益带来许多困难(注:消费行为与投资经营作为是三个例外的法度概念,  
  16. 适用法律分别是:《消费者权益保养法》和《合同法》)。  
  17. 集体、领导以推销商品、提供服务、项目投资等经营活动为名,要求加入者以交纳费用或许购买商品、服务、投资等艺术赢得参加身价。      
  18.             </div>  
  19.             <div class=”modal-footer”>  
  20.                 <button type=”button” class=”btn btn-default” data-dismiss=”modal”>Close</button>     
  21.                 <button type=”button” class=”btn btn-primary”>Save Changes</button>   
  22.             </div>  
  23.         </div>  
  24.     </div>  
  25. </div> 
  26. 进度条
    1. <div class=”container”>  
    2. <!– Bootstrap 进度条 –>  
    3.     
    4.     <div class=”progress”>  
    5.         <div class=”progress-bar progress-bar-success” role=”progressbar” aria-valuenow=”20″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width: 20%;”>  
    6.             <span class=”sr-only”> 20% Complete</span>  
    7.         </div>  
    8.     </div>  
    9.   
    10.     <div class=”progress”>  
    11.         <div class=”progress-bar progress-bar-info” role=”progressbar” aria-valuenow=”40″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width: 40%;”>  
    12.             <span class=”sr-only”>40% Complete</span>  
    13.         </div>  
    14.     </div>  
    15.   
    16.     <div class=”progress”>  
    17.         <div class=”progress-bar progress-bar-warning” role=”progressbar” aria-valuenow=”60″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width: 60%;”>Tip 60%</div>  
    18.     </div>      
    19.       
    20.     <div class=”progress”>  
    21.         <div class=”progress-bar progress-bar-danger” role=”progressbar” aria-valuenow=”80″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width: 80%;”>Tip 80%</div>  
    22.     </div>      
    23.   
    24.     <div class=”progress”>  
    25.         <div class=”progress-bar” role=”progressbar” aria-valuenow=”100″ aria-valuemin=”0″ aria-

      1. valuemax=”100″ style=”width: 100%;”>Tip 100%</div>  
      2.     </div>      
      3.   
      4.   
      5.     <!– 过程条条纹效果 –>    
      6.     <div class=”progress”>  
      7.         <div class=”progress-bar progress-bar-success progress-bar-striped” role=”progressbar” aria-valuenow=”20″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width: 伍分之一;”>条纹效果</div>  
      8.     </div>      
      9.   
      10.     <!– 动画效果  –>  
      11.     <div class=”progress”>  
      12.         <div class=”progress-bar progress-bar-info progress-bar-striped active” role=”progress” aria-valuenow=”40″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width:五分之二”>动画效果</div>  
      13.     </div>  
      14.   
      15.     <!– 堆叠效果 –>  
      16.     <div class=”progress”>  
      17.         <div class=”progress-bar” style=”width:20%”></div>  
      18.         <div class=”progress-bar progress-bar-info progress-bar-striped” style=”width:20%”></div>  
      19.         <div class=”progress-bar progress-bar-success progress-bar-striped active” style=”width:20%”></div>  
      20.         <div class=”progress-bar progress-bar-danger progress-bar-striped active” style=”width:20%”></div>  
      21.         <div class=”progress-bar progress-bar-warning progress-bar-striped” style=”width:20%”></div>  
      22.     </div>
        1. 选项卡
        1. <div class=”container”>  
        2.     <ul class=”nav nav-tabs” role=”tablelist”>  
        3.         <li class=”active”><a href=”#linux” role=”tab” data-toggle=”tab”>Linux</a></li>  
        4.         <li><a href=”#apache” role=”tab” data-toggle=”tab”>Apache</a></li>  
        5.         <li><a href=”#php” role=”tab” data-toggle=”tab”>PHP</a></li>  
        6.         <li><a href=”#mysql” role=”tab” data-toggle=”tab”>MySql</a></li>  
        7.         <li><a href=”#html” role=”tab” data-toggle=”tab”>HTML</a></li>  
        8.         <li><a href=”#css” role=”tab” data-toggle=”tab”>CSS</a></li>  
        9.     </ul>  
        10.     <div class=”tab-content”>  
        11.         <div class=”tab-pane active” id=”linux”>  
        12.             <div class=”row feature”>  
        13. Bootstrap,                <div class=”col-md-8″>  
        14.                     <h1 class=”feature-heading”>Linux<span class=”text-muted”>操作系统</span></h1>  
        15.                     <p>Linux是一套免费应用和肆意传播的类Unix操作系统,是二个依据POSIX和UNIX的多用户、多职分、辅助二十四线程和多CPU的操作系统。  
        16. 它能运营重庆大学的UNIX工具软件、应用程序和互联网协议。它帮助3几个人和60个人硬件。Linux继承了Unix以网络为宗旨的陈设思想,是多天性能稳定的多用户互联网操作系统。</p>  
        17.                     <p>Linux是一款免费的操作系统,用户能够因而互联网或其余途径免费获取,并能够随意修改其源代码。  
        18. 那是任何的操作系统所做不到的。正是由于那或多或少,来自全球的居多程序员参预了Linux的修改、编写工作,程序员能够依照本人的兴味和灵感对其开始展览转移,  
        19. 那让Linux吸收了很多程序员的精髓,不断扩展。</p>  
        20.                 </div>  
        21.                 <div class=”col-md-4″><img class=”feature-image img-responsive” src=”/img/linux.png” /></div>  
        22.             </div>  
        23.         </div>  
          1.   
          2.         <div class=”tab-pane” id=”apache”>  
          3.             <div class=”row feature”>  
          4.                 <div class=”col-md-4″><img class=”feature-image img-responsive” src=”/img/apache.jpg” /></div>  
          5.                 <div class=”col-md-8″>  
          6.                     <h1 class=”feature-heading”>Apache<span class=”text-muted”>Web服务器</span></h1>  
          7.                     <p>Apache HTTP Server(简称Apache)是Apache软件基金会的1个开放源码的网页服务器,能够在超越5/10总括机操作系统中运转,  
          8. 是因为其多平台和安全性被广泛使用,是最流行的Web服务器端软件之一。它高效、可相信并且可透过简单的API扩充,将Perl/Python等解释器编写翻译到服务器中。</p>  
          9.                     <p>Apache源于NCSAhttpd服务器,经过多次修改,成为世界上最风靡的Web服务器软件之一。Apache取自“a patchy server”的读音,  
          10. 趣味是充满补丁的服务器,因为它是自由软件,所以持续有人来为它开发新的效用、新的性状、修改原来的缺陷。  
          11. Apache的特色是大致、速度快、质量稳定,并可做代理服务器来选用</p>  
          12.                 </div>  
          13.             </div>  
          14.         </div>  
          15.   
          16.         <div class=”tab-pane” id=”php”>  
          17.             <div class=”row feature”>  
          18.                 <div class=”col-md-8″>  
          19.                     <h1 class=”feature-heading”>PHP<span class=”text-muted”>开源脚本语言</span></h1>  
          20.                     <p>Hypertext Preprocessor,粤语名:“超文本预处理器”.语法吸收了C语言、Java和Perl的特色,易于学习,使用大规模,首要适用于Web开发世界。</p>  
          21.                     <p>PHP 独特的语法混合了C、Java、Perl以及PHP自创的语法。它能够比CGI恐怕Perl更敏捷地履行动态网页。  
          22. 用PHP做出的动态页面与其余的编制程序语言相比较,PHP是将先后嵌入到HTML(标准通用标记语言下的2个使用)文书档案中去履行,  
          23. 推行效用比完全生成HTML标记的CGI要高许多;PHP还足以推行编写翻译后代码,编写翻译能够直达加密和优化代码运转,使代码运
            1. 行更快。</p>  
            2.                 </div>  
            3.                 <div class=”col-md-4″><img class=”feature-image img-responsive” src=”/img/pho.png” /></div>  
            4.             </div>  
            5.         </div>  
            6.   
            7.         <div class=”tab-pane” id=”mysql”>  
            8.             <div class=”row feature”>  
            9.                 <div class=”col-md-4″><img class=”feature-image img-responsive” src=”/img/mysql.jpg” /></div>  
            10.                 <div class=”col-md-8″>  
            11.                     <h1 class=”feature-heading”>MySql<span class=”text-muted”>关系型数据库管理种类</span></h1>  
            12.                     <p>MySQL是1个开放源码的袖珍关联式数据库管理类别,开发者为瑞典MySQL AB集团。MySQL被广泛地使用在Internet上的中型小型型网站中。由于其体积小、速度快、总体拥有开销低,更加是开放源码这一性情,许多中小型网站为了下跌网站全体拥有资金财产而挑选了MySQL作为网站数据库。</p>  
            13.                     <p>MySQL是一种关全面据库管理类别,关联数据库将数据保存在差其他表中,而不是将享有数据放在三个大仓库内,那样就扩大了速度并增强了灵活性。</p>  
            14.                 </div>  
            15.             </div>  
            16.         </div>  
            17.   
            18.         <div class=”tab-pane” id=”html”>  
            19.             <div class=”row feature”>  
            20.                 <div class=”col-md-8″>  
            21.                     <h1 class=”feature-heading”>HTML<span class=”text-muted”>超文本标记语言</span></h1>  
            22.                     <p>网页的本色正是极品文本标记语言,通过结合使用任何的Web技术(如:脚本语言、公共网关接口、组件等),能够创制出效能强大的网页。由此,一流文本标记语言是万维网(Web)编制程序的功底,也正是说万维网是起家在超文本基础之上的。顶尖文本标记语言之所以称为超文本标记语言,是因为文件中隐含了所谓“一级链接”点。</p>  
            23.                     <p>超级文本标记语言是一种标准,一种标准,  
            24. 它经过标记符号来标记要突显的网页中的各类部分。网页文件本人是一种文本文件,通过在文书文件中添加标记符,能够告诉浏览器怎样呈现个中的剧情(如:文字怎样处理,画面怎么样安排,图片如何体现等)。浏览器按梯次阅读网页文件,然后依照
              1. 1. 标记符解释和出示其标志的始末,对书写出错的号子将不建议其错误,且不停歇其演说实施进程,编写制定者只可以通过显示效果来分析失误原因和失误部位。但须要小心的是,对于差其余浏览器,对同一标记符可能会有齐趋并驾的分解,因此恐怕会有分化的展现效果</p>  
                2.                 </div>  
                3.                 <div class=”col-md-4″><img class=”feature-image img-responsive” src=”/img/html.png” /></div>  
                4.             </div>  
                5.         </div>  
                6.         <div class=”tab-pane” id=”css”>  
                7.             <div class=”row feature”>  
                8.                 <div class=”col-md-4″><img class=”feature-image img-responsive” src=”/img/css.png” /></div>  
                9.                 <div class=”col-md-8″>  
                10.                     <h1 class=”feature-heading”>CSS<span class=”text-muted”>级联样式表</span></h1>  
                11.                     <p>它是一种用来显示HTML(标准通用标记语言的多少个运用)或XML(标准通用标记语言的二个子集)等文件样式的电脑语言。</p>  
                12.                     <p>CSS近期风行版本为CSS3,是力所能及真的做到网页表现与内容分其余一种样式设计语言。相对于古板HTML的显现而言,  
                13. CSS能够对网页中的对象的职位排版实行像素级的规范控制,支持大致全部的字体字号样式,拥有对网页对象和模型样式编辑的力量,并能够举行起初交互设计,  
                14. 是当下遵照文本体现最美好的表现设计语言。CSS能够基于分化使用者的通晓能力,简化或许优化写法,针对各项人群,有较强的易读性。  
                15. </p>  
                16.                 </div>  
                17.             </div>  
                18.         </div>  
                19.     </div>  
                1.     <hr />  
                2. </div>  
                3.

        气泡通知

        1. <ul class=”nav navbar-nav”>  
        2.         <li class=”active”><a href=”#”>开始</a></li>  
        3.         <li><a href=”#”>CSS</a></li>  
        4.         <li><a href=”#”>Javascript</a></li>  
        5.         <li><a href=”#”>订单 <span class=”badge”>10</span></a></li>  
        6.     <li><a href=”#”>留言 <span class=”badge”>25</span></a></li>  
        7.         <li><a href=”#about”>关于</a></li>  
        8. </ul>   
           

—恢复生机内容截至—

相关文章