githab
/
bootstrap-table


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title data-zh="开始使用 &middot; Bootstrap Table">Getting started &middot; Bootstrap Table</title>
    <meta name="author" content="zhixin">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/bulletin/bulletin.css">
    <link rel="stylesheet" href="../src/bootstrap-table.css">
    <link rel="stylesheet" href="docs.css">
    <!--<link rel="stylesheet" href="//wenzhixin.net.cn/css/fork.css">-->
    <!--[if lt IE 9]>
    <script src="//wenzhixin.net.cn/js/html5shiv.js"></script>
    <script src="//wenzhixin.net.cn/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<a class="sr-only" href="#content">Skip to main content</a>

<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
    <div class="container">
        <button class="navbar-toggle" type="button" data-toggle="collapse"
                data-target=".bs-navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <div class="navbar-header">
            <a class="navbar-brand" href="index.html">
                Bootstrap Table
            </a>
        </div>
        <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="getting-started.html" data-zh="开始使用">Getting started</a>
                </li>
                <li>
                    <a href="documentation.html" data-zh="文档">Documentation</a>
                </li>
                <li>
                    <a href="examples.html" data-zh="例子">Examples</a>
                </li>
                <!-- Localization -->
                <li id="locale" class="">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <img src="blank.gif" class="flag flag-en">
                        <span class="language">English</span> <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="active" data-locale="en">
                            <a href="javascript:void(0)">
                                <img src="blank.gif" class="flag flag-en" alt="United States"> English
                            </a>
                        <li data-locale="zh">
                            <a href="javascript:void(0)">
                                <img src="blank.gif" class="flag flag-zh" alt="China"> 简体中文
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <!-- GitHub buttons: see http://ghbtns.com -->
                <li><iframe class="navbar-text" src="http://ghbtns.com/github-btn.html?user=wenzhixin&repo=bootstrap-table&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe></li>
                <li><iframe class="navbar-text" src="http://ghbtns.com/github-btn.html?user=wenzhixin&repo=bootstrap-table&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe></li>
                <li><iframe class="navbar-text" src="http://ghbtns.com/github-btn.html?user=wenzhixin&type=follow&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="175" height="20"></iframe></li>
            </ul>
        </nav>
    </div>
</header>

