第四部分：JavaScript插件

一：模态框

1.基本实例

基本模态框

</button>

增强模态框

</button>

<h4 class="modal-title">Modal title</h4>

</div>

<p>One finebody…</p>

</div>

<button type="button"class="btn btn-default" data-dismiss="modal">Close</button>

<button type="button"class="btn btn-primary">Save changes</button>

</div>

</div>

</div>

</div>

<!—增强Modal，一般常用 -->

<h4 class="modal-title"id="myModalLabel">Modal title</h4>

</div>

...

</div>

<button type="button"class="btn btn-default" data-dismiss="modal">Close</button>

<button type="button"class="btn btn-primary">Save changes</button>

</div>

</body>

2.可选尺寸

<button type="button" class="btnbtn-primary" data-toggle="modal"data-target=".bs-example-modal-lg">Large modal</button>

<h4 class="modal-title">Modal title</h4>

</div>

<p>One finebody…</p>

</div>

<button type="button" class="btnbtn-primary" data-toggle="modal"data-target=".bs-example-modal-sm">Small modal</button>

<h4 class="modal-title">Modal title</h4>

</div>

<p>One finebody…</p>

</div>

</body>

3.禁止动画效果

有动画效果

</button>

无动画效果

</button>

<h4 class="modal-title">Modal title</h4>

</div>

<p>One finebody…</p>

</div>

<button type="button"class="btn btn-default" data-dismiss="modal">Close</button>

<button type="button"class="btn btn-primary">Save changes</button>

</div>

</div>

</div>

</div>

<h4 class="modal-title">Modal title</h4>

</div>

<p>One finebody…</p>

</div>

<button type="button"class="btn btn-default" data-dismiss="modal">Close</button>

<button type="button"class="btn btn-primary">Save changes</button>

</div>

</div>

</div>

</div>

</body>

4.Varying modal content based on trigger button（通过不同按钮触发不同的模态框）

<button type="button" class="btnbtn-primary" data-toggle="modal"data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>

<button type="button" class="btnbtn-primary" data-toggle="modal"data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>

<button type="button" class="btnbtn-primary" data-toggle="modal"data-target="#exampleModal" data-whatever="@twbootstrap">Open modal for @twbootstrap</button>

<h4 class="modal-title"id="exampleModalLabel">New message</h4>

</div>

<form>

<label for="recipient-name"class="control-label">Recipient:</label>

</div>

<label for="message-text"class="control-label">Message:</label>

</div>

</form>

</div>

<button type="button"class="btn btn-default" data-dismiss="modal">Close</button>

<button type="button"class="btn btn-primary">Send message</button>

</div>

$('#exampleModal').on('show.bs.modal', function (event) {

var button = $(event.relatedTarget) //Button that triggered the modal

var recipient =button.data('whatever') // Extract info from data-* attributes

// If necessary, you could initiate an AJAXrequest here (and then do the updating in a callback).

// Update the modal's content. We'll usejQuery here, but you could use a data binding library or other methods instead.

var modal = $(this)

modal.find('.modal-title').text('New message to ' + recipient)

modal.find('.modal-body input').val(recipient)

})

</script>

</body>

5.参数

function openDialog(){

// 默认是true，无背景色，点其他地方

$('#myModal').modal({

backdrop:false

});

}

function openDialog2(){

// 默认是true

$('#myModal').modal({

keyboard:false

});

}

function openDialog3(){

// 默认是true

$('#myModal').modal({

show:false

});

}

</script>

</style>

</head>

通过 data 属性打开模态框

</button>

backdrop

</button>

keyboard

</button>

show

</button>

<h4 class="modal-title"id="myModalLabel">Modal title</h4>

</div>

...

</div>

<button type="button"class="btnbtn-default" data-dismiss="modal">Close</button>

<button type="button"class="btnbtn-primary">Savechanges</button>

</div>

</body>

6.方法&事件

function openDialog(){

$('#myModal').modal('toggle');

}

