211 lines
17 KiB
Markdown
211 lines
17 KiB
Markdown
<div class="row">
|
||
<div class="col-md-6 col-md-offset-2">
|
||
<section class="widget widget-tabs">
|
||
<header>
|
||
<ul class="nav nav-tabs">
|
||
<li class="active">
|
||
<a href="#stats" data-toggle="tab">Red</a>
|
||
</li>
|
||
<li>
|
||
<a href="#report" data-toggle="tab">Orange</a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <i class="fa fa-caret-down"></i></a>
|
||
<ul class="dropdown-menu">
|
||
<li ><a href="#dropdown1" data-toggle="tab">Green</a></li>
|
||
<li ><a href="#dropdown2" data-toggle="tab">Blue</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</header>
|
||
<div class="body tab-content">
|
||
<div id="stats" class="tab-pane active clearfix">
|
||
<h2>Tabs-enabled widget</h2>
|
||
<p>You will never know exactly how something will go until you try it.</p>
|
||
<p>You can think three hundred times and still have no precise result. If you see
|
||
attractive girl all you need to do is to go and ask her to give you her phone. You don’t
|
||
need to think about HOW it can turn out. All you have to do is to GO and DO IT. It
|
||
should be super-fast and easy. No hesitation. You ask me: “What to do with these
|
||
fearful thoughts preventing me from doing that?” The answer is to ignore them, because
|
||
they can’t disappear immediately.</p>
|
||
<p>The same thing is for startups and ideas. If you have an idea right away after it appears in your mind you should go and make a first step to implement it. </p>
|
||
<div class="pull-right">
|
||
<button class="btn btn-inverse">Cancel</button>
|
||
<button class="btn btn-primary">Some button</button>
|
||
</div>
|
||
</div>
|
||
<div id="report" class="tab-pane">
|
||
<div style="font-size: 200px; text-align: center; color: #56bc76; height: 280px;">
|
||
<i class="fa fa-picture-o"></i>
|
||
</div>
|
||
</div>
|
||
<div id="dropdown1" class="tab-pane">
|
||
<p>The same thing is for startups and ideas. If you have an idea right away after it appears
|
||
in your mind you should go and make a first step to implement it. If you will think too
|
||
much it will sink in the swamp of never implemented plans and ideas or will just go away
|
||
or will be implemented by someone else.</p>
|
||
<p><strong>5 months of doing everything to achieve nothing.</strong></p>
|
||
<p>I had an idea named Great Work. It was a service aimed to help people find their passion.
|
||
Yes I know it sound crazy and super naïve but I worked on that. I started to work on
|
||
planning, graphics, presentations, pictures, descriptions, articles, investments and so
|
||
on. I worked on everything but not the project itself</p>
|
||
<div>
|
||
<button class="btn btn-danger">Some button</button>
|
||
<button class="btn btn-default">Cancel</button>
|
||
</div>
|
||
</div>
|
||
<div id="dropdown2" class="tab-pane">
|
||
<p>I realized really simple thing recently. Try is million times better than think. The real world is much more representative than any models either they are built in mind or on the shit of paper.</p>
|
||
<div>
|
||
<button class="btn btn-warning btn-block">Some button</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<section class="widget">
|
||
<header>
|
||
<h5>
|
||
<i class="fa fa-arrow-down"></i>
|
||
Tabs inside of the body
|
||
</h5>
|
||
</header>
|
||
<div class="body">
|
||
<ul id="myTab" class="nav nav-tabs">
|
||
<li><a href="#home" data-toggle="tab">Home</a></li>
|
||
<li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#dropdown3" data-toggle="tab">@fat</a></li>
|
||
<li><a href="#dropdown4" data-toggle="tab">@mdo</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<div id="myTabContent" class="tab-content" >
|
||
<div class="tab-pane fade" id="home">
|
||
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
|
||
</div>
|
||
<div class="tab-pane fade in active" id="profile">
|
||
<p>Light Blue - is a next generation admin template based on the latest Metro design. There are few reasons we want to tell you, why we have created it:
|
||
We didn't like the darkness of most of admin templates, so we created this light one. We didn't like the high contrast of most of admin templates, so we created this unobtrusive one.
|
||
We searched for a solution of how to make widgets look like real widgets, so we decided that deep background - is what makes widgets look real.</p>
|
||
</div>
|
||
<div class="tab-pane fade" id="dropdown3">
|
||
<p>Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
|
||
</div>
|
||
<div class="tab-pane fade" id="dropdown4">
|
||
<p>They sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<section class="widget">
|
||
<header>
|
||
<h5>
|
||
<i class="fa fa-arrow-up"></i>
|
||
Tabs on the bottom
|
||
</h5>
|
||
</header>
|
||
<div class="body">
|
||
<div class="tabbable tabs-below">
|
||
<div id="myTabContentbottom" class="tab-content">
|
||
<div class="tab-pane fade" id="home-bottom">
|
||
<p>Light Blue - is a next generation admin template based on the latest Metro design. There are few reasons we want to tell you, why we have created it:
|
||
We didn't like the darkness of most of admin templates, so we created this light one. We didn't like the high contrast of most of admin templates, so we created this unobtrusive one.
|
||
We searched for a solution of how to make widgets look like real widgets, so we decided that deep background - is what makes widgets look real.</p>
|
||
</div>
|
||
<div class="tab-pane fade" id="profile-bottom">
|
||
<p>Food truck fixie locavore, single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown.</p>
|
||
</div>
|
||
<div class="tab-pane fade in active" id="dropdown3-bottom">
|
||
<p>Why don't use Lore Ipsum? I think if some one says don't use lore ipsum it's very controversial point. I think the opposite actually. Everyone knows what is lore ipsum - it is
|
||
easy to understand if text is lore ipsum. You'll automatically skip - because you know - it's just non-informative stub. But what if there some text like this one? You start to read it!
|
||
But the goal of this text is different. So a bit of Lore Ipsum is always great practice</p>
|
||
</div>
|
||
</div>
|
||
<ul id="myTabbottom" class="nav nav-tabs ">
|
||
<li><a href="#home-bottom" data-toggle="tab">Home</a></li>
|
||
<li><a href="#profile-bottom" data-toggle="tab">Profile</a></li>
|
||
<li class="active"><a href="#dropdown3-bottom" data-toggle="tab">Search</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<section class="widget">
|
||
<header>
|
||
<h5>
|
||
<i class="fa fa-arrow-right"></i>
|
||
Tabs on the left
|
||
</h5>
|
||
</header>
|
||
<div class="body">
|
||
<div class="tabbable tabs-left">
|
||
<ul id="myTabLeft" class="nav nav-tabs">
|
||
<li><a href="#home-left" data-toggle="tab">Home</a></li>
|
||
<li class="active"><a href="#profile-left" data-toggle="tab">Profile</a></li>
|
||
<li><a href="#dropdown3-left" data-toggle="tab">Search</a></li>
|
||
</ul>
|
||
<div id="myTabContentLeft" class="tab-content" >
|
||
<div class="tab-pane fade" id="home-left">
|
||
<p>Light Blue - is a next generation admin template based on the latest Metro design. There are few reasons we want to tell you, why we have created it:
|
||
We didn't like the darkness of most of admin templates, so we created this light one. We didn't like the high contrast of most of admin templates, so we created this unobtrusive one.
|
||
We searched for a solution of how to make widgets look like real widgets, so we decided that deep background - is what makes widgets look real.</p>
|
||
</div>
|
||
<div class="tab-pane fade in active" id="profile-left">
|
||
<p>Why don't use Lore Ipsum? I think if some one says don't use lore ipsum it's very controversial point. I think the opposite actually. Everyone knows what is lore ipsum - it is
|
||
easy to understand if text is lore ipsum. You'll automatically skip - because you know - it's just non-informative stub. But what if there some text like this one? You start to read it!
|
||
But the goal of this text is different. So a bit of Lore Ipsum is always great practice</p>
|
||
</div>
|
||
<div class="tab-pane fade" id="dropdown3-left">
|
||
<p>Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<section class="widget">
|
||
<header>
|
||
<h5>
|
||
<i class="fa fa-arrow-left"></i>
|
||
Tabs on the right
|
||
</h5>
|
||
</header>
|
||
<div class="body">
|
||
<div class="tabbable tabs-right">
|
||
<ul id="myTabright" class="nav nav-tabs">
|
||
<li><a href="#home-right" data-toggle="tab">Home</a></li>
|
||
<li class="active"><a href="#profile-right" data-toggle="tab">Profile</a></li>
|
||
<li><a href="#dropdown3-right" data-toggle="tab">Search</a></li>
|
||
</ul>
|
||
<div id="myTabContentright" class="tab-content" >
|
||
<div class="tab-pane fade" id="home-right">
|
||
<p>Why don't use Lore Ipsum? I think if some one says don't use lore ipsum it's very controversial point. I think the opposite actually. Everyone knows what is lore ipsum - it is
|
||
easy to understand if text is lore ipsum. You'll automatically skip - because you know - it's just non-informative stub. But what if there some text like this one? You start to read it!
|
||
But the goal of this text is different. So a bit of Lore Ipsum is always great practice.</p>
|
||
</div>
|
||
<div class="tab-pane fade in active" id="profile-right">
|
||
<p>Light Blue - is a next generation admin template based on the latest Metro design. There are few reasons we want to tell you, why we have created it:
|
||
We didn't like the darkness of most of admin templates, so we created this light one. We didn't like the high contrast of most of admin templates, so we created this unobtrusive one.
|
||
We searched for a solution of how to make widgets look like real widgets, so we decided that deep background - is what makes widgets look real.</p>
|
||
</div>
|
||
<div class="tab-pane fade" id="dropdown3-right">
|
||
<p>Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div> |