Bootstrap Snippets for Visual Studio

• 參考 API
• 將快捷鍵產生的語法簡單產生範例檔案，方便事後快速查詢

bs-accordion

• 可以縮放的預設清單

%%html
<div class="panel-group" id="collapse" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="collapse-heading-one">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#collapse" href="#collapse-one" aria-expanded="true" aria-controls="collapse-one">
                    Accordion heading 1
                </a>
            </h4>
        </div>
        <div id="collapse-one" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="collapse-heading-one">
            <div class="panel-body">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="collapse-heading-two">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#collapse" href="#collapse-two" aria-expanded="false" aria-controls="collapse-two">
                    Accordion heading 2
                </a>
            </h4>
        </div>
        <div id="collapse-two" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapse-heading-two">
            <div class="panel-body">
                Morbi eget libero quis metus consectetur semper.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="collapse-heading-three">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#collapse" href="#collapse-three" aria-expanded="false" aria-controls="collapse-three">
                    Accordion heading 3
                </a>
            </h4>
        </div>
        <div id="collapse-three" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapse-heading-three">
            <div class="panel-body">
                Suspendisse ullamcorper massa eget eleifend iaculis.
            </div>
        </div>
    </div>
</div>

Accordion heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Accordion heading 2

Morbi eget libero quis metus consectetur semper.

Accordion heading 3

Suspendisse ullamcorper massa eget eleifend iaculis.

bs-alert

• alert顯示訊息

%%html
<div class="alert alert-warning alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

×Warning! Better check yourself, you're not looking too good.

bs-badge

• 顯示訊息量樣式 badge

%%html
<span class="badge">1234</span>

1234

bs-breadcrumb

• 超連結清單 用 / 隔開

%%html
<ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="active">Data</li>
</ol>

1. Home
2. Library
3. Data

bs-btn-dropdown

• 有下拉式選單的按鈕

%%html
<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Action <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Action

• Action
• Another action
• Something else here
•  
• Separated link

bs-btn-dropdown-split

• 有切割的按鈕的下拉式選單按鈕

%%html
<div class="btn-group">
    <button type="button" class="btn btn-danger">Action</button>
    <button type="button" class="btn btn-danger dropdown-toggle" 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">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Action Toggle Dropdown

• Action
• Another action
• Something else here
•  
• Separated link

bs-btn-group

• 將按鈕對整齊的樣式 適用於多個按鈕

%%html
<div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
</div>

LeftMiddleRight

bs-btn-toolbar

• 多個Group 按鈕的樣式

%%html
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group" role="group" aria-label="First group">
        <button type="button" class="btn btn-default">1</button>
        <button type="button" class="btn btn-default">2</button>
        <button type="button" class="btn btn-default">3</button>
        <button type="button" class="btn btn-default">4</button>
    </div>
    <div class="btn-group" role="group" aria-label="Second group">
        <button type="button" class="btn btn-default">5</button>
        <button type="button" class="btn btn-default">6</button>
        <button type="button" class="btn btn-default">7</button>
    </div>
    <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-default">8</button>
    </div>
</div>

1234

567

8

bs-carousel

• 圓盤傳送帶 將多張圖片放送的方式

%%html
<div id="my-carousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#my-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#my-carousel" data-slide-to="1"></li>
        <li data-target="#my-carousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img alt="First slide" src="http://placehold.it/1200x675&text=First+slide">
            <div class="carousel-caption">
                <h3>Caption heading 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
        <div class="item">
            <img alt="Second slide" src="http://placehold.it/1200x675&text=Second+slide">
            <div class="carousel-caption">
                <h3>Caption heading 2</h3>
                <p>Morbi eget libero quis metus consectetur semper.</p>
            </div>
        </div>
        <div class="item">
            <img alt="Third slide" src="http://placehold.it/1200x675&text=Third+slide">
            <div class="carousel-caption">
                <h3>Caption heading 3</h3>
                <p>Suspendisse ullamcorper massa eget eleifend iaculis.</p>
            </div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#my-carousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#my-carousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

