bootpress/bootstrap

创建Bootstrap栅格、表格、表单、按钮、下拉菜单、分组、导航、面包屑、分页、面板、手风琴、轮播等，无需触碰一个div！

维护者

详细信息

github.com/Kylob/Bootstrap

主页

源代码

问题

安装: 586

依赖项: 1

建议者: 0

安全: 0

星标: 0

关注者: 2

分支: 0

开放问题: 0

v1.1 2017-01-03 22:53 UTC

Requires

Requires (Dev)

MIT c009a151f9f0dd325a702437372b2b34675909f6

  • Kyle Gadd <kyle.gadd.woop@gmail.com>

frameworkcssbootstrapbootstrap3bootpress

This package is not auto-updated.

Last update: 2024-09-14 19:36:52 UTC

README

Packagist License MIT HHVM Tested PHP 7 Supported Build Status Code Climate Test Coverage

Bootstrap组件允许您轻松生成Bootstrap表格、导航、分页、按钮、下拉菜单、手风琴、轮播等。您所需要的任何功能，无需触碰一个div！当然，如果您喜欢详细说明，那么这个类可能就没有必要了。它仅仅是为了帮助您的代码更易读、易于更新且更少出错。

安装

将以下内容添加到您的 composer.json 文件中。

{
    "require": {
        "bootpress/bootstrap": "^1.0"
    }
}

示例用法

<?php

use BootPress\Bootstrap\v3\Component as Bootstrap;

$bp = new Bootstrap;

// Use in your BootPress Blog's Twig templates as well:
$blog = new \BootPress\Blog\Component();
$blog->theme->vars['bp'] = $bp;

一行代码胜过千言万语，所以在这里描述一切可能不是最好的方式。PHP和Twig示例将输出HTML。

CSS

栅格系统

PHP

echo $bp->row('sm', array(
    $bp->col(3, 'left'),
    $bp->col(6, 'center'),
    $bp->col(3, 'right'),
));

echo $bp->row('sm', 'md', 'lg', array(
    $bp->col(12, '9 push-3', '10 push-2', 'content'),
    $bp->col('6 offset-3 clearfix', '3 pull-9', '2 pull-10', 'sidebar'),
));

Twig

{{ bp.row('sm', [
    bp.col(3, 'left'),
    bp.col(6, 'center'),
    bp.col(3, 'right'),
]) }}

{{  bp.row('sm', 'md', 'lg', [
    bp.col(12, '9 push-3', '10 push-2', 'content'),
    bp.col('6 offset-3 clearfix', '3 pull-9', '2 pull-10', 'sidebar'),
]) }}

HTML

<div class="row">
    <div class="col-sm-3">left</div>
    <div class="col-sm-6">center</div>
    <div class="col-sm-3">right</div>
</div>

<div class="row">
    <div class="col-sm-12 col-md-9 col-md-push-3 col-lg-10 col-lg-push-2">content</div>
    <div class="col-sm-6 col-sm-offset-3 clearfix col-md-3 col-md-pull-9 col-lg-2 col-lg-pull-10">sidebar</div>
</div>

列表

PHP

echo $bp->lister('ol', array(
    'Coffee',
    'Tea' => array(
        'Black tea',
        'Green tea',
    ),
    'Milk',
));

echo $bp->lister('ul list-inline', array(
    'Coffee',
    'Tea',
    'Milk',
));

echo $bp->lister('dl dl-horizontal', array(
    'Coffee' => array(
        'Black hot drink',
        'Caffeinated beverage',
    ),
    'Milk' => 'White cold drink',
));

Twig

{{ bp.lister('ol', [
    'Coffee',
    'Tea': [
        'Black tea',
        'Green tea',
    ],
    'Milk',
]) }}

{{ bp.lister('ul list-inline', [
    'Coffee',
    'Tea',
    'Milk',
]) }}

{{ bp.lister('dl dl-horizontal', [
    'Coffee': [
        'Black hot drink',
        'Caffeinated beverage',
    ],
    'Milk': 'White cold drink',
]) }}

HTML