functionopenDialog2(){

$('#myModal').modal('show');

}

functionhide(){

$('#myModal').modal('hide');

}

</script>

</style>

</head>

toggle

</button>

show

</button>

<h4 class="modal-title"id="myModalLabel">Modal title</h4>

</div>

...

</div>

<button type="button"class="btn btn-default" data-dismiss="modal">Close</button>

</div>

$('#myModal').on('show.bs.modal', function (e) {

alert("show.bs.modal");

});

$('#myModal').on('shown.bs.modal', function (e) {

alert("shown.bs.modal");

});

$('#myModal').on('hide.bs.modal', function (e) {

alert("hide.bs.modal");

});

$('#myModal').on('hidden.bs.modal', function (e) {

alert("hidden.bs.modal");

});

</script>

</body>

二：下拉菜单

Dropdown

</button>

<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"><a role="menuitem" tabindex="-1"href="#">Something else here</a></li>

<li role="presentation"><a role="menuitem" tabindex="-1"href="#">Separated link</a></li>

</ul>

</div>

</body>

三：滚动监听

<span class="sr-only">Toggle navigation</span>

</button>

<a class="navbar-brand" href="#">Project Name</a>

</div>

<a href="#" id="navbarDrop1"class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown<span class="caret"></span></a>

<li class=""><a href="#three"tabindex="-1">three</a></li>

</ul>

</li>

</ul>

</div>

</nav>

<p> cred irony biodiesel keffiyeh artisanullamco consequat.</p>

<p>Veniam marfa mustache skateboard, adipisicingfugiat velit.</p>

<p> fanny pack iphone.</p>

<p> out four loko. Locavore enim nostrud mlkshkbrooklyn </p>

<h4 id="three">three</h4>

<p>Ad leggings keytar, brunch id art party dolor</p>

<p>Keytar twee blog, culpa </p>

</div>

</body>

四：标签页

1.基本实例

<li role="presentation" class=""><a href="#profile"role="tab"id="profile-tab"data-toggle="tab"aria-controls="profile" aria-expanded="false">Profile</a></li>

<a href="#"id="myTabDrop1"class="dropdown-toggle"data-toggle="dropdown"aria-controls="myTabDrop1-contents" aria-expanded="false">Dropdown<span class="caret"></span></a>

</ul>

</li>

</ul>

<p> voluptatenisi qui.</p>

</div>

<p>tattooed echo park.</p>

</div>

<p>haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainabletofu synth chambray yr.</p>

</div>

<p>keffiyeh echo park vegan.</p>

</div>

</body>

2.用js控制tab

$(function() {

$('#myTab a:last').tab('show')

});

</script>

</head>

<li role="presentation"class=""><a href="#profile"role="tab" id="profile-tab"data-toggle="tab" aria-controls="profile"aria-expanded="false">Profile</a></li>

<a href="#" id="myTabDrop1"class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents" aria-expanded="false">Dropdown<span class="caret"></span></a>

</ul>

</li>

</ul>

<p> Seitanaliquip quis cardigan american apparel, butcher voluptatenisi qui.</p>

</div>

<p> tumblrbutcher vero sint qui sapiente accusamus tattooed echo park.</p>

</div>

<p> vice blog.Scenester cred you probably haven't heard of them, vinyl craft beer blogstumptown. Pitchfork sustainable tofu synth chambray yr.</p>

</div>

<p> marfaethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>

</div>

</body>

五．工具提示

1.基本实例

$(function() {

$('[data-toggle="tooltip"]').tooltip()

});

</script>

</head>

<button type="button" class="btnbtn-default" data-toggle="tooltip"data-placement="left" title=""data-original-title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btnbtn-default" data-toggle="tooltip"data-placement="top" title=""data-original-title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btnbtn-default" data-toggle="tooltip"data-placement="bottom" title=""data-original-title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btnbtn-default" data-toggle="tooltip"data-placement="right" title="Tooltip onright">Tooltip on right</button>

</div>