1.  
2.  
3.  

Caption heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Caption heading 2

Morbi eget libero quis metus consectetur semper.

Caption heading 3

Suspendisse ullamcorper massa eget eleifend iaculis.

Previous Next

bs-collapse

• 開啟隱藏內容

%%html
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#collapse" aria-expanded="false" aria-controls="collapse">
    Open collapse
</button>
<div id="collapse" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

Open collapse

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

bs-form

• 就form的基本樣式

%%html
<form role="form">
    <div class="form-group">
        <label class="control-label" for="exampleInputEmail">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter email">
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> Remember me
        </label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

Email address

Remember me

Submit

bs-form-group

• form 裡面會用的樣式 輸入框

%%html
<div class="form-group">
    <label class="control-label" for="form-group-input">My label</label>
    <input type="text" class="form-control" id="form-group-input" placeholder="My label">
</div>

My label

bs-form-group-checkbox

• form 裡面會用的樣式 checkbox

%%html
<div class="checkbox">
    <label>
        <input type="checkbox"> My label
    </label>
</div>

My label

bs-form-group-horizontal

• form 裡面會用的樣式 label 綁定 input
• 設定位置 bootstrap 位置

%%html
<div class="form-group">
    <label class="col-sm-2 control-label" for="form-group-input">My label</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="form-group-input" placeholder="My label">
    </div>
</div>

My label

bs-form-group-horizontal-checkbox

• form 裡面會用的樣式 給位置 offset

%%html
<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
            <label>
                <input type="checkbox"> My label
            </label>
        </div>
    </div>
</div>

My label

bs-form-group-inline

• form 裡面會用的樣式

%%html
<div class="form-group">
    <label class="sr-only" for="form-group-input">My label</label>
    <input type="text" class="form-control" id="form-group-input" placeholder="My label">
</div>

My label

bs-form-group-radio

• form 裡面會用的 radio

%%html
<div class="radio">
    <label>
        <input type="radio"> My label
    </label>
</div>

My label

bs-form-group-select

• form 裡面會用的 select

%%html
<div class="form-group">
    <label class="control-label" for="form-group-select">My label</label>
    <select class="form-control" id="form-group-select"></select>
</div>

My label

bs-form-horizontal

• form 樣式 橫式

%%html
<form class="form-horizontal" role="form">
    <div class="form-group">
        <label class="col-sm-2 control-label" for="exampleInputEmail">Email address</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter email">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Remember me
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </div>
</form>

Email address

Remember me

Submit

bs-form-inline

• form 樣式 一致

%%html
<form class="form-inline" role="form">
    <div class="form-group">
        <label class="sr-only" for="exampleInputEmail">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter email">
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> Remember me
        </label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form> 

Email address

Remember me

Submit

bs-glyphicon

• bootstrap 提供的ICONicon樣式

%%html
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>

bs-input-group

• 給 input 樣式，專案還滿常用的

%%html
<div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" placeholder="Placecholder">
</div>

@

bs-jumbotron

• 抬頭樣式 W3c放滿前面教學的

%%html
<div class="jumbotron">
    <h1>Jumbotron heading</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Jumbotron heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

bs-label

• label 樣式

%%html
<span class="label label-default">Label content</span>

Label content

bs-list-group

• list 清單樣式

%%html
<ul class="list-group">
    <li class="list-group-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li class="list-group-item">Morbi eget libero quis metus consectetur semper.</li>
    <li class="list-group-item">Suspendisse ullamcorper massa eget eleifend iaculis.</li>
</ul>

• Lorem ipsum dolor sit amet, consectetur adipiscing elit.
• Morbi eget libero quis metus consectetur semper.
• Suspendisse ullamcorper massa eget eleifend iaculis.

bs-media-list

• media-list 中文解釋還沒有想到