<ol>
    <li>Coffee</li>
    <li>Tea
        <ol>
            <li>Black tea</li>
            <li>Green tea</li>
        </ol>
    </li>
    <li>Milk</li>
</ol>

<ul class="list-inline">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

<dl class="dl-horizontal">
    <dt>Coffee</dt>
        <dd>Black hot drink</dd>
        <dd>Caffeinated beverage</dd>
    <dt>Milk</dt>
        <dd>White cold drink</dd>
</dl>

表格

PHP

echo $bp->table->open('class=responsive striped');
    echo $bp->table->head();
    echo $bp->table->cell('', 'One');
    echo $bp->table->row();
    echo $bp->table->cell('', 'Two');
    echo $bp->table->foot();
    echo $bp->table->cell('', 'Three');
echo $bp->table->close();

Twig

{{ bp.table.open('class=responsive striped') }}
    {{ bp.table.head() }}
    {{ bp.table.cell('', 'One') }}
    {{ bp.table.row() }}
    {{ bp.table.cell('', 'Two') }}
    {{ bp.table.foot() }}
    {{ bp.table.cell('', 'Three') }}
{{ bp.table.close() }}

HTML

<table class="table table-responsive table-striped">
    <thead>
        <tr>
            <th>One</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Two</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Three</td>
        </tr>
    </tfoot>
</table>

表单

PHP

$form = $bp->form('sign_in');

$form->menu('remember', array('Y' => 'Remember me'));

$form->validator->set(array(
    'email' => 'required|email',
    'password' => 'required|minLength[5]|noWhiteSpace',
    'remember' => 'yesNo',
));

if ($vars = $form->validator->certified()) {
    $form->message('info', 'Good job, you are doing great!');
    $form->eject();
}

$form->size('lg'); // oversize the inputs
$form->align('collapse'); // default is horizontal