<hr/>

<p>Tight pants next level keffiyeh <a href="#"data-toggle="tooltip" title=""data-original-title="Default tooltip">you probably</a> haven't heard of them.Photo booth beard raw denim letterpress vegan messengerbag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainablequinoa 8-bit american apparel <a href="#"data-toggle="tooltip" title=""data-original-title="Another tooltip">have a</a> terry richardsonvinyl chambray. Beard stumptown, cardigans banhmi lomo thundercats. Tofu biodiesel williamsburgmarfa, four loko mcsweeney's cleanse vegan chambray.A really ironic artisan <a href="#"data-toggle="tooltip" title=""data-original-title="Another one here too">whatever keytar</a>, scenesterfarm-to-table banksy Austin <a href="#"data-toggle="tooltip" title=""data-original-title="The last tip!">twitter handle</a> freegan credraw denim single-origin coffee viral.</p>

</div>

</body>

2.用js控制

$(function() {

$('[data-toggle="tooltip"]').tooltip()

});

functionshow(){

$('#element').tooltip('show');

}

functionhide(){

$('#element').tooltip('hide');

}

functiontoggle(){

$('#element').tooltip('toggle');

}

functiondestroy(){

$('#element').tooltip('destroy');

}

</script>

</head>

<p>Tight pants next level keffiyeh <a id="element"href="#" data-toggle="tooltip"title="" data-original-title="Default tooltip">you probably</a> haven't heard of them.Photo booth beard raw denim letterpress vegan messengerbag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainablequinoa 8-bit american apparel <a href="#"data-toggle="tooltip" title=""data-original-title="Another tooltip">have a</a> terry richardsonvinyl chambray. Beard stumptown, cardigans banhmi lomo thundercats. Tofu biodiesel williamsburgmarfa, four loko mcsweeney's cleanse vegan chambray.A really ironic artisan <a href="#"data-toggle="tooltip" title=""data-original-title="Another one here too">whatever keytar</a>, scenesterfarm-to-table banksy Austin <a href="#"data-toggle="tooltip" title=""data-original-title="The last tip!">twitter handle</a> freegan credraw denim single-origin coffee viral.</p>

</div>

<hr/>

</body>

六：弹出框

1.基本实例

$(function () {

$('[data-toggle="popover"]').popover();

});

</script>

</head>

<button type="button"class="btn btn-lg btn-danger" data-toggle="popover" title="Popovertitle" data-content="And here'ssome amazing content. It's very engaging. Right?">Click to toggle popover</button>

<hr/>

Popover on left

</button>

Popover on top

</button>

<button type="button"class="btn btn-default" data-container="body" data-toggle="popover"data-placement="bottom" data-content="Vivamus

sagittis lacusvel augue laoreet rutrum faucibus.">

Popover on bottom

</button>

Popover on right

</button>

<hr/>

ß--常用-->

<a tabindex="0"class="btn btn-lg btn-danger" role="button" data-toggle="popover"data-trigger="focus" title="Dismissiblepopover" data-content="And here'ssome amazing content. It's very engaging. Right?">Dismissible popover</a>

</body>

2.js控制

$(function () {

$('[data-toggle="popover"]').popover();

});

function show(){

$('#element').popover('show');

}

function hide(){

$('#element').popover('hide');

}

function toggle(){

$('#element').popover('toggle');

}

function destroy(){

$('#element').popover('destroy');

}

</script>

</head>

<button id="element"type="button" class="btn btn-lgbtn-danger" data-toggle="popover"title="Popover title" data-content="And here's some amazing content. It's veryengaging. Right?">Click to toggle popover</button>

<hr/>

</body>

七：警告框

<strong>Holy guacamole!</strong> Best check yoself, you're not looking too good.

</div>

<h4>Oh snap! You got an error!</h4>

<p>Change this and that and try again. Duismollis, est non commodo luctus, nisi eratporttitor ligula, eget lacinia odio semnec elit. Cras mattis consectetur purussit amet fermentum.</p>

