hello

ffff是谁

详细的来说

可以的

可以的

可以的

fffffffffjiushizheli

还是测试的

yejiushiyige test

测试的哦

CxMvc是一个轻量级,低耦合的框架。

介绍

CxMvc 是PHP语言实现的Web开发框架,特点是你可以很方便的对他进行各种定制。

3.1 beta

相对于2.0有如下改进

  • 添加模版引擎
  • 优化配置文件和缓存类库等文件
  • 改进CLI的运行模式
  • PHP版本需要 >= 5.4

3.0 beta

相对于2.0有如下改进

  • 简化了控制器获取输入参数的方式
  • 引入更为强大的数据校验类,且可以与控制器完美结合
  • 对MySql构造器进行了加强,增加了in和like函数
  • 对整体结构进行了优化
  • PHP版本需要 >= 5.4

详细细节请看下面

2.0

建议PHP版本 >= 5.3.0 。

  • 提供简单实用的ORM封装。
  • 以回调函数的方式提供各种注入方式。
  • 以Apache Licence开源协议发布。
  • 尽量保持PHP的原生使用方式,不过度封装。
  • 独立的DEBUG显示页面,方便与远程人员进行合作调试。

版本信息

  • 最后更新:2016-05-04
  • 最新版本:2.0

入口文件示例

<?php

//开启Session
session_start();

//关闭所有错误警告
//ini_set("display_errors", E_ALL);

//加载配置文件
include ("config.mvc.php");

//加载初始化文件
include (PATH_CXMVC.'CxMvc.php');

$cxmvc = new CxMvc();
$cxmvc->bootstrap('Bootstrap',$cxmvc);
$cxmvc->run();

配置文件示例

<?php
define('DS',                    DIRECTORY_SEPARATOR);
/*系统相关参数*/
define('PATH',                  dirname(__FILE__).DS); //项目的文件路径
/**
 * 是否开启DeBug调试页面
 * 可以设置3种值
 * FILE 将调试信息保存在文件里
 * SESSION 将调试信息保存在session里
 * false 关闭Debug
 */
define('DEBUG',                 true);
//define('DEBUG',               'key:123456');
/*
 * 默认页面
 * 当用户输入http://localhost/项目名/时,请求的Action
 */
define('DEFAULT_INDEX',         'main/index');
define('DEFAULT_EXT',           '.html');
//define('DEFAULT_MODEL',       '');//默认的模型,如没有,可注释或留空

/*这些路径必须设置*/
define('PATH_CXMVC',            PATH.'cxmvc'.DS);
define('PATH_CONTROLLER',       PATH.'application'.DS.'controller'.DS);//控制器路径
define('PATH_CONSOLE',          PATH.'application'.DS.'console'.DS);//脚本路径
define('PATH_DAOS',             PATH.'application'.DS.'daos'.DS);//DAO路径
define('PATH_TEMPLATES',        PATH.'application'.DS.'view'.DS);//模版路径
define('PATH_COMMON',           PATH.'application'.DS.'common'.DS);//公共模块或插件的路径
/*
 * 自动文件加载文件夹,多个目录以‘:’分割
 * eg:PATH.'application'.DS.'include'.DS.':'.PATH.'config'.DS
 */
define('PATH_AUTOINCLUDE',      PATH.'application'.DS.'include'.DS);
define('PATH_INI',              PATH.'temp'.DS);//固态配置文件夹路径
define('PATH_TEMP',             PATH.'temp'.DS);//Temp文件夹路径
define('PATH_LOG',              PATH.'temp'.DS);//Temp文件夹路径
//'http://'.$_SERVER['HTTP_HOST'].str_replace('/index.php','',$_SERVER['SCRIPT_NAME'].'/'
define('URL',                 'http://'.$_SERVER['HTTP_HOST'].'/');//项目的URL路径
define('URL_RES',               URL.'static/');//用于网页中资源的URL路径

3.0新增特性说明

注册事件调整

统一调整为由CxMvc类方法call进行事件注册 可注册事件如下:

  • autoload,注册自动加载函数,此函数会在框架默认自动加载不成功的情况下调用
  • error,当程序遇到错误回调方法
  • notfound,当请求不存在时的回调函数
  • validate,当参数验证失败时的回调函数
  • redirect,重定向回调方法

示例:


$mvc->call('redirect',function(CxRouter $router){
    //现在redirect回调接收的CxRouter为一个没有进行路由解析的对象
    //你可以自定义自己的路由对其进行填充
    //也可以在条件下直接使用原生路由,$router->analyseUrl()
});

$mvc->call('autoload',function($object){ });

$mvc->call('error',function($e){ });

$mvc->call('validate',function($msg,$args){ });

$mvc->call('notfound',function(){ });

控制器相关改进

控制器集成了自动获取输入参数和验证功能

  • 去掉了作用不大的id事件函数,因为before包含它的功能
  • before和after将不再接受一个CxRouter对象参数
  • __after可以接受当前控制的返回值作为参数
class Test {

    //在请求控制器函数之前调用
    //如果返回false或不返回,将不会再执行请求控制器函数
    public function __before() {

    }

    public function index() {

    }