%%html
<ul class="media-list">
    <li class="media">
        <div class="media-left">
            <a href="#">
                <img class="media-object" src="http://placehold.it/64x64">
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading">Media heading 1</h4>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </li>
    <li class="media">
        <div class="media-right">
            <a href="#">
                <img class="media-object" src="http://placehold.it/64x64">
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading">Media heading 2</h4>
            Morbi eget libero quis metus consectetur semper.
        </div>
    </li>
    <li class="media">
        <div class="media-left">
            <a href="#">
                <img class="media-object" src="http://placehold.it/64x64">
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading">Media heading 3</h4>
            Suspendisse ullamcorper massa eget eleifend iaculis.
        </div>
    </li>
</ul>

• 

  Media heading 1

  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
• 

  Media heading 2

  Morbi eget libero quis metus consectetur semper.
• 

  Media heading 3

  Suspendisse ullamcorper massa eget eleifend iaculis.

bs-modal

• modal樣式

%%html
<button type="button" class="btn btn-info btn-lg" id="myBtn" onclick="$('#myModal').modal();setTimeout(function(){ $('#myModal').modal('hide'); }, 2000);" >Open Modal</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal-label">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModal-label">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>2 second Close</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>

Open Modal

×

Modal title

2 second Close

CloseSave

bs-modal-lg

• modal樣式

%%html
<button type="button" class="btn btn-info btn-lg" id="myBtn" onclick="$('#myModal').modal();setTimeout(function(){ $('#myModal').modal('hide'); }, 2000);" >Open Modal</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal-label">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModal-label">Modal title</h4>
            </div>
            <div class="modal-body">
             <p>2 second Close</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>

Open Modal

×

Modal title

2 second Close

CloseSave

bs-modal-sm

• 小的modal樣式

%%html
<button type="button" class="btn btn-info btn-lg" id="myBtn" onclick="$('#myModal').modal();setTimeout(function(){ $('#myModal').modal('hide'); }, 2000);" >Open Modal</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal-label">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModal-label">Modal title</h4>
            </div>
            <div class="modal-body">
               <p>2 second Close</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>

Open Modal

×

Modal title

2 second Close

CloseSave

bs-nav-pills

• pills 樣式

%%html
<ul class="nav nav-pills">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages</a></li>
</ul>

• Home
• Profile
• Messages

bs-nav-tabs

• tabs 樣式

%%html
<ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages</a></li>
</ul>

• Home
• Profile
• Messages

bs-navbar

• 一個完整的抬頭表示法

%%html
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <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="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

Toggle navigation Brand

• Link (current)
• Link
• Dropdown
  • Action
  • Another action
  • Something else here
  •  
  • Separated link
  •  
  • One more separated link

Submit

• Link
• Dropdown
  • Action
  • Another action
  • Something else here
  •  
  • Separated link

bs-page-header

• 抬頭樣式

%%html
<div class="page-header">
    <h1>Example page header <small>Subtext for header</small></h1>
</div>

Example page header Subtext for header

bs-pager

• 分頁按鈕

%%html
<nav aria-label="...">
    <ul class="pager">
        <li><a href="#">Previous</a></li>
        <li><a href="#">Next</a></li>
    </ul>
</nav>

• Previous
• Next

bs-pagination

• 分頁顯示方式

%%html
<nav aria-label="Page navigation">
    <ul class="pagination">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>

• «
• 1
• 2
• 3
• 4
• 5
• »

bs-panel

• panel 樣式

%%html
<div class="panel panel-default">
    <div class="panel-heading">Panel heading</div>
    <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
</div>

Panel heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

bs-popover

• 彈出提示框(Popovers)的按鈕

%%html
<button type="button" class="btn btn-default" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Click to toggle popover

bs-progress-bar

• 等待進度條

%%html
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span class="sr-only">50% Complete</span>
    </div>
</div>

50% Complete

bs-thumbnail

• 縮略圖

%%html
<div class="row">
    <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
            <img src="http://placehold.it/64x64">
            <div class="caption">
                <h3>Thumbnail caption heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
    </div>
</div>

Thumbnail caption heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

bs-tooltip

• 滑鼠滑到上面顯示相關訊息內容

%%html
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

Hover over me