<p>

<button type="button"class="btn btn-danger">Take this action</button>

</p>

</div>

</body>

八：按钮

1. 加载状态

Loading state

</button>

$('#myButton').on('click', function () {

var $btn = $(this).button('loading');

// business logic...

//$btn.button('reset');

});

</script>

</body>

2．单个切换

Single toggle

</button>

</body>

3.复选框

<input type="checkbox"autocomplete="off" checked> Checkbox 1 (pre-checked)

</label>

<input type="checkbox"autocomplete="off"> Checkbox 2

</label>

<input type="checkbox"autocomplete="off"> Checkbox 3

</label>

</div>

</body>

4.单选按钮

<input type="radio"name="options" id="option1"autocomplete="off" checked> Radio 1 (preselected)

</label>

<input type="radio"name="options" id="option2"autocomplete="off"> Radio 2

</label>

<input type="radio"name="options" id="option3"autocomplete="off"> Radio 3

</label>

</div>

</body>

5.方法

a button

</button>

<hr/>

<button type="button"id="toggle">toggle</button>

<button type="button"id="s">string</button>

<button type="button"id="reset">reset</button>

$('#toggle').on('click', function () {

$("#aButton").button("toggle");

});

$('#s').on('click', function () {

$("#aButton").button("complete");

});

$('#reset').on('click', function () {

$("#aButton").button("reset");

});

</script>

</body>

九：折叠

1.基本实例

<p>

Link with href

</a>

Button with data-target

</button>

</p>

labore wes andersoncred nesciunt sapiente ea proident.

</div>

</body>

2.折叠面板

Collapsible Group Item #1

</a>

</h4>

</div>

you probably haven't heard of them accusamuslabore sustainable VHS.

</div>

Collapsible Group Item #2

</a>

</h4>

</div>

beer farm-to-table, raw denim aestheticsynth nesciunt you probably haven't heard of them accusamus labore sustainableVHS.

</div>

Collapsible Group Item #3

</a>

</h4>

</div>

you probably haven't heard ofthem accusamus labore sustainable VHS.

</div>

</body>

3.折叠列表

Collapsible list group

</a>

</h4>

</div>

<li class="list-group-item">Bootply</li>

<li class="list-group-item">One itmus acfacilin</li>

<li class="list-group-item">Second eros</li>

</ul>

<div class="panel-footer">Footer</div>

</div>

</body>

4.方法

<a data-toggle="collapse" data-parent="#accordion"

href="#collapseOne">

点击我进行展开，再次点击我进行折叠。第 1 部分--hide 方法

</a>

</h4>

</div>

Nihil anim keffiyehhelvetica, craft beer labore wes anderson cred

nesciunt sapiente eaproident. Ad vegan excepteur butcher vice

lomo.

</div>

<a data-toggle="collapse" data-parent="#accordion"

href="#collapseTwo">

点击我进行展开，再次点击我进行折叠。第 2 部分--show 方法

</a>

</h4>

</div>

Nihil anim keffiyehhelvetica, craft beer labore wes anderson cred

nesciunt sapiente eaproident. Ad vegan excepteur butcher vice

lomo.

</div>

<a data-toggle="collapse" data-parent="#accordion"

href="#collapseThree">

点击我进行展开，再次点击我进行折叠。第 3 部分--toggle 方法

</a>

</h4>

</div>

Nihil anim keffiyehhelvetica, craft beer labore wes anderson cred

nesciunt sapiente eaproident. Ad vegan excepteur butcher vice

lomo.

</div>

<a data-toggle="collapse" data-parent="#accordion"

href="#collapseFour">

点击我进行展开，再次点击我进行折叠。第 4 部分--options 方法

</a>

</h4>

</div>

Nihil anim keffiyehhelvetica, craft beer labore

</div>

$(function () { $('#collapseFour').collapse({

toggle: false

})});

$(function () { $('#collapseTwo').collapse('show')});

$(function () { $('#collapseThree').collapse('toggle')});

