How to Lightning Components - Part 2: BootstrapSF1 Sample

01_LightningBootstrapSF1Sample.app

<aura:application>
    <link rel="stylesheet" href="/resource/BootstrapSF1/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="/resource/BootstrapSF1/dist/css/docs.min.css" />
    <script type="text/javascript" src="/resource/jQuery" />
    <script type="text/javascript" src="/resource/BootstrapSF1/dist/js/bootstrap.min.js" />
    <script type="text/javascript" src="/resource/BootstrapSF1/js/docs.js" />
    <!-- Header Component -->
    <devjp:LightningBootstrapSF1Header header="How to Lightning Component" detail="- Sample Application -"  />
    <!-- Cards Component -->
    <devjp:LightningBootstrapSF1Cards header="Cards Component" detail="Hello World!!"  />
</aura:application>

02_LightningBootstrapSF1Header.cmp

<aura:component>
    <aura:attribute name="header" type="String" />
    <aura:attribute name="detail" type="String" />
    <div class="page-header page-header-anchor">
        <h1>{!v.header}</h1>
        <p>{!v.detail}</p>
    </div>
</aura:component>

03_LightningBootstrapSF1Cards.cmp

<aura:component>
    <aura:attribute name="header" type="String" />
    <aura:attribute name="detail" type="String" />
    <div class="card">
        <div class="card-heading">
            {!v.header}
        </div>
        <div class="card-detail">
            {!v.detail}
        </div>
    </div>
</aura:component>