echo $form->header();
echo $form->fieldset('Sign In', array(
    $form->field('Email address', $form->group($bp->icon('user'), '', $form->text('email'))),
    $form->field('Password', $form->group($bp->icon('lock'), '', $form->password('password'))),
    $form->field('', $form->checkbox('remember'),
    $form->submit(),
));
echo $form->close();

Twig

{% set form = bp.form('sign_in') %}

{{ form.menu('remember', ['Y':'Remember me']) }}

{{ form.validator.set([
    'email': 'required|email',
    'password': 'required|minLength[5]|noWhiteSpace',
    'remember': 'yesNo',
]) }}

{% set vars = form.validator.certified() %}
{% if vars %}
    {{ form.message('info', 'Good job, you are doing great!') }}
    {{ form.eject() }}
{% endif %}

{{ form.size('lg') }}
{{ form.align('collapse') }}

{{ form.header() }}
{{ form.fieldset('Sign In', [
    form.field('Email address', form.group(bp.icon('user'), '', form.text('email'))),
    form.field('Password', form.group(bp.icon('lock'), '', form.password('password'))),
    form.field('', form.checkbox('remember')),
    form.submit(),
]) }}
{{ form.close() }}

HTML

<form name="sign_in" method="post" action="http://example.com?submitted=sign_in" accept-charset="utf-8" autocomplete="off">
    <fieldset><legend>Sign In</legend>
        <div class="form-group">
            <label class="input-lg" for="emailI">Email address</label>
            <p class="validation help-block" style="display:none;"></p>
            <div class="input-group input-group-lg">
                <div class="input-group-addon">
                    <span class="glyphicon glyphicon-user"></span>
                </div>
                <input type="text" name="email" id="emailI" data-rule-required="true" data-rule-email="true" class="form-control input-lg">
            </div>
        </div>
        <div class="form-group">
            <label class="input-lg" for="passwordII">Password</label>
            <p class="validation help-block" style="display:none;"></p>
            <div class="input-group input-group-lg">
                <div class="input-group-addon">
                    <span class="glyphicon glyphicon-lock"></span>
                </div>
                <input type="password" name="password" id="passwordII" data-rule-required="true" data-rule-minlength="5" data-rule-nowhitespace="true" class="form-control input-lg">
            </div>
        </div>
        <div class="form-group">
            <p class="validation help-block" style="display:none;"></p>
            <div class="checkbox input-lg">
                <label><input type="checkbox" name="remember" value="Y"> Remember me</label>
            </div>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-primary btn-lg" data-loading-text="Submitting...">Submit</button>
        </div>
    </fieldset>
</form>

按钮

PHP

echo $bp->button('primary', 'Primary');

echo $bp->button('lg success', 'Link', array('href'=>'#'));

echo $bp->button('link', 'Button');

Twig

{{ bp.button('primary', 'Primary') }}

{{ bp.button('lg success', 'Link', ['href':'#']) }}

{{ bp.button('link', 'Button') }}

HTML

<button type="button" class="btn btn-primary">Primary</button>

<a href="#" class="btn btn-lg btn-success">Link</a>

<button type="button" class="btn btn-link">Button</button>

组件

按钮下拉菜单

PHP

echo $bp->button('default', 'Dropdown', array(
    'dropdown' => array(
        'Header',
        'Action' => '#',
        'Another action' => '#',
        'Active link' => '#', 
        '',
        'Separated link' => '#',
        'Disabled link' => '#',
    ),
    'active' => 'Active link',
    'disabled' => 'Disabled link',
));

Twig

{{ bp.button('default', 'Dropdown', [
    'dropdown': [
        'Header',
        'Action': '#',
        'Another action': '#',
        'Active link': '#',
        '',
        'Separated link': '#',
        'Disabled link': '#',
    ],
    'active': 'Active link',
    'disabled': 'Disabled link',
]) }}

HTML

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" id="dropdownI" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></button>
    <ul class="dropdown-menu" aria-labelledby="dropdownI">
        <li role="presentation" class="dropdown-header">Header</li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
        <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">Active link</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
        <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
    </ul>
</div>

按钮分组

PHP

echo $bp->group('', array(
    $bp->button('default', 'Left'),
    $bp->button('default', 'Middle'),
    $bp->button('default', array('split'=>'Right'), array(
        'dropdown' => array(
            'Works' => '#',
            'Here' => '#',
            'Too' => '#',
        ),
        'pull'=>'right',
    )),
));

Twig

{{ bp.group('', [
    bp.button('default', 'Left'),
    bp.button('default', 'Middle'),
    bp.button('default', ['split':'Right'], [
        'dropdown': [
            'Works': '#',
            'Here': '#',
            'Too': '#',
        ],
        'pull': 'right',
    ]),
]) }}

HTML

<div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <div class="btn-group">
        <button type="button" class="btn btn-default">Right</button>
        <button type="button" class="btn btn-default dropdown-toggle" id="dropdownI" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span> <span class="sr-only">Toggle Dropdown</span></button>
        <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownI">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Works</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Here</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Too</a></li>
        </ul>
    </div>
</div>

标签页

PHP

echo $bp->tabs(array(
    'Nav' => '#',
    'Tabs' => '#',
    'Justified' => '#',
), array(
    'align' => 'justified',
    'active' => 1,
));

Twig

{{ bp.tabs([
    'Nav': '#',
    'Tabs': '#',
    'Justified': '#',
], [
    'align': 'justified',
    'active': 1,
]) }}

HTML

<ul class="nav nav-tabs nav-justified">
    <li role="presentation" class="active"><a href="#">Nav</a></li>
    <li role="presentation"><a href="#">Tabs</a></li>
    <li role="presentation"><a href="#">Justified</a></li>
</ul>

药丸

PHP

echo $bp->pills(array(
    'Home ' . $bp->badge(42) => '#',
    'Profile' . $bp->badge(0) => '#',
    'Messages' . $bp->badge(3) => array(
        'New! ' . $bp->badge(1) => '#',
        'Read ' => '#',
        'Trashed ' => '#',
        '',
        'Spam ' . $bp->badge(2) => '#',
    ),
), array(
    'active' => 'Home',
));

Twig

{{ bp.pills([
    'Home ' ~ bp.badge(42): '#',
    'Profile ' ~ bp.badge(0): '#',
    'Messages ' ~ bp.badge(3): [
        'New! ' ~ bp.badge(1): '#',
        'Read ': '#',
        'Trashed ': '#',
        '',
        'Spam ' ~ bp.badge(2): '#',
    ],
], [
    'active': 'Home',
]) }}

HTML

<ul class="nav nav-pills">
    <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
    <li role="presentation"><a href="#">Profile <span class="badge"></span></a></li>
    <li class="dropdown"><a id="dropdownI" data-target="#" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Messages <span class="badge">3</span> <span class="caret"></span></a> 
        <ul class="dropdown-menu" aria-labelledby="dropdownI">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">New! <span class="badge">1</span></a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Read </a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Trashed </a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Spam <span class="badge">2</span></a></li>
        </ul>
    </li>
</ul>

导航栏

PHP

echo $bp->navbar->open(array('Website' => 'http://example.com'));
    
    echo $bp->navbar->menu(array(
        'Home' => '#',
        'Work' => '#',
        'Dropdown' => array(
            'Action' => '#',
            'More' => '#',
        ),
    ), array(
        'active' => 'Home',
    ));

    echo $bp->navbar->button('primary', 'Sign In', array(
        'pull' => 'right',
    ));

    echo $bp->navbar->search('http://example.com', array(
        'button' => false,
    ));
    
echo $bp->navbar->close();

Twig

{{ bp.navbar.open(['Website':'http://example.com']) }}

    {{ bp.navbar.menu([
        'Home': '#',
        'Work': '#',
        'Dropdown': [
            'Action': '#',
            'More': '#',
        ],
    ], [
        'active': 'Home',
    ]) }}

    {{ bp.navbar.button('primary', 'Sign In', [
        'pull': 'right',
    ]) }}

    {{ bp.navbar.search('http://example.com', [
        'button': false,
    ]) }}

{{ bp.navbar.close() }}

HTML

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarI">
                <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="http://example.com">Website</a>
            
        </div>
        <div class="collapse navbar-collapse" id="navbarI">
        
            <ul class="nav navbar-nav">
                <li role="presentation" class="active"><a href="#">Home</a></li>
                <li role="presentation"><a href="#">Work</a></li>
                <li class="dropdown">
                    <a id="dropdownII" data-target="#" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu" aria-labelledby="dropdownII">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">More</a></li>
                    </ul>
                </li>
            </ul>
            
            <button type="button" class="btn btn-primary navbar-btn navbar-right">Sign In</button>
            
            <form name="search" method="get" action="http://example.com" accept-charset="utf-8" autocomplete="off" role="search" class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="Search" name="search" id="searchIII" data-rule-required="true">
            </form>
            
        </div>
    </div>
</nav>

面包屑

PHP

$bp->breadcrumbs(array(
    'Home' => '#',
    'Library' => '#',
    'Data' => '#',
));

Twig

{{ bp.breadcrumbs([
    'Home': '#',
    'Library': '#',
    'Data': '#',
]) }}

HTML

<ul class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="active">Data</li>
</ul>

分页

PHP

$records = range(1, 100);

if (!$bp->pagination->set('page', 10, 'http://example.com')) {
    $bp->pagination->total(count($records));
}

echo $pagination->links();

echo $pagination->pager();

Twig

{% set records = range(1, 100) %}

{% if not bp.pagination.set('page', '10', 'http://example.com') %}
    {{ bp.pagination.total(records|length) }}
{% endif %}

{{ bp.pagination.links() }}

{{ bp.pagination.pager() }}

HTML

<ul class="pagination">
	<li class="active"><span>1</span></li>
	<li><a href="http://example.com?page=2of10">2</a></li>
	<li><a href="http://example.com?page=3of10">3</a></li>
	<li><a href="http://example.com?page=4of10">4</a></li>
	<li><a href="http://example.com?page=5of10">5</a></li>
	<li><a href="http://example.com?page=6of10">6</a></li>
	<li><a href="http://example.com?page=7of10">7</a></li>
	<li class="disabled"><span>&hellip;</span></li>
	<li><a href="http://example.com?page=10of10">10</a></li>
	<li><a href="http://example.com?page=2of10">&raquo;</a></li>
</ul>

<ul class="pager">
    <li class="next"><a href="http://example.com?page=2of10">Next &raquo;</a></li>
</ul>

标签

PHP

echo $bp->label('default', 'New');

Twig

{{ bp.label('default', 'New') }}

HTML

<span class="label label-default">New</span>

徽章

PHP

echo $bp->badge(13, 'right');

Twig

{{ bp.badge(13, 'right') }}

HTML

<span class="badge pull-right">13</span>

警告

PHP

echo $bp->alert('info', '<h3>Heads up!</h3> This alert needs your attention, but it\'s not <a href="#">super important</a>.');

echo $bp->alert('danger', '<h3>Oh snap!</h3> Change a few things up and <a href="#">try submitting again</a>.', false);

Twig

{{ bp.alert('info', '<h3>Heads up!</h3> This alert needs your attention, but it\'s not <a href="#">super important</a>.') }}

{{ bp.alert('danger', '<h3>Oh snap!</h3> Change a few things up and <a href="#">try submitting again</a>.', false) }}

HTML

<div class="alert alert-info alert-dismissable" role="alert">
    <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>
    <h3 class="alert-heading">Heads up!</h3> This alert needs your attention, but it's not <a href="#" class="alert-link">super important</a>.
</div>

<div class="alert alert-danger" role="alert">
    <h3 class="alert-heading">Oh snap!</h3> Change a few things up and <a href="#" class="alert-link">try submitting again</a>.
</div>

进度条

PHP

echo $bp->progress(60, 'info', 'display');

echo $bp->progress(array(25, 25, 25, 25), array('', 'warning', 'success', 'danger striped'));

Twig

{{ bp.progress(60, 'info', 'display') }}

{{ bp.progress([25, 25, 25, 25], ['', 'warning', 'success', 'danger striped']) }}

HTML

<div class="progress">
    <div class="progress-bar progress-bar-info" style="width:60%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div>
</div>

<div class="progress">
    <div class="progress-bar" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        <span class="sr-only">25% Complete</span>
    </div>
    <div class="progress-bar progress-bar-warning" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        <span class="sr-only">25% Complete</span>
    </div>
    <div class="progress-bar progress-bar-success" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        <span class="sr-only">25% Complete</span>
    </div>
    <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        <span class="sr-only">25% Complete</span>
    </div>
</div>

媒体对象

PHP

echo $bp->media(array(
    'Image',
    '<h1>Parent</h1> <p>Paragraph</p>',
    '<img src="parent.jpg" alt="Family Photo">',
    array(
        'Image',
        '<h2>1st Child</h2>',
        array(
            'Image',
            '<h3>1st Grandchild</h3>',
        ),
    ),
    array(
        'Image',
        '<h2>2nd Child</h2>',
    ),
), array(
    'class' => 'spoiled',
    'Image',
    '<h1>Sibling</h1> <a href="#">Link</a>',
    '<img src="sibling.jpg" alt="Family Photo">',
));

Twig

{{ bp.media([
    'Image',
    '<h1>Parent</h1> <p>Paragraph</p>',
    '<img src="parent.jpg" alt="Family Photo">',
    [
        'Image',
        '<h2>1st Child</h2>',
        [
            'Image',
            '<h3>1st Grandchild</h3>',
        ],
    ],
    [
        'Image',
        '<h2>2nd Child</h2>',
    ],
], [
    'class': 'spoiled',
    'Image',
    '<h1>Sibling</h1> <a href="#">Link</a>',
    '<img src="sibling.jpg" alt="Family Photo">',
]) }}

HTML

<div class="media">
    <div class="media-left">Image</div>
    <div class="media-body">
        <h1 class="media-heading">Parent</h1>
        <p>Paragraph</p>
        <div class="media">
            <div class="media-left">Image</div>
            <div class="media-body">
                <h2 class="media-heading">1st Child</h2>
                <div class="media">
                    <div class="media-left">Image</div>
                    <div class="media-body">
                        <h3 class="media-heading">1st Grandchild</h3>
                    </div>
                </div>
            </div>
        </div>
        <div class="media">
            <div class="media-left">Image</div>
            <div class="media-body">
                <h2 class="media-heading">2nd Child</h2>
            </div>
        </div>
    </div>
    <div class="media-right">
        <img src="parent.jpg" alt="Family Photo" class="media-object">
    </div>
</div>
<div class="media spoiled">
    <div class="media-left">Image</div>
    <div class="media-body">
        <h1 class="media-heading">Sibling</h1>
        <a href="#">Link</a>
    </div>
    <div class="media-right">
        <img src="sibling.jpg" alt="Family Photo" class="media-object">
    </div>
</div>

列表组

PHP

$bp->listGroup(array(
    'Basic',
    'List',
    $bp->badge(1) . ' Group',
));

$bp->listGroup(array(
    'Linked' => '#',
    'List' => '#',
    'Group ' . $bp->badge(2) => '#',
), 'Linked');

$bp->listGroup(array(
    '<h4>Custom</h4> <p>List</p>' => '#',
    $bp->badge(3) . ' <h4>Group</h4> <p>Linked</p>' => '#',
), 1);

Twig

{{ bp.listGroup([
    'Basic',
    'List',
    bp.badge(1) ~ ' Group',
]) }}

{{ bp.listGroup([
    'Linked': '#',
    'List': '#',
    'Group ' ~ bp.badge(2): '#',
]) }}

{{ bp.listGroup([
    '<h4>Custom</h4> <p>List</p>': '#',
    bp.badge(3) ~ ' <h4>Group</h4> <p>Linked</p>': '#',
], 1) }}

HTML

<ul class="list-group">
    <li class="list-group-item">Basic</li>
    <li class="list-group-item">List</li>
    <li class="list-group-item"><span class="badge">1</span> Group</li>
</ul>

<div class="list-group">
    <a class="list-group-item" href="#">Linked</a>
    <a class="list-group-item" href="#">List</a>
    <a class="list-group-item" href="#">Group <span class="badge">2</span></a>
</div>

<div class="list-group">
    <a class="list-group-item active" href="#">
        <h4 class="list-group-item-heading">Custom</h4>
        <p class="list-group-item-text">List</p>
    </a>
    <a class="list-group-item" href="#">
        <span class="badge">3</span>
        <h4 class="list-group-item-heading">Group</h4>
        <p class="list-group-item-text">Linked</p>
    </a>
</div>

面板

PHP

echo $bp->panel('primary', array(
    'header' => '<h3>Title</h3>',
    'body' => 'Content',
    'footer' => '<a href="#">Link</a>',
));

echo $bp->panel('default', array(
    'header': 'List group',
    $bp->listGroup(array(
        'One',
        'Two',
        'Three',
    )),
));

Twig

{{ bp.panel('primary', [
    'header': '<h3>Title</h3>',
    'body': 'Content',
    'footer': '<a href="#">Link</a>',
]) }}

{{ bp.panel('default', [
    'header': 'List group',
    bp.listGroup([
        'One',
        'Two',
        'Three',
    ]),
]) }}

HTML

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Title</h3>
    </div>
    <div class="panel-body">Content</div>
    <div class="panel-footer">
        <a href="#">Link</a>
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-heading">List group</div>
    <ul class="list-group">
        <li class="list-group-item">One</li>
        <li class="list-group-item">Two</li>
        <li class="list-group-item">Three</li>
    </ul>
</div>

JavaScript

可切换标签页

PHP

echo $bp->toggle('tabs', array(
    'Home' => 'One',
    'Profile' => 'Two',
    'Dropdown' => array(
        'This' => 'Three',
        'That' => 'Four',
    ),
), array(
    'active' => 'This',
    'fade',
));

Twig

{{ bp.toggle('tabs', [
    'Home': 'One',
    'Profile': 'Two',
    'Dropdown': [
        'This': 'Three',
        'That': 'Four',
    ],
], [
    'active': 'This',
    'fade',
]) }}

HTML

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation"><a href="#tabsI" aria-controls="tabsI" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#tabsII" aria-controls="tabsII" role="tab" data-toggle="tab">Profile</a></li>
    <li class="dropdown active">
        <a id="dropdownV" data-target="#" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu" aria-labelledby="dropdownV">
            <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#tabsIII" data-toggle="tab">This</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#tabsIV" data-toggle="tab">That</a></li>
        </ul>
    </li>
</ul>
<div class="tab-content">
    <div role="tabpanel" class="tab-pane fade" id="tabsI">One</div>
    <div role="tabpanel" class="tab-pane fade" id="tabsII">Two</div>
    <div role="tabpanel" class="tab-pane fade in active" id="tabsIII">Three</div>
    <div role="tabpanel" class="tab-pane fade" id="tabsIV">Four</div>
</div>

手风琴

PHP

echo $bp->accordion('info', array(
    '<h4>Group Item #1</h4>' => 'One',
    '<h4>Group Item #2</h4>' => 'Two',
    '<h4>Group Item #3</h4>' => 'Three',
), 2);

Twig

{{ bp.accordion('info', [
    '<h4>Group Item #1</h4>': 'One',
    '<h4>Group Item #2</h4>': 'Two',
    '<h4>Group Item #3</h4>': 'Three',
], 2) }}

HTML

<div class="panel-group" id="accordionI" role="tablist" aria-multiselectable="true">
    <div class="panel panel-info">
        <div class="panel-heading" role="tab" id="headingII">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordionI" href="#collapseIII" aria-expanded="false" aria-controls="collapseIII">Group Item #1</a>
            </h4>
        </div>
        <div id="collapseIII" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingII">
            <div class="panel-body">One</div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading" role="tab" id="headingIV">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordionI" href="#collapseV" aria-expanded="true" aria-controls="collapseV">Group Item #2</a>
            </h4>
        </div>
        <div id="collapseV" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingIV">
            <div class="panel-body">Two</div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading" role="tab" id="headingVI">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordionI" href="#collapseVII" aria-expanded="false" aria-controls="collapseVII">Group Item #3</a>
            </h4>
        </div>
        <div id="collapseVII" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingVI">
            <div class="panel-body">Three</div>
        </div>
    </div>
</div>

轮播

PHP

echo '<div style="width:500px; height:300px; margin:20px auto;">';
echo $bp->carousel(array(
    '<img src="http://lorempixel.com/500/300/food/1/" width="500" height="300">',
    '<img src="http://lorempixel.com/500/300/food/2/" width="500" height="300">' => '<p>Caption</p>',
    '<img src="http://lorempixel.com/500/300/food/3/" width="500" height="300">' => '<h3>Header</h3>',
), array(
    'interval' => 3000,
));
echo '</div>';

Twig

<div style="width:500px; height:300px; margin:20px auto;">
{{ bp.carousel([
    '<img src="http://lorempixel.com/500/300/food/1/" width="500" height="300">',
    '<img src="http://lorempixel.com/500/300/food/2/" width="500" height="300">': '<p>Caption</p>',
    '<img src="http://lorempixel.com/500/300/food/3/" width="500" height="300">': '<h3>Header</h3>',
], [
    'interval': 3000,
]) }}
</div>

HTML

<div style="width:500px; height:300px; margin:20px auto;">
    <div id="carouselI" class="carousel slide" data-ride="carousel" data-interval="3000">
        <ol class="carousel-indicators">
            <li data-target="#carouselI" data-slide-to="0" class="active"></li>
            <li data-target="#carouselI" data-slide-to="1"></li>
            <li data-target="#carouselI" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="http://lorempixel.com/500/300/food/1/" width="500" height="300">
            </div>
            <div class="item">
                <img src="http://lorempixel.com/500/300/food/2/" width="500" height="300">
                <div class="carousel-caption">
                    <p>Caption</p>
                </div>
            </div>
            <div class="item">
                <img src="http://lorempixel.com/500/300/food/3/" width="500" height="300">
                <div class="carousel-caption">
                    <h3>Header</h3>
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#carouselI" role="button" data-slide="prev">
            <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carouselI" role="button" data-slide="next">
            <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span>
        </a>
    </div>
</div>

许可协议

MIT许可证（MIT）。有关更多信息，请参阅许可文件。