$(function () { $('#collapseOne').collapse('hide')});

</script>

</body>

十：轮播组件

1.基本实例

</ol>

</div>

</div>

</div>

<span class="sr-only">Previous</span>

</a>

</a>

</div>

</body>

2. 方法

</ol>

</div>

</div>

</div>

<span class="sr-only">Previous</span>

</a>

</a>

</div>

<hr/>

$(function(){

// 初始化轮播

$(".start-slide").click(function(){

$("#myCarousel").carousel('cycle');

});

// 停止轮播

$(".pause-slide").click(function(){

$("#myCarousel").carousel('pause');

});

// 循环轮播到上一个项目

$(".prev-slide").click(function(){

$("#myCarousel").carousel('prev');

});

// 循环轮播到下一个项目

$(".next-slide").click(function(){

$("#myCarousel").carousel('next');

});

// 循环轮播到某个特定的帧

$(".slide-one").click(function(){

$("#myCarousel").carousel(0);

});

$(".slide-two").click(function(){

$("#myCarousel").carousel(1);

});

$(".slide-three").click(function(){

$("#myCarousel").carousel(2);

});

$('#myCarousel').on('slide.bs.carousel', function () {

alert("slide.bs.carousel");

});

$('#myCarousel').on('slid.bs.carousel', function () {

alert("slid.bs.carousel");

});

</script>

</body>

十一：附加导航

1.基本实例

/* CustomStyles */

ul.nav-tabs{

width: 140px;

margin-top: 20px;

border-radius: 4px;

border: 1px solid #ddd;

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);

}

ul.nav-tabs li{

margin: 0;

border-top: 1px solid #ddd;

}

ul.nav-tabs li:first-child{

border-top: none;

}

ul.nav-tabs li a{

margin: 0;

padding: 8px 16px;

border-radius: 0;

}

ul.nav-tabs li.active a,ul.nav-tabs li.active a:hover{

color: #fff;

background: #0088cc;

border: 1px solid #0088cc;

}

ul.nav-tabs li:first-child a{

border-radius: 4px 4px 0 0;

}

ul.nav-tabs li:last-child a{

border-radius: 0 0 4px 4px;

}

ul.nav-tabs.affix{

top: 30px; /* Set thetop position of pinned element */

}

</style>

</head>

<h1>Bootstrap Affix</h1>

</div>

</ul>

</div>

<p> id interdum neque porttitor. Integer faucibus ligula.</p>am tristique, accumsannunc eu, hendrerit tellus.</p>

<hr>

<p> consequat.</p>

<p> molestie nec nibh in, hendrerit tincidunt ante. Vivamussem augue, hendrerit non sapien in, mollis ornare augue.</p>

<hr>

<p> Curabitur bibendum in ligula ut rhoncus.</p>

<p> eget convallis tellus. Suspendisse potenti.</p>

<hr>

<p> Sed eu elementum nibh, quis varius libero.</p>

<p> quis tincidunt dui molestie euismod. Curabitur et diamtristique, accumsan nunc eu, hendrerit tellus.</p>

<p> erat. Vivamus porta ullamcorper sem, ornare egestasmauris facilisis id.</p>

<p> ac massa ultricies pellentesque. Fusce eu suscipitmassa.</p>

<hr>

<p> metus ac justo porta volutpat.</p>

<p> vel varius nisl facilisis ac. Nulla aliquet justo a nibhornare, eu congue neque rutrum.</p>

<p> Morbi vel mi pretium, fermentum lacus et, quis variuslibero.</p>

<p> Sed a semper arcu, ut dignissim leo.</p>

<p> mi dolor cursus mi, id vehicula arcu risus a nibh.Pellentesque blandit sapien lacus, vel vehicula nunc feugiat sit amet.</p>

</div>

</body>

2.方法

/* CustomStyles */

ul.nav-tabs{

width: 140px;

margin-top: 20px;

border-radius: 4px;

border: 1px solid #ddd;

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);

}