    //在请求控制器函数之后调用
    //$args为在请求控制器函数的返回值
    public function __after($args) {

    }
}

参数获取和验证功能说明

class Test {

    //验证规则
    //如果不设置此属性,只会对参数参数进行简单的包含和非包含验证
    protected $rule =   [
        'name'  => 'require|max:25',
        'age'   => 'number|between:1,120',
        'email' => 'email',
    ];

    //验证失败信息
    //如果不设置此属性,将使用默认提示
    protected $message  =   [
        'name.require' => '名称必须',
        'name.max'     => '名称最多不能超过25个字符',
        'age.number'   => '年龄必须是数字',
        'age.between'  => '年龄只能在1-120之间',
        'email'        => '邮箱格式错误',
    ];

    //当给__before定义了接受参数
    //那么会在当前控制器的每一次请求里都从外部获取对应值进行填充
    public function __before($email) {

    }

    //当参数有默认值时,如果从外部获取不到对应值,将自动填充默认值
    //当参数验证失败时,会调用$mvc->call('validate',function($msg,$args){ });
    public function index($name,$age=13) {

    }
}

CxMysql增强

添加了in和like的支持

class Test {

    public function index() {
        $dao = new CxMysql();
        $result = $dao->tbl
                ->where('sort=?',0)
                ->in('id',[1,2])
                ->like('name','撸卡','r')
                ->fetchAll();
    }

}

CxRedis

CxRedis增加了native静态函数,可以获取一个原生的redis对象

一个工具类

在控制器里继承Docdown,可以自动生成相关文档

class Test extends Docdown{

        /**
         * # 获取APP首页内容
         *
         * ## 接口功能
         * > 获取APP首页内容
         *
         * ## URL
         * > http://api.lookmanhua.cn/app/index
         *
         * ## HTTP请求方式
         * > GET&POST
         *
         * ## 请求参数
         * |参数|必填|类型|说明|
         * |:-----  |:-------|:-----|-----  |
         * |from     |ture    |int|请求类型,1web,2ios,3wap,4android|
         *
         * ## 返回结果
         * ``` javascript
         * {
         *      "s": 0,
         *      "c": {
         *          "nick":"xxxx",
         *          "face":"http://xx.com",
         *          "sex":"男",
         *      },
         * }
         * ```
         * ## 返回字段
         * |返回字段|字段类型|说明                              |
         * |:-----   |:------|:-----------------------------   |
         * |redcomic     |array    |最热漫画   |
         * |newcomic     |array    |最新漫画   |
         * |carousel     |array    |轮播图   |
         * |redvideo     |array    |最热视频   |
         * |newinfo      |array    |最新资讯   |
         * |event        |array    |活动专题   |
         */
        public function index() {
            $this->setTitle('火线大咖API接口');
            $this->setAutonumber(true);//是否自动编号
            $this->setExpandall(false);//是否展开菜单
            $this->setDoc(['App','Comic','Atlas','Video','Carousel','Article','Special']);
            $this->show();
        }

}

CLI运行模式

php luncher.php 控制器/方法名:配置文件名 参数1 参数2

PS相关内置验证规则:

  • require,验证某个字段必须,例如:'name'=>'require'
  • number 或者 integer,验证某个字段的值是否为数字(采用filter_var验证),例如:'num'=>'number'
  • float,验证某个字段的值是否为浮点数字(采用filter_var验证),例如:'num'=>'float'
  • boolean,验证某个字段的值是否为布尔值(采用filter_var验证),例如:'num'=>'boolean'
  • email,验证某个字段的值是否为email地址(采用filter_var验证),例如:'email'=>'email'
  • array,验证某个字段的值是否为数组,例如:'info'=>'array'
  • accepted,验证某个字段是否为为 yes, on, 或是 1。这在确认"服务条款"是否同意时很有用,例如:'accept'=>'accepted'
  • date,验证值是否为有效的日期,会对日期值进行strtotime后进行判断.例如:'date'=>'date'
  • alpha,验证某个字段的值是否为字母,例如:'name'=>'alpha'
  • alphaNum,验证某个字段的值是否为字母和数字,例如:'name'=>'alphaNum'
  • alphaDash,验证某个字段的值是否为字母和数字,下划线_及破折号-,例如:'name'=>'alphaDash'
  • activeUrl,验证某个字段的值是否为有效的域名或者IP,例如:'host'=>'activeUrl'
  • url,验证某个字段的值是否为有效的URL地址(采用filter_var验证),例如:'url'=>'url'
  • ip,验证某个字段的值是否为有效的IP地址(采用filter_var验证),支持验证ipv4和ipv6格式的IP地址。例如:'ip'=>'ip'
  • dateFormat:format,验证某个字段的值是否为指定格式的日期,例如:'create_time'=>'dateFormat:y-m-d'

长度和区间验证类

  • in,验证某个字段的值是否在某个范围,例如:'num'=>'in:1,2,3'
  • notIn,验证某个字段的值不在某个范围,例如:'num'=>'notIn:1,2,3'
  • between,验证某个字段的值是否在某个区间,例如:'num'=>'between:1,10'
  • notBetween,验证某个字段的值不在某个范围,例如:'num'=>'notBetween:1,10'
  • length:num1,num2,验证某个字段的值的长度是否在某个范围,例如:'name'=>'length:4,25'或者指定长度'name'=>'length:4'