<div class="bs-header" id="content">
    <div class="container">
        <h1 data-zh="开始使用">Getting started</h1>
        <p data-zh="Bootstrap Table的简单介绍，例如如何下载和使用，基本的模板等等。">An overview of Bootstrap Table, how to download and use, basic templates, and more.</p>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="bs-sidebar" role="complementary">
                <ul class="nav bs-sidenav">
                    <li>Loading...</li>
                </ul>
            </div>
        </div>
        <div class="col-md-9" role="main">
            <div class="page-header alert alert-info">
                <a class="close" data-dismiss="alert" href="#" aria-hidden="true">&times;</a>
                <b data-zh="注意：">NOTE:</b> <span data-zh="Bootstrap Table 是基于 <a href='https://github.com/wenzhixin/bootstrap-table/blob/master/LICENSE'>The MIT License</a> 的开源项目，你可以任意的使用和修改这个插件。假如您觉得这个开源项目对你有帮助，麻烦给这个项目加颗星（<a href='http://github.com/wenzhixin/bootstrap-table'><b>Star</b></a>），您的支持是我最大的动力，谢谢。">Bootstrap Table is licensed under the <a href="https://github.com/wenzhixin/bootstrap-table/blob/master/LICENSE">The MIT License</a>. Completely free, you can arbitrarily use and modify this plugin. If this plugin is useful to you, you can <a href="http://github.com/wenzhixin/bootstrap-table"><b>Star</b></a> this repo, your support is my biggest motive force, thanks.</span>
            </div>
            <div>
                <div class="page-header">
                    <h1 id="download" data-zh="下载">Download</h1>
                </div>
                <p>
                    <a href="https://github.com/wenzhixin/bootstrap-table/archive/master.zip" data-zh="下载源代码">Download source</a>
                </p>
                <p>
                    <a href="https://github.com/wenzhixin/bootstrap-table" data-zh="通过GitHub克隆或者建立分支">Clone or fork via GitHub</a>
                </p>
            </div>
            <div>
                <div class="page-header">
                    <h1 id="usage" data-zh="使用">Usage</h1>
                </div>
                <p data-zh="在html页面的head标签中引入Bootstrap库（假如你的项目还没使用）和bootstrap-table.css。">Include Bootstrap library (if your project doesn't use it already) and bootstrap-table.css in the head tag your html document.</p>
<pre><code>&lt;link rel="stylesheet" href="bootstrap.css"&gt;
&lt;link rel="stylesheet" href="bootstrap-table.css"&gt;</code></pre>
                <p data-zh="在head标签或者在body标签闭合前（比较推荐）引入jQuery库（假如你的项目还没使用）和bootstrap-table.js。">Include jQuery library (if your project doesn’t use it already) and bootstrap-table.js in the head tag or at the very bottom of your document, just before the closing body tag (usually recommended for better performance).</p>
<pre><code>&lt;script src="jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="bootstrap-table.js"&gt;&lt;/script&gt;</code></pre>

                <hr>
                <p data-zh="Bootstrap Table通过data属性标签或者JavaScript来显示表格数据。">The Bootstrap Table plugin displays data in a tabular format, via data attributes or JavaScript.</p>

                <div class="page-header">
                    <h2 id="via-data" data-zh="通过data属性标签">Via data attributes</h2>
                </div>
                <p data-zh='在一个普通的表格中设置data-toggle="table"可以在不写JavaScript的情况下启用Bootstrap Table。'>Activate bootstrap table without writing JavaScript. Set data-toggle="table" on a normal table.</p>
<pre><code>&lt;table data-toggle="table" data-url="data.json"&gt;
    &lt;thead&gt;
        ...
    &lt;/thead&gt;
&lt;/table&gt;</code></pre>

                <div class="page-header">
                    <h2 id="via-javascript" data-zh="通过JavaScript">Via JavaScript</h2>
                </div>
                <p data-zh="通过JavaScript来启用带有id属性的Table。">Call a bootstrap table with id table with JavaScript.</p>
<pre><code>$('#table').bootstrapTable({
    url: 'data.json'
});</code></pre>

                <div class="page-header">
                    <h2 id="options" data-zh="属性">Options</h2>
                </div>
                <p data-zh='属性设置可以通过data属性标签或者JavaScript。对于data属性标签，增加<code>data-</code>到html标签即可，例如<code>data-url="data.json"</code>。更多的属性设置查看<a href="documentation.html">文档</a> 或者 <a href="examples.html">例子</a>。'>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-url="data.json"</code>. More options see the <a href="documentation.html">Documentation</a> or the <a href="examples.html">Examples</a>.</p>
            </div>
        </div>
    </div>
</div>

<!--<a href="https://github.com/wenzhixin/bootstrap-table" class="fork_me"></a>-->

<footer class="bs-footer" role="contentinfo">
    <div class="container">
        <p>Copyright © 2012-2014, Bootstrap Table is licensed under the The MIT License. Coded by wenzhixin. </p>
        <ul class="footer-links">
            <li>Currently: v1.2.2</li>
            <li class="muted">·</li>
            <li><a href="http://wenzhixin.net.cn">My website</a></li>
            <li class="muted">·</li>
            <li><a href="http://repos.wenzhixin.net.cn">My repos</a></li>
            <li class="muted">·</li>
            <li><a href="https://github.com/wenzhixin">Github (@wenzhixin)</a></li>
            <li class="muted">·</li>
            <li><a href="https://github.com/wenzhixin/bootstrap-table/issues?state=open">Issues</a></li>
            <li class="muted">·</li>
            <li><a href="mailto:wenzhixin2010@gmail.com">Email</a></li>
        </ul>
    </div>
</footer>

<div class="goto-top">
    <i class="glyphicon glyphicon-plane"></i>
</div>

<div id="bulletin" class="bulletin">
    <ul>
        <li><a href="http://repos.wenzhixin.net.cn/">My Repositories - Show my repositories list.</a></li>
        <li><a href="http://wenzhixin.net.cn/p/multiple-select/">Multiple Select - Multiple select is a jQuery plugin to select multiple elements with checkboxes.</a></li>
        <li><a href="https://github.com/wenzhixin/bootstrap-show-password">Bootstrap Show Password - Show/hide password plugin for bootstrap.</a></li>
        <li><a href="http://wenzhixin.net.cn/p/bulletin/">Bulletin - A jQuery plugin to show bulletin for website.</a></li>
    </ul>
    <div class="close"><a href="javascript:void(0)">×</a></div>
</div>

<script src="assets/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/bulletin/jquery.bulletin.js"></script>
<script src="../src/bootstrap-table.js"></script>
<script src="common.js"></script>
<script src="//wenzhixin.net.cn/js/analytics.js"></script>
<!-- Baidu share -->
<script id="bdshare_js" data="type=slide&amp;img=6&amp;pos=right&amp;uid=6692400"></script>
<script id="bdshell_js"></script>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-53c78e93678a7b4d"></script>
</body>
</html>