ul.nav-tabs li{

margin: 0;

border-top: 1px solid #ddd;

}

ul.nav-tabs li:first-child{

border-top: none;

}

ul.nav-tabs li a{

margin: 0;

padding: 8px 16px;

border-radius: 0;

}

ul.nav-tabs li.active a,ul.nav-tabs li.active a:hover{

color: #fff;

background: #0088cc;

border: 1px solid #0088cc;

}

ul.nav-tabs li:first-child a{

border-radius: 4px 4px 0 0;

}

ul.nav-tabs li:last-child a{

border-radius: 0 0 4px 4px;

}

ul.nav-tabs.affix{

top: 30px; /* Set thetop position of pinned element */

}

</style>

$(document).ready(function(){

$("#myNav").affix({

offset: {

top: 150

}

});

</script>

</head>

<h1>Bootstrap Affix</h1>

</div>

</ul>

</div>

<p>Lorem ipsum dolorsit amet, consectetur adipiscing elit. Nam eusem tempor, varius quam at, luctus dui.Mauris magna metus, dapibus nec turpisvel, semper malesuada ante. Vestibulum id metusac nisl bibendum scelerisque non non purus. Suspendissevarius nibh non aliquet sagittis. In tinciduntorci sit amet elementum vestibulum. Vivamus fermentumin arcu in aliquam. Quisque aliquam porta odioin fringilla. Vivamus nisl leo, blandit at bibendumeu, tristique eget risus. Integer aliquet quam utelit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>

<p>Vestibulum quis quam ut magna consequat faucibus.Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus.Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sitamet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacusblandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel conguedolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendumviverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod.Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>

<hr>

<p>Nullam hendrerit justo non leo aliquet imperdiet. Etiamin sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis dapibusorci. In dapibus velit blandit pharetra tincidunt. Quisque non sapien nec lacuscondimentum facilisis ut iaculis enim. Sed viverra interdum bibendum. Donec acsollicitudin dolor. Sed fringilla vitae lacus at rutrum. Phasellus conguevestibulum ligula sed consequat.</p>

<p>Vestibulum consectetur scelerisque lacus, ac fermentumlorem convallis sed. Nam odio tortor, dictum quis malesuada at, pellentesquevitae orci. Vivamus elementum, felis eu auctor lobortis, diam velit egestaslacus, quis fermentum metus ante quis urna. Sed at facilisis libero. Cum sociisnatoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Vestibulum bibendum blandit dolor. Nunc orci dolor, molestie nec nibh in,hendrerit tincidunt ante. Vivamus sem augue, hendrerit non sapien in, mollisornare augue.</p>

<hr>

<p>Integer pulvinar leo id risus pellentesque vestibulum.Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. Donec sednibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum.Phasellus sed nunc ac sem malesuada condimentum. Etiam in aliquam lectus. Namvel sapien diam. Donec pharetra id arcu eget blandit. Proin imperdiet mattisaugue in porttitor. Quisque tempus enim id lobortis feugiat. Suspendissetincidunt risus quis dolor fringilla blandit. Ut sed sapien at purus laciniaporttitor. Nullam iaculis, felis a pretium ornare, dolor nisl semper tortor,vel sagittis lacus est consequat eros. Sed id pretium nisl. Curabitur dolornisl, laoreet vitae aliquam id, tincidunt sit amet mauris.</p>

<p>Phasellus vitae suscipit justo. Mauris pharetra feugiatante id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis ataccumsan tincidunt. Phasellus risus risus, volutpat vel tellus ac, tinciduntfringilla massa. Etiam hendrerit dolor eget ante rutrum adipiscing. Crasinterdum ipsum mattis, tempus mauris vel, semper ipsum. Duis sed dolor ut enimlobortis pellentesque ultricies ac ligula. Pellentesque convallis elit nisi, idvulputate ipsum ullamcorper ut. Cras ac pulvinar purus, ac viverra est.Suspendisse potenti. Integer pellentesque neque et elementum tempus. Curabiturbibendum in ligula ut rhoncus.</p>

<p>Quisque pharetra velit id velit iaculis pretium. Nullam ajusto sed ligula porta semper eu quis enim. Pellentesque pellentesque, metus atfacilisis hendrerit, lectus velit facilisis leo, quis volutpat turpis arcu quisenim. Nulla viverra lorem elementum interdum ultricies. Suspendisse accumsanquam nec ante mollis tempus. Morbi vel accumsan diam, eget convallis tellus.Suspendisse potenti.</p>

<hr>

<p>Suspendisse a orci facilisis, dignissim tortor vitae,ultrices mi. Vestibulum a iaculis lacus. Phasellus vitae convallis ligula, necvolutpat tellus. Vivamus scelerisque mollis nisl, nec vehicula elit egestas a.Sed luctus metus id mi gravida, faucibus convallis neque pretium. Maecenas quissapien ut leo fringilla tempor vitae sit amet leo. Donec imperdiet tempusplacerat. Pellentesque pulvinar ultrices nunc sed ultrices. Morbi vel mipretium, fermentum lacus et, viverra tellus. Phasellus sodales libero nec duiconvallis, sit amet fermentum sapien auctor. Vestibulum ante ipsum primis infaucibus orci luctus et ultrices posuere cubilia Curae; Sed eu elementum nibh,quis varius libero.</p>

<p>Phasellus fermentum, neque sit amet sodales tempor, enimante interdum eros, eget luctus ipsum eros ut ligula. Nunc ornare erat quisfaucibus molestie. Proin malesuada consequat commodo. Mauris iaculis, eros utdapibus luctus, massa enim elementum purus, sit amet tristique purus purus necfelis. Morbi vestibulum sapien eget porta pulvinar. Nam at quam diam. Proinrhoncus, felis elementum accumsan dictum, felis nisi vestibulum tellus, etultrices risus felis in orci. Quisque vestibulum sem nisl, vel congue leodictum nec. Cras eget est at velit sagittis ullamcorper vel et lectus. In hachabitasse platea dictumst. Etiam interdum iaculis velit, vel sollicitudin loremfeugiat sit amet. Etiam luctus, quam sed sodales aliquam, lorem liberohendrerit urna, faucibus rhoncus massa nibh at felis. Curabitur ac tempusnulla, ut semper erat. Vivamus porta ullamcorper sem, ornare egestas maurisfacilisis id.</p>

<p>Ut ut risus nisl. Fusce porttitor eros at magna luctus,non congue nulla eleifend. Aenean porttitor feugiat dolor sit amet facilisis.Pellentesque venenatis magna et risus commodo, a commodo turpis gravida. Nammollis massa dapibus urna aliquet, quis iaculis elit sodales. Sed eget ornareorci, eu malesuada justo. Nunc lacus augue, dictum quis dui id, lacinia conguequam. Nulla sem sem, aliquam nec dolor ac, tempus convallis nunc. Interdum etmalesuada fames ac ante ipsum primis in faucibus. Nulla suscipit convallisiaculis. Quisque eget commodo ligula. Praesent leo dui, facilisis quis eleifendin, aliquet vitae nunc. Suspendisse fermentum odio ac massa ultriciespellentesque. Fusce eu suscipit massa.</p>

<hr>

<p>Nam eget purus nec est consectetur vehicula. Nullamultrices nisl risus, in viverra libero egestas sit amet. Etiam porttitor dolornon eros pulvinar malesuada. Vestibulum sit amet est mollis nulla tempusaliquet. Praesent luctus hendrerit arcu non laoreet. Morbi consequat placeratmagna, ac ornare odio sagittis sed. Donec vitae ullamcorper purus. Vivamus nonmetus ac justo porta volutpat.</p>

<p>Vivamus mattis accumsan erat, vel convallis risus pretiumnec. Integer nunc nulla, viverra ut sem non, scelerisque vehicula arcu. Fuscebibendum convallis augue sit amet lobortis. Cras porta urna turpis, sodaleslobortis purus adipiscing id. Maecenas ullamcorper, turpis suscipitpellentesque fringilla, massa lacus pulvinar mi, nec dignissim velit arcu egetpurus. Nam at dapibus tellus, eget euismod nisl. Ut eget venenatis sapien.Vivamus vulputate varius mauris, vel varius nisl facilisis ac. Nulla aliquetjusto a nibh ornare, eu congue neque rutrum.</p>

<p>Morbi sed fermentum ipsum. Morbi a orci vulputate tortorornare blandit a quis orci. Donec aliquam sodales gravida. In ut ullamcorpernisi, ac pretium velit. Vestibulum vitae lectus volutpat, consequat lorem sitamet, pulvinar tellus. In tincidunt vel leo eget pulvinar. Curabitur a eros nonlacus malesuada aliquam. Praesent et tempus odio. Integer a quam nunc. In hachabitasse platea dictumst. Aliquam porta nibh nulla, et mattis turpis placerateget. Pellentesque dui diam, pellentesque vel gravida id, accumsan eu magna.Sed a semper arcu, ut dignissim leo.</p>

<p>Sed vitae lobortisdiam, id molestie magna. Aliquam consequat ipsum quis est dictum ultrices.Aenean nibh velit, fringilla in diam id, blandit hendrerit lacus. Donecvehicula rutrum tellus eget fermentum. Pellentesque ac erat et arcu ornare tincidunt.Aliquam erat volutpat. Vivamus lobortis urna quis gravida semper. Incondimentum, est a faucibus luctus, mi dolor cursus mi, id vehicula arcu risusa nibh. Pellentesque blandit sapien lacus, vel vehicula nunc feugiat sit amet.</p>

</div>

</body>

Bootstrap学习笔记04相关推荐

Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
Bootstrap学习笔记-布局
Bootstrap学习笔记-布局默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html> <head> <meta charset="utf ...
取得 Git 仓库 —— Git 学习笔记 04
取得 Git 仓库 -- Git 学习笔记 04 我认为, Git 的学习分为两大块:一是工作区.索引.本地版本库之间的交互:二是本地版本库和远程版本库之间的交互.第一块是基础,第二块是难点. 下面, ...
JavaWeb黑马旅游网-学习笔记04【BaseServlet抽取】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
JavaWeb-综合案例(用户信息)-学习笔记04【删除选中功能】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb-综合案例(用户信息)-学习笔记01[列表查询] JavaWeb-综合案例(用户信息)-学习笔记02[登录功能] JavaWeb-综合案 ...
Bootstrap学习笔记01【快速入门、栅格布局】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
MySQL学习笔记04【数据库的查询操作、今日内容、表的约束】
MySQL 文档-黑马程序员(腾讯微云):https://share.weiyun.com/RaCdIwas 1-MySQL基础.pdf.2-MySQL约束与设计.pdf.3-MySQL多表查询与事务 ...
CSS学习笔记-04 a标签-导航练习
个人练习,各位大神勿笑 .. <!DOCTYPE html> <html lang="en"> <head><meta charset= ...

Bootstrap学习笔记04

第四部分：JavaScript插件

一：模态框

1.基本实例

2.可选尺寸

3.禁止动画效果

4.Varying modal content based on trigger button（通过不同按钮触发不同的模态框）

5.参数

6.方法&事件

二：下拉菜单

三：滚动监听

四：标签页

1.基本实例

2.用js控制tab

五．工具提示

1.基本实例

2.用js控制

六：弹出框

1.基本实例

2.js控制

七：警告框

八：按钮

1. 加载状态

2．单个切换

3.复选框

4.单选按钮

5.方法

九：折叠

1.基本实例

2.折叠面板

3.折叠列表

4.方法

十：轮播组件

1.基本实例

2. 方法

十一：附加导航

1.基本实例

2.方法

Bootstrap学习笔记04相关推荐

最新文章

热门文章