如果验证的数据是数组,则判断数组的长度。 如果验证的数据是File对象,则判断文件的大小。

  • max:number,验证某个字段的值的最大长度,例如:'name'=>'max:25'
  • min:number,验证某个字段的值的最小长度,例如:'name'=>'min:5'

  • after:日期,验证某个字段的值是否在某个日期之后,例如:'begin_time' => 'after:2016-3-18',
  • before:日期,验证某个字段的值是否在某个日期之前,例如:'end_time' => 'before:2016-10-01',
  • expire:开始时间,结束时间,验证当前操作(注意不是某个值)是否在某个有效日期之内,例如:'expire_time' => 'expire:2016-2-1,2016-10-01',
  • allowIp:allow1,allow2,...验证当前请求的IP是否在某个范围,例如:'name' => 'allowIp:114.45.4.55',
  • denyIp:allow1,allow2,...验证当前请求的IP是否禁止访问,例如:'name' => 'denyIp:114.45.4.55',

字段比较类

  • confirm,验证某个字段是否和另外一个字段的值一致,例如:'repassport'=>'require|confirm:passport'
  • different,验证某个字段是否和另外一个字段的值不一致,例如:'name'=>'require|different:account'
  • egt 或者 >=,验证是否大于等于某个值,例如:'score'=>'egt:60','num'=>'>=:100'
  • gt 或者 >,验证是否大于某个值,例如:'score'=>'gt:60','num'=>'>:100'
  • elt 或者 <=,验证是否小于等于某个值,例如:'score'=>'elt:100','num'=>'<=:100'
  • lt 或者 <,验证是否小于某个值,例如:'score'=>'lt:100','num'=>'<:100'
  • eq 或者 = 或者 same,验证是否等于某个值,例如:'score'=>'eq:100','num'=>'=:100','num'=>'same:100'

filter验证 支持使用filter_var进行验证,例如:'ip'=>'filter:validate_ip'

正则验证 支持直接使用正则验证,例如:'zip'=>'\d{6}', 或者 'zip'=>'regex:\d{6}', 如果你的正则表达式中包含有|符号的话,必须使用数组方式定义。 'accepted'=>['regex'=>'/^(yes|on|1)$/i'],

也可以实现预定义正则表达式后直接调用,例如: 上传验证

  • file,验证是否是一个上传文件
  • image:width,height,type,验证是否是一个图像文件,width height和type都是可选,width和height必须同时定义。
  • fileExt:允许的文件后缀,验证上传文件后缀
  • fileMime:允许的文件类型,验证上传文件类型
  • fileSize:允许的文件字节大小,验证上传文件大小

    在测试一下哈哈

    在测试一下哈哈 在测试一下哈哈在测试一下哈哈

ffff

112333

还有错吗

Markdown: Syntax

Note: This document is itself written using Markdown; you can see the source for it by adding '.text' to the URL.


Overview

Philosophy

Markdown is intended to be as easy-to-read and easy-to-write as is feasible.

Readability, however, is emphasized above all else. A Markdown-formatted document should be publishable as-is, as plain text, without looking like it's been marked up with tags or formatting instructions. While Markdown's syntax has been influenced by several existing text-to-HTML filters -- including Setext, atx, Textile, reStructuredText, Grutatext, and EtText -- the single biggest source of inspiration for Markdown's syntax is the format of plain text email.

To this end, Markdown's syntax is comprised entirely of punctuation characters, which punctuation characters have been carefully chosen so as to look like what they mean. E.g., asterisks around a word actually look like *emphasis*. Markdown lists look like, well, lists. Even blockquotes look like quoted passages of text, assuming you've ever used email.

Inline HTML

Markdown's syntax is intended for one purpose: to be used as a format for writing for the web.

Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a publishing format; Markdown is a writing format. Thus, Markdown's formatting syntax only addresses issues that can be conveyed in plain text.

For any markup that is not covered by Markdown's syntax, you simply use HTML itself. There's no need to preface it or delimit it to indicate that you're switching from Markdown to HTML; you just use the tags.

The only restrictions are that block-level HTML elements -- e.g. <div>, <table>, <pre>, <p>, etc. -- must be separated from surrounding content by blank lines, and the start and end tags of the block should not be indented with tabs or spaces. Markdown is smart enough not to add extra (unwanted) <p> tags around HTML block-level tags.

For example, to add an HTML table to a Markdown article:

This is a regular paragraph.

<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>

This is another regular paragraph.

Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can't use Markdown-style *emphasis* inside an HTML block.

Span-level HTML tags -- e.g. <span>, <cite>, or <del> -- can be used anywhere in a Markdown paragraph, list item, or header. If you want, you can even use HTML tags instead of Markdown formatting; e.g. if you'd prefer to use HTML <a> or <img> tags instead of Markdown's link or image syntax, go right ahead.

Unlike block-level HTML tags, Markdown syntax is processed within span-level tags.

Automatic Escaping for Special Characters

In HTML, there are two characters that demand special treatment: < and &. Left angle brackets are used to start tags; ampersands are used to denote HTML entities. If you want to use them as literal characters, you must escape them as entities, e.g. &lt;, and &amp;.

Ampersands in particular are bedeviling for web writers. If you want to write about 'AT&T', you need to write 'AT&amp;T'. You even need to escape ampersands within URLs. Thus, if you want to link to:

http://images.google.com/images?num=30&q=larry+bird

you need to encode the URL as:

http://images.google.com/images?num=30&amp;q=larry+bird

in your anchor tag href attribute. Needless to say, this is easy to forget, and is probably the single most common source of HTML validation errors in otherwise well-marked-up web sites.

Markdown allows you to use these characters naturally, taking care of all the necessary escaping for you. If you use an ampersand as part of an HTML entity, it remains unchanged; otherwise it will be translated into &amp;.

So, if you want to include a copyright symbol in your article, you can write:

&copy;

and Markdown will leave it alone. But if you write:

AT&T

Markdown will translate it to:

AT&amp;T

Similarly, because Markdown supports inline HTML, if you use angle brackets as delimiters for HTML tags, Markdown will treat them as such. But if you write:

4 < 5

Markdown will translate it to:

4 &lt; 5

However, inside Markdown code spans and blocks, angle brackets and ampersands are always encoded automatically. This makes it easy to use Markdown to write about HTML code. (As opposed to raw HTML, which is a terrible format for writing about HTML syntax, because every single < and & in your example code needs to be escaped.)


Block Elements

Paragraphs and Line Breaks

A paragraph is simply one or more consecutive lines of text, separated by one or more blank lines. (A blank line is any line that looks like a blank line -- a line containing nothing but spaces or tabs is considered blank.) Normal paragraphs should not be indented with spaces or tabs.

