---恢复内容开始---
我对于bootstrap定义与一种插件,他可以使我们的网页布局更加的炫酷,更加的整洁和合理。他的优点不多说,缺点一个就够我们头疼的,那就是需要记一些长长的英文名。
我为大家说几种常用的bootstrap的常用功能,希望你们用到的时候,可以来看下。
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
- <div class="container-fluid">
- <!-- 屏幕小到一定的尺寸时候导航栏发生的变化 -->
- <div class="navbar-header">
- <button class="navbar-toggle collapsed" data-target="#navigation-list" data-toggle="collapse" type="button">
- <span class="sr-only">Toggle navigation</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a class="navbar-brand" href="/">Bootstrap Web</a>
- </div>
- <!-- 正常尺寸下的导航拦 -->
- <div class="collapse navbar-collapse" id="navigation-list">
- <ul class="nav navbar-nav">
- <li class="active"><a href="#">开始</a></li>
- <li><a href="http://phalcon.framework.dev/Index/touch">娱乐</a></li>
- <li><a href="http://phalcon.framework.dev/List">列表</a></li>
- <li><a href="http://phalcon.framework.dev/List/display">内容</a></li>
- <li><a href="#" data-target="#about" data-toggle="modal">关于</a></li>
- </ul>
- <ul class="nav navbar-nav navbar-right">
- <li><a href="http://www.baidu.com">百度</a></li>
- <li><a href="http://www.sina.con.cn">新浪</a></li>
- <li><a href="http://cn.bing.com">必应</a></li>
- <li><a href="http://phalcon.framework.dev/Index/login">登录</a></li>
- <?php } ?>
- </ul>
- </div>
- </div>
- </nav>
弹出框
- <li><a href="#" data-target="#about" data-toggle="modal">关于</a></li> <!-- 一个data-target 属性指向对应的id即可 -->
- <div class="modal fade" id="about">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-heading">
- <button type="button" class="close" data-dismiss="modal">
- <span style="padding-right:10px;" aria-hidden="true">×</span>
- <span class="sr-only">Close</span>
- </button>
- <h3 class="feature-heading">传销<span class="text-muted">扰乱社会经济秩序影响安定团结</span></h3>
- </div>
- <div class="modal-body">
- 主要体大多数消费者或投资者的最终权益得不到保障。下面我们把传销与正常营销逐一对照,供大家辨别。
- 消费行为与经营行为模糊,传销者用一些“伎俩套路”,前期给你宣传的是投资经营行为,后来你不知不觉成为了消费者;或者宣传的是消费行为,后来让你变成了投资者;
- 甚至引用“消费资本化”之类令人模糊的概念,令你迷失在投资与消费之间,这样给你在法律上的维权带来很多困难(注:消费行为与投资经营行为是两个不同的法律概念,
- 适用法律分别是:《消费者权益保护法》和《合同法》)。
- 组织、领导以推销商品、提供服务、项目投资等经营活动为名,要求参加者以缴纳费用或者购买商品、服务、投资等方式获得加入资格。
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
- <button type="button" class="btn btn-primary">Save Changes</button>
- </div>
- </div>
- </div>
- </div>
- 进度条
- <div class="container">
- <!-- Bootstrap 进度条 -->
- <div class="progress">
- <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
- <span class="sr-only"> 20% Complete</span>
- </div>
- </div>
- <div class="progress">
- <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
- <span class="sr-only">40% Complete</span>
- </div>
- </div>
- <div class="progress">
- <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">Tip 60%</div>
- </div>
- <div class="progress">
- <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">Tip 80%</div>
- </div>
- <div class="progress">
- <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-
- valuemax="100" style="width: 100%;">Tip 100%</div>
- </div>
- <!-- 进度条条纹效果 -->
- <div class="progress">
- <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">条纹效果</div>
- </div>
- <!-- 动画效果 -->
- <div class="progress">
- <div class="progress-bar progress-bar-info progress-bar-striped active" role="progress" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">动画效果</div>
- </div>
- <!-- 堆叠效果 -->
- <div class="progress">
- <div class="progress-bar" style="width:20%"></div>
- <div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
- <div class="progress-bar progress-bar-success progress-bar-striped active" style="width:20%"></div>
- <div class="progress-bar progress-bar-danger progress-bar-striped active" style="width:20%"></div>
- <div class="progress-bar progress-bar-warning progress-bar-striped" style="width:20%"></div>
- </div>
- 选项卡
-
- <div class="container">
- <ul class="nav nav-tabs" role="tablelist">
- <li class="active"><a href="#linux" role="tab" data-toggle="tab">Linux</a></li>
- <li><a href="#apache" role="tab" data-toggle="tab">Apache</a></li>
- <li><a href="#php" role="tab" data-toggle="tab">PHP</a></li>
- <li><a href="#mysql" role="tab" data-toggle="tab">MySql</a></li>
- <li><a href="#html" role="tab" data-toggle="tab">HTML</a></li>
- <li><a href="#css" role="tab" data-toggle="tab">CSS</a></li>
- </ul>
- <div class="tab-content">
- <div class="tab-pane active" id="linux">
- <div class="row feature">
- <div class="col-md-8">
- <h1 class="feature-heading">Linux<span class="text-muted">操作系统</span></h1>
- <p>Linux是一套免费使用和*传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户、多任务、支持多线程和多CPU的操作系统。
- 它能运行主要的UNIX工具软件、应用程序和网络协议。它支持32位和64位硬件。Linux继承了Unix以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。</p>
- <p>Linux是一款免费的操作系统,用户可以通过网络或其他途径免费获得,并可以任意修改其源代码。
- 这是其他的操作系统所做不到的。正是由于这一点,来自全世界的无数程序员参与了Linux的修改、编写工作,程序员可以根据自己的兴趣和灵感对其进行改变,
- 这让Linux吸收了无数程序员的精华,不断壮大。</p>
- </div>
- <div class="col-md-4"><img class="feature-image img-responsive" src="/img/linux.png" /></div>
- </div>
- </div>
- <div class="tab-pane" id="apache">
- <div class="row feature">
- <div class="col-md-4"><img class="feature-image img-responsive" src="/img/apache.jpg" /></div>
- <div class="col-md-8">
- <h1 class="feature-heading">Apache<span class="text-muted">Web服务器</span></h1>
- <p>Apache HTTP Server(简称Apache)是Apache软件基金会的一个开放源码的网页服务器,可以在大多数计算机操作系统中运行,
- 由于其多平台和安全性被广泛使用,是最流行的Web服务器端软件之一。它快速、可靠并且可通过简单的API扩展,将Perl/Python等解释器编译到服务器中。</p>
- <p>Apache源于NCSAhttpd服务器,经过多次修改,成为世界上最流行的Web服务器软件之一。Apache取自“a patchy server”的读音,
- 意思是充满补丁的服务器,因为它是*软件,所以不断有人来为它开发新的功能、新的特性、修改原来的缺陷。
- Apache的特点是简单、速度快、性能稳定,并可做代理服务器来使用</p>
- </div>
- </div>
- </div>
- <div class="tab-pane" id="php">
- <div class="row feature">
- <div class="col-md-8">
- <h1 class="feature-heading">PHP<span class="text-muted">开源脚本语言</span></h1>
- <p>Hypertext Preprocessor,中文名:“超文本预处理器”.语法吸收了C语言、Java和Perl的特点,易于学习,使用广泛,主要适用于Web开发领域。</p>
- <p>PHP 独特的语法混合了C、Java、Perl以及PHP自创的语法。它可以比CGI或者Perl更快速地执行动态网页。
- 用PHP做出的动态页面与其他的编程语言相比,PHP是将程序嵌入到HTML(标准通用标记语言下的一个应用)文档中去执行,
- 执行效率比完全生成HTML标记的CGI要高许多;PHP还可以执行编译后代码,编译可以达到加密和优化代码运行,使代码运
- 行更快。</p>
- </div>
- <div class="col-md-4"><img class="feature-image img-responsive" src="/img/pho.png" /></div>
- </div>
- </div>
- <div class="tab-pane" id="mysql">
- <div class="row feature">
- <div class="col-md-4"><img class="feature-image img-responsive" src="/img/mysql.jpg" /></div>
- <div class="col-md-8">
- <h1 class="feature-heading">MySql<span class="text-muted">关系型数据库管理系统</span></h1>
- <p>MySQL是一个开放源码的小型关联式数据库管理系统,开发者为瑞典MySQL AB公司。MySQL被广泛地应用在Internet上的中小型网站中。由于其体积小、速度快、总体拥有成本低,尤其是开放源码这一特点,许多中小型网站为了降低网站总体拥有成本而选择了MySQL作为网站数据库。</p>
- <p>MySQL是一种关联数据库管理系统,关联数据库将数据保存在不同的表中,而不是将所有数据放在一个大仓库内,这样就增加了速度并提高了灵活性。</p>
- </div>
- </div>
- </div>
- <div class="tab-pane" id="html">
- <div class="row feature">
- <div class="col-md-8">
- <h1 class="feature-heading">HTML<span class="text-muted">超文本标记语言</span></h1>
- <p>网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。</p>
- <p>超级文本标记语言是一种规范,一种标准,
- 它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据
- 标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果</p>
- </div>
- <div class="col-md-4"><img class="feature-image img-responsive" src="/img/html.png" /></div>
- </div>
- </div>
- <div class="tab-pane" id="css">
- <div class="row feature">
- <div class="col-md-4"><img class="feature-image img-responsive" src="/img/css.png" /></div>
- <div class="col-md-8">
- <h1 class="feature-heading">CSS<span class="text-muted">级联样式表</span></h1>
- <p>它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。</p>
- <p>CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,
- CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,
- 是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。
- </p>
- </div>
- </div>
- </div>
- </div>
- <hr />
- </div>
气泡通知
- <ul class="nav navbar-nav">
- <li class="active"><a href="#">开始</a></li>
- <li><a href="#">CSS</a></li>
- <li><a href="#">Javascript</a></li>
- <li><a href="#">订单 <span class="badge">10</span></a></li>
- <li><a href="#">留言 <span class="badge">25</span></a></li>
- <li><a href="#about">关于</a></li>
- </ul>
---恢复内容结束---