The implication of the "one or more consecutive lines of text" rule is that Markdown supports "hard-wrapped" text paragraphs. This differs significantly from most other text-to-HTML formatters (including Movable Type's "Convert Line Breaks" option) which translate every line break character in a paragraph into a <br /> tag.

When you do want to insert a <br /> break tag using Markdown, you end a line with two or more spaces, then type return.

Yes, this takes a tad more effort to create a <br />, but a simplistic "every line break is a <br />" rule wouldn't work for Markdown. Markdown's email-style blockquoting and multi-paragraph list items work best -- and look better -- when you format them with hard breaks.

Markdown supports two styles of headers, Setext and atx.

Setext-style headers are "underlined" using equal signs (for first-level headers) and dashes (for second-level headers). For example:

This is an H1
=============

This is an H2
-------------

Any number of underlining ='s or -'s will work.

Atx-style headers use 1-6 hash characters at the start of the line, corresponding to header levels 1-6. For example:

# This is an H1

## This is an H2

###### This is an H6

Optionally, you may "close" atx-style headers. This is purely cosmetic -- you can use this if you think it looks better. The closing hashes don't even need to match the number of hashes used to open the header. (The number of opening hashes determines the header level.) :

# This is an H1 #

## This is an H2 ##

### This is an H3 ######

Blockquotes

Markdown uses email-style > characters for blockquoting. If you're familiar with quoting passages of text in an email message, then you know how to create a blockquote in Markdown. It looks best if you hard wrap the text and put a > before every line:

> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
> 
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
> id sem consectetuer libero luctus adipiscing.

Markdown allows you to be lazy and only put the > before the first line of a hard-wrapped paragraph:

> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.

Blockquotes can be nested (i.e. a blockquote-in-a-blockquote) by adding additional levels of >:

> This is the first level of quoting.
>
> > This is nested blockquote.
>
> Back to the first level.

Blockquotes can contain other Markdown elements, including headers, lists, and code blocks:

> ## This is a header.
> 
> 1.   This is the first list item.
> 2.   This is the second list item.
> 
> Here's some example code:
> 
>     return shell_exec("echo $input | $markdown_script");

Any decent text editor should make email-style quoting easy. For example, with BBEdit, you can make a selection and choose Increase Quote Level from the Text menu.

Lists

Markdown supports ordered (numbered) and unordered (bulleted) lists.

Unordered lists use asterisks, pluses, and hyphens -- interchangably -- as list markers:

*   Red
*   Green
*   Blue

is equivalent to:

+   Red
+   Green
+   Blue

and:

-   Red
-   Green
-   Blue

Ordered lists use numbers followed by periods:

1.  Bird
2.  McHale
3.  Parish

It's important to note that the actual numbers you use to mark the list have no effect on the HTML output Markdown produces. The HTML Markdown produces from the above list is:

<ol>
<li>Bird</li>
<li>McHale</li>
<li>Parish</li>
</ol>

If you instead wrote the list in Markdown like this:

1.  Bird
1.  McHale
1.  Parish

or even:

3. Bird
1. McHale
8. Parish

you'd get the exact same HTML output. The point is, if you want to, you can use ordinal numbers in your ordered Markdown lists, so that the numbers in your source match the numbers in your published HTML. But if you want to be lazy, you don't have to.

If you do use lazy list numbering, however, you should still start the list with the number 1. At some point in the future, Markdown may support starting ordered lists at an arbitrary number.

List markers typically start at the left margin, but may be indented by up to three spaces. List markers must be followed by one or more spaces or a tab.

To make lists look nice, you can wrap items with hanging indents:

*   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
    viverra nec, fringilla in, laoreet vitae, risus.
*   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
    Suspendisse id sem consectetuer libero luctus adipiscing.

But if you want to be lazy, you don't have to:

*   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
viverra nec, fringilla in, laoreet vitae, risus.
*   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
Suspendisse id sem consectetuer libero luctus adipiscing.

If list items are separated by blank lines, Markdown will wrap the items in <p> tags in the HTML output. For example, this input:

*   Bird
*   Magic

will turn into:

<ul>
<li>Bird</li>
<li>Magic</li>
</ul>

But this:

*   Bird

*   Magic

will turn into:

<ul>
<li><p>Bird</p></li>
<li><p>Magic</p></li>
</ul>

List items may consist of multiple paragraphs. Each subsequent paragraph in a list item must be indented by either 4 spaces or one tab:

1.  This is a list item with two paragraphs. Lorem ipsum dolor
    sit amet, consectetuer adipiscing elit. Aliquam hendrerit
    mi posuere lectus.

    Vestibulum enim wisi, viverra nec, fringilla in, laoreet
    vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
    sit amet velit.

2.  Suspendisse id sem consectetuer libero luctus adipiscing.

It looks nice if you indent every line of the subsequent paragraphs, but here again, Markdown will allow you to be lazy:

*   This is a list item with two paragraphs.

    This is the second paragraph in the list item. You're
only required to indent the first line. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit.

*   Another item in the same list.

To put a blockquote within a list item, the blockquote's > delimiters need to be indented:

*   A list item with a blockquote:

    > This is a blockquote
    > inside a list item.

To put a code block within a list item, the code block needs to be indented twice -- 8 spaces or two tabs:

*   A list item with a code block:

        <code goes here>

It's worth noting that it's possible to trigger an ordered list by accident, by writing something like this:

1986. What a great season.

In other words, a number-period-space sequence at the beginning of a line. To avoid this, you can backslash-escape the period:

1986\. What a great season.

Code Blocks

Pre-formatted code blocks are used for writing about programming or markup source code. Rather than forming normal paragraphs, the lines of a code block are interpreted literally. Markdown wraps a code block in both <pre> and <code> tags.

To produce a code block in Markdown, simply indent every line of the block by at least 4 spaces or 1 tab. For example, given this input:

This is a normal paragraph:

    This is a code block.

Markdown will generate:

<p>This is a normal paragraph:</p>

<pre><code>This is a code block.
</code></pre>

One level of indentation -- 4 spaces or 1 tab -- is removed from each line of the code block. For example, this:

Here is an example of AppleScript:

    tell application "Foo"
        beep
    end tell

will turn into:

<p>Here is an example of AppleScript:</p>

<pre><code>tell application "Foo"
    beep
end tell
</code></pre>

A code block continues until it reaches a line that is not indented (or the end of the article).

Within a code block, ampersands (&) and angle brackets (< and >) are automatically converted into HTML entities. This makes it very easy to include example HTML source code using Markdown -- just paste it and indent it, and Markdown will handle the hassle of encoding the ampersands and angle brackets. For example, this:

    <div class="footer">
        &copy; 2004 Foo Corporation
    </div>

will turn into:

<pre><code>&lt;div class="footer"&gt;
    &amp;copy; 2004 Foo Corporation
&lt;/div&gt;
</code></pre>

Regular Markdown syntax is not processed within code blocks. E.g., asterisks are just literal asterisks within a code block. This means it's also easy to use Markdown to write about Markdown's own syntax.

Horizontal Rules

You can produce a horizontal rule tag (<hr />) by placing three or more hyphens, asterisks, or underscores on a line by themselves. If you wish, you may use spaces between the hyphens or asterisks. Each of the following lines will produce a horizontal rule:

* * *

***

*****

- - -

---------------------------------------

Span Elements

Markdown supports two style of links: inline and reference.

In both styles, the link text is delimited by [square brackets].

To create an inline link, use a set of regular parentheses immediately after the link text's closing square bracket. Inside the parentheses, put the URL where you want the link to point, along with an optional title for the link, surrounded in quotes. For example:

This is [an example](http://example.com/ "Title") inline link.

[This link](http://example.net/) has no title attribute.

Will produce:

<p>This is <a href="http://example.com/" title="Title">
an example</a> inline link.</p>

<p><a href="http://example.net/">This link</a> has no
title attribute.</p>

If you're referring to a local resource on the same server, you can use relative paths:

See my [About](/about/) page for details.   

Reference-style links use a second set of square brackets, inside which you place a label of your choosing to identify the link:

This is [an example][id] reference-style link.

You can optionally use a space to separate the sets of brackets:

This is [an example] [id] reference-style link.

Then, anywhere in the document, you define your link label like this, on a line by itself:

[id]: http://example.com/  "Optional Title Here"

That is:

  • Square brackets containing the link identifier (optionally indented from the left margin using up to three spaces);
  • followed by a colon;
  • followed by one or more spaces (or tabs);
  • followed by the URL for the link;
  • optionally followed by a title attribute for the link, enclosed in double or single quotes, or enclosed in parentheses.

The following three link definitions are equivalent:

[foo]: http://example.com/  "Optional Title Here"
[foo]: http://example.com/  'Optional Title Here'
[foo]: http://example.com/  (Optional Title Here)

Note: There is a known bug in Markdown.pl 1.0.1 which prevents single quotes from being used to delimit link titles.

The link URL may, optionally, be surrounded by angle brackets:

[id]: <http://example.com/>  "Optional Title Here"

You can put the title attribute on the next line and use extra spaces or tabs for padding, which tends to look better with longer URLs:

[id]: http://example.com/longish/path/to/resource/here
    "Optional Title Here"

Link definitions are only used for creating links during Markdown processing, and are stripped from your document in the HTML output.

Link definition names may consist of letters, numbers, spaces, and punctuation -- but they are not case sensitive. E.g. these two links:

[link text][a]
[link text][A]

are equivalent.

The implicit link name shortcut allows you to omit the name of the link, in which case the link text itself is used as the name. Just use an empty set of square brackets -- e.g., to link the word "Google" to the google.com web site, you could simply write:

[Google][]

And then define the link:

[Google]: http://google.com/

Because link names may contain spaces, this shortcut even works for multiple words in the link text:

Visit [Daring Fireball][] for more information.

And then define the link:

[Daring Fireball]: http://daringfireball.net/

Link definitions can be placed anywhere in your Markdown document. I tend to put them immediately after each paragraph in which they're used, but if you want, you can put them all at the end of your document, sort of like footnotes.

Here's an example of reference links in action:

I get 10 times more traffic from [Google] [1] than from
[Yahoo] [2] or [MSN] [3].

  [1]: http://google.com/        "Google"
  [2]: http://search.yahoo.com/  "Yahoo Search"
  [3]: http://search.msn.com/    "MSN Search"

Using the implicit link name shortcut, you could instead write:

I get 10 times more traffic from [Google][] than from
[Yahoo][] or [MSN][].

  [google]: http://google.com/        "Google"
  [yahoo]:  http://search.yahoo.com/  "Yahoo Search"
  [msn]:    http://search.msn.com/    "MSN Search"

Both of the above examples will produce the following HTML output:

<p>I get 10 times more traffic from <a href="http://google.com/"
title="Google">Google</a> than from
<a href="http://search.yahoo.com/" title="Yahoo Search">Yahoo</a>
or <a href="http://search.msn.com/" title="MSN Search">MSN</a>.</p>

For comparison, here is the same paragraph written using Markdown's inline link style:

I get 10 times more traffic from [Google](http://google.com/ "Google")
than from [Yahoo](http://search.yahoo.com/ "Yahoo Search") or
[MSN](http://search.msn.com/ "MSN Search").

The point of reference-style links is not that they're easier to write. The point is that with reference-style links, your document source is vastly more readable. Compare the above examples: using reference-style links, the paragraph itself is only 81 characters long; with inline-style links, it's 176 characters; and as raw HTML, it's 234 characters. In the raw HTML, there's more markup than there is text.

With Markdown's reference-style links, a source document much more closely resembles the final output, as rendered in a browser. By allowing you to move the markup-related metadata out of the paragraph, you can add links without interrupting the narrative flow of your prose.

Emphasis

Markdown treats asterisks (*) and underscores (_) as indicators of emphasis. Text wrapped with one * or _ will be wrapped with an HTML <em> tag; double *'s or _'s will be wrapped with an HTML <strong> tag. E.g., this input:

*single asterisks*

_single underscores_

**double asterisks**

__double underscores__

will produce:

<em>single asterisks</em>

<em>single underscores</em>

<strong>double asterisks</strong>

<strong>double underscores</strong>

You can use whichever style you prefer; the lone restriction is that the same character must be used to open and close an emphasis span.

Emphasis can be used in the middle of a word:

un*frigging*believable

But if you surround an * or _ with spaces, it'll be treated as a literal asterisk or underscore.

To produce a literal asterisk or underscore at a position where it would otherwise be used as an emphasis delimiter, you can backslash escape it:

\*this text is surrounded by literal asterisks\*

Code

To indicate a span of code, wrap it with backtick quotes (`). Unlike a pre-formatted code block, a code span indicates code within a normal paragraph. For example:

Use the `printf()` function.

will produce:

<p>Use the <code>printf()</code> function.</p>

To include a literal backtick character within a code span, you can use multiple backticks as the opening and closing delimiters:

``There is a literal backtick (`) here.``

which will produce this:

<p><code>There is a literal backtick (`) here.</code></p>

The backtick delimiters surrounding a code span may include spaces -- one after the opening, one before the closing. This allows you to place literal backtick characters at the beginning or end of a code span:

A single backtick in a code span: `` ` ``

A backtick-delimited string in a code span: `` `foo` ``

will produce:

<p>A single backtick in a code span: <code>`</code></p>

<p>A backtick-delimited string in a code span: <code>`foo`</code></p>

With a code span, ampersands and angle brackets are encoded as HTML entities automatically, which makes it easy to include example HTML tags. Markdown will turn this:

Please don't use any `<blink>` tags.

into:

<p>Please don't use any <code>&lt;blink&gt;</code> tags.</p>

You can write this:

`&#8212;` is the decimal-encoded equivalent of `&mdash;`.

to produce:

<p><code>&amp;#8212;</code> is the decimal-encoded
equivalent of <code>&amp;mdash;</code>.</p>

Images

Admittedly, it's fairly difficult to devise a "natural" syntax for placing images into a plain text document format.

Markdown uses an image syntax that is intended to resemble the syntax for links, allowing for two styles: inline and reference.

Inline image syntax looks like this:

![Alt text](/path/to/img.jpg)

![Alt text](/path/to/img.jpg "Optional title")

That is:

  • An exclamation mark: !;
  • followed by a set of square brackets, containing the alt attribute text for the image;
  • followed by a set of parentheses, containing the URL or path to the image, and an optional title attribute enclosed in double or single quotes.

Reference-style image syntax looks like this:

![Alt text][id]

Where "id" is the name of a defined image reference. Image references are defined using syntax identical to link references:

[id]: url/to/image  "Optional title attribute"

As of this writing, Markdown has no syntax for specifying the dimensions of an image; if this is important to you, you can simply use regular HTML <img> tags.


Miscellaneous

Markdown supports a shortcut style for creating "automatic" links for URLs and email addresses: simply surround the URL or email address with angle brackets. What this means is that if you want to show the actual text of a URL or email address, and also have it be a clickable link, you can do this:

<http://example.com/>

Markdown will turn this into:

<a href="http://example.com/">http://example.com/</a>

Automatic links for email addresses work similarly, except that Markdown will also perform a bit of randomized decimal and hex entity-encoding to help obscure your address from address-harvesting spambots. For example, Markdown will turn this:

<address@example.com>

into something like this:

<a href="&#x6D;&#x61;i&#x6C;&#x74;&#x6F;:&#x61;&#x64;&#x64;&#x72;&#x65;
&#115;&#115;&#64;&#101;&#120;&#x61;&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;
&#109;">&#x61;&#x64;&#x64;&#x72;&#x65;&#115;&#115;&#64;&#101;&#120;&#x61;
&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;&#109;</a>

which will render in a browser as a clickable link to "address@example.com".

(This sort of entity-encoding trick will indeed fool many, if not most, address-harvesting bots, but it definitely won't fool all of them. It's better than nothing, but an address published in this way will probably eventually start receiving spam.)

Backslash Escapes

Markdown allows you to use backslash escapes to generate literal characters which would otherwise have special meaning in Markdown's formatting syntax. For example, if you wanted to surround a word with literal asterisks (instead of an HTML <em> tag), you can use backslashes before the asterisks, like this:

\*literal asterisks\*

Markdown provides backslash escapes for the following characters:

\   backslash
`   backtick
*   asterisk
_   underscore
{}  curly braces
[]  square brackets
()  parentheses
#   hash mark
+   plus sign
-   minus sign (hyphen)
.   dot
!   exclamation mark

使用 BootCDN 提供的免费 CDN 加速服务(同时支持 http 和 https 协议)

Bootstrap 中文网 联合 又拍云 共同为 Bootstrap 专门构建了免费的 CDN 加速服务,访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。BootCDN 还对大量的前端开源工具库提供了 CDN 加速服务,请进入BootCDN 主页查看更多可用的工具库。

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
                            <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

                            <!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
                            <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

                            <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
                            <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

通过 Bower 进行安装

还可以通过 Bower 安装并管理 Bootstrap 的 Less、CSS、JavaScript 和字体文件。

$ bower install bootstrap

通过 npm 进行安装

你还可以利用 npm 工具来安装 Bootstrap:

$ npm install bootstrap@3

require('bootstrap') 代码的作用是加载 Bootstrap 的所有 jQuery 插件。其中,bootstrap 模块自身并不导出任何内容。你可以通过加载安装包顶级目录下的 /js/*.js 文件的方式手动加载单个的 Bootstrap 插件。

Bootstrap 的 package.json 文件包含了一些额外的元数据:

  • less - Bootstrap 源码的入口 Less 文件的路径
  • style - Bootstrap 的未压缩 CSS 文件的路径

通过 Composer 进行安装

通过 Composer (中文官网:Composer 中文网)也可以安装 Bootstrap 安装包,其中包括 Less、CSS、JavaScript 和 fonts 文件:

$ composer require twbs/bootstrap

编译 Less/Sass 源码需要注意的事项

Bootstrap 利用 Autoprefixer 自动为 某些 CSS 属性添加针对特定厂商的前缀。如果你是从 Less/Sass 源码编译 Bootstrap 的,并且没有使用 Bootstrap 自带的 Gruntfile 文件,那你就必须将 Autoprefixer 集成到你的编译工具和编译过程中。如果你使用的是我们预先编译好的 Bootstrap 文件或者使用的是我们提供的 Gruntfile 文件,那就无需操心了,我们已经将这些工作替你搞定了。

包含的内容

Bootstrap 提供了两种形式的压缩包,在下载下来的压缩包内可以看到以下目录和文件,这些文件按照类别放到了不同的目录内,并且提供了压缩与未压缩两种版本。

Bootstrap 插件全部依赖 jQuery

请注意,Bootstrap 的所有 JavaScript 插件都依赖 jQuery,因此 jQuery 必须在 Bootstrap 之前引入,就像在基本模版中所展示的一样。在 bower.json 文件中 列出了 Bootstrap 所支持的 jQuery 版本。

预编译版

下载压缩包之后,将其解压缩到任意目录即可看到以下(压缩版的)目录结构:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

上面展示的就是 Bootstrap 的基本文件结构:预编译文件可以直接使用到任何 web 项目中。我们提供了编译好的 CSS 和 JS (bootstrap.*) 文件,还有经过压缩的 CSS 和 JS (bootstrap.min.*) 文件。同时还提供了 CSS 源码映射表 (bootstrap.*.map) ,可以在某些浏览器的开发工具中使用。同时还包含了来自 Glyphicons 的图标字体,在附带的 Bootstrap 主题中使用到了这些图标。

Bootstrap 源码

Bootstrap 源码包含了预先编译的 CSS、JavaScript 和图标字体文件,并且还有 LESS、JavaScript 和文档的源码。具体来说,主要文件组织结构如下:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
└── examples/

less/js/fonts/ 目录分别包含了 CSS、JS 和字体图标的源码。dist/ 目录包含了上面所说的预编译 Bootstrap 包内的所有文件。docs/ 包含了所有文档的源码文件,examples/ 目录是 Bootstrap 官方提供的实例工程。除了这些,其他文件还包含 Bootstrap 安装包的定义文件、许可证文件和编译脚本等。

编译 CSS 和 JavaScript 文件

Bootstrap 使用 Grunt 作为编译系统,并且对外提供了一些方便的方法用于编译整个框架。下面讲解的就是如何编译源码、运行测试用例等内容。

安装 Grunt

安装 Grunt 前,你需要首先下载并安装 node.js (npm 已经包含在内)。npm 是 node packaged modules 的简称,它的作用是基于 node.js 管理扩展包之间的依赖关系。

然后在命令行中输入以下命令:
  1. 在全局环境中安装 grunt-clinpm install -g grunt-cli
  2. 进入 /bootstrap/ 根目录,然后执行 npm install 命令。npm 将读取 package.json 文件并自动安装此文件中列出的所有被依赖的扩展包。

上述步骤完成后,你就可以运行 Bootstrap 所提供的各个 Grunt 命令了。

可用的 Grunt 命令

grunt dist (仅编译 CSS 和 JavaScript 文件)

重新生成 /dist/ 目录,并将编译压缩后的 CSS 和 JavaScript 文件放入这个目录中。作为一名 Bootstrap 用户,大部分情况下你只需要执行这一个命令。

grunt watch (监测文件的改变,并运行指定的 Grunt 任务)

监测 Less 源码文件的改变,并自动重新将其编译为 CSS 文件。

grunt test (运行测试用例)

PhantomJS 环境中运行 JSHintQUnit 自动化测试用例。

grunt docs (编译并测试文档中的资源文件)

编译并测试 CSS、JavaScript 和其他资源文件。在本地环境下通过 bundle exec jekyll serve 运行 Bootstrap 文档时需要用到这些资源文件。

grunt (重新构建所有内容并运行测试用例)

编译并压缩 CSS 和 JavaScript 文件、构建文档站点、对文档做 HTML5 校验、重新生成定制工具所需的资源文件等,都需要 Jekyll 工具。这些只有在你对 Bootstrap 深度研究时才有用。

除错

如果你在安装依赖包或者运行 Grunt 命令时遇到了问题,请首先删除 npm 自动生成的 /node_modules/ 目录,然后,再次运行 npm install 命令。

社区

Bootstrap 有成熟、强大的社区。如果你希望随时获取 Bootstrap 的最新消息,请关注以下社区资源。

  • 阅读并订阅 Bootstrap 官方博客
  • 通过 IRC (irc.freenode.net 服务器)与其他 Bootstrap 粉丝交流,我们在 ##bootstrap 频道
  • 如果使用 Bootstrap 过程中遇到问题,请在 StackOverflow 上交流。请搜索 twitter-bootstrap-3 关键词。
  • 对于为 Bootstrap 修改或添加功能的开发者,如果需要将自己修改的版本发布到 npm 或其他分发渠道时,应当为自己的包添加 bootstrap 关键字,以便大家能够通过关键字了解你所发布的东西。
  • 参观其他同学基于 Bootstrap 构建的网站,请进这里:Bootstrap 优站精选.

你还可以在 Twitter 上关注英文官方账号 @getbootstrap ,这里有最新的八卦和有趣的视频。( :( 原来和技术不沾边啊!)

中国用户请关注我们的官方微博账号:@Bootstrap中文网。我们定期分享新技术和新资讯。

文档翻译

我们的社区成员已经将 Bootstrap 文档翻译成多种语言版本,请根据你的语言习惯选择自己母语版本的文档做参考。

Bootstrap 官方不托管各翻译版本的文档,如遇问题,请联系相应的维护人员。

如果你发现 Bootstrap 中文文档中存在的问题,请发送邮件至:admin@bootcss.com