Bootstrap学习笔记04
第四部分：JavaScript插件
一：模态框
1.基本实例
<body style="padding: 20px">
<button type="button" class="btnbtn-primary btn-lg" data-toggle="modal"data-target="#myModal">
基本模态框
button>
<button type="button" class="btnbtn-primary btn-lg" data-toggle="modal"data-target="#myModal2">
增强模态框
button>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button"class="close" data-dismiss="modal"aria-label="Close"><span aria-hidden="true">×span>button>
<h4 class="modal-title">Modal titleh4>
div>
<div class="modal-body">
<p>One finebody…p>
div>
<div class="modal-footer">
<button type="button"class="btn btn-default" data-dismiss="modal">Closebutton>
<button type="button"class="btn btn-primary">Save changesbutton>
div>
div>
div>
div>
增强Modal，一般常用 -->
<div class="modal fade" id="myModal2"tabindex="-1" role="dialog"aria-labelledby="myModalLabel"aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button"class="close" data-dismiss="modal"aria-label="Close"><span aria-hidden="true">×span>button>
<h4 class="modal-title"id="myModalLabel">Modal titleh4>
div>
<div class="modal-body">
...
div>
<div class="modal-footer">
<button type="button"class="btn btn-default" data-dismiss="modal">Closebutton>
<button type="button"class="btn btn-primary">Save changesbutton>
div>
div>
div>
div>
body>
2.可选尺寸
<body style="padding: 20px">
<button type="button" class="btnbtn-primary" data-toggle="modal"data-target=".bs-example-modal-lg">Large modalbutton>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"aria-labelledby="myLargeModalLabel"aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button"class="close" data-dismiss="modal"aria-label="Close"><span aria-hidden="true">×span>button>
<h4 class="modal-title">Modal titleh4>
div>
<div class="modal-body">
<p>One finebody…p>
div>
div>
div>
div>
<button type="button" class="btnbtn-primary" data-toggle="modal"data-target=".bs-example-modal-sm">Small modalbutton>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog"aria-labelledby="mySmallModalLabel"aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button"class="close" data-dismiss="modal"aria-label="Close"><span aria-hidden="true">×span>button>
<h4 class="modal-title">Modal titleh4>
div>
<div class="modal-body">
<p>One finebody…p>
div>
div>
div>
div>
body>
3.禁止动画效果
<body style="padding: 20px">
<button type="button" class="btnbtn-primary btn-lg" data-toggle="modal"data-target="#myModal">
有动画效果
button>
<button type="button" class="btnbtn-primary btn-lg" data-toggle="modal"data-target="#myModal2">
无动画效果
button>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button"class="close" data-dismiss="modal"aria-label="Close"><span aria-hidden="true">×span>button>
<h4 class="modal-title">Modal titleh4>
div>
<div class="modal-body">
<p>One finebody…p>
div>
<div class="modal-footer">
<button type="button"class="btn btn-default" data-dismiss="modal">Closebutton>
<button type="button"class="btn btn-primary">Save changesbutton>
div>
div>
div>
div>
<div class="modal" id="myModal2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button"class="close" data-dismiss="modal"aria-label="Close"><span aria-hidden="true">×span>button>
<h4 class="modal-title">Modal titleh4>
div>
<div class="modal-body">
<p>One finebody…p>
div>
<div class="modal-footer">
<button type="button"class="btn btn-default" data-dismiss="modal">Closebutton>
<button type="button"class="btn btn-primary">Save changesbutton>
div>
div>
div>
div>
body>
4.Varying modal content based on trigger button（通过不同按钮触发不同的模态框）
<body style="padding: 20px">
<button type="button" class="btnbtn-primary" data-toggle="modal"data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdobutton>
<button type="button" class="btnbtn-primary" data-toggle="modal"data-target="#exampleModal" data-whatever="@fat">Open modal for @fatbutton>
<button type="button" class="btnbtn-primary" data-toggle="modal"data-target="#exampleModal" data-whatever="@twbootstrap">Open modal for @twbootstrapbutton>
<div class="modal fade" id="exampleModal"tabindex="-1" role="dialog"aria-labelledby="exampleModalLabel"aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button"class="close" data-dismiss="modal"aria-label="Close"><span aria-hidden="true">×span>button>
<h4 class="modal-title"id="exampleModalLabel">New messageh4>
div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name"class="control-label">Recipient:label>
<input type="text"class="form-control" id="recipient-name">
div>
<div class="form-group">
<label for="message-text"class="control-label">Message:label>
<textarea class="form-control"id="message-text">textarea>
div>
form>
div>
<div class="modal-footer">
<button type="button"class="btn btn-default" data-dismiss="modal">Closebutton>
<button type="button"class="btn btn-primary">Send messagebutton>
div>
div>
div>
div>
<script type="text/javascript">
$('#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.参数
<script type="text/javascript">
function openDialog(){
// 默认是true，无背景色，点其他地方
$('#myModal').modal({
backdrop:false
});
}
function openDialog2(){
// 默认是true
$('#myModal').modal({
keyboard:false
});
}
function openDialog3(){
// 默认是true
$('#myModal').modal({
show:false
});
}
script>
<style type="text/css">
style>
head>
<body style="padding: 20px">
<button type="button"class="btnbtn-primary btn-lg" data-toggle="modal" data-target="#myModal">
通过 data 属性打开模态框
button>
<button type="button"class="btnbtn-primary btn-lg" onclick="openDialog()">
backdrop
button>
<button type="button"class="btnbtn-primary btn-lg" onclick="openDialog2()">
keyboard
button>
<button type="button"class="btnbtn-primary btn-lg" onclick="openDialog3()">
show
button>
<div class="modalfade" id="myModal"tabindex="-1"role="dialog"aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button"class="close"data-dismiss="modal"aria-label="Close"><span aria-hidden="true">×span>button>
<h4 class="modal-title"id="myModalLabel">Modal titleh4>
div>
<div class="modal-body">
...
div>
<div class="modal-footer">
<button type="button"class="btnbtn-default" data-dismiss="modal">Closebutton>
<button type="button"class="btnbtn-primary">Savechangesbutton>
div>
div>
div>
div>
body>
6.方法&事件
<script type="text/javascript">
function openDialog(){
$('#myModal').modal('toggle');
}
functionopenDialog2(){
$('#myModal').modal('show');
}
functionhide(){
$('#myModal').modal('hide');
}
script>
<style type="text/css">
style>
head>
<body style="padding: 20px">
<button type="button" class="btnbtn-primary btn-lg" onclick="openDialog()">
toggle
button>
<button type="button" class="btnbtn-primary btn-lg" onclick="openDialog2()">
show
button>
<div class="modal fade" id="myModal"tabindex="-1" role="dialog"aria-labelledby="myModalLabel"aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button"class="close" data-dismiss="modal"aria-label="Close"><span aria-hidden="true">×span>button>
<h4 class="modal-title"id="myModalLabel">Modal titleh4>
div>
<div class="modal-body">
...
div>
<div class="modal-footer">
<button type="button"class="btn btn-default" data-dismiss="modal">Closebutton>
<button type="button"class="btn btn-primary" onclick="hide()">Hidebutton>
div>
div>
div>
div>
<script type="text/javascript">
$('#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>
二：下拉菜单
<body style="padding: 20px">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"data-toggle="dropdown">
Dropdown
<span class="caret">span>
button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1"href="#">Actiona>li>
<li role="presentation"><a role="menuitem" tabindex="-1"href="#">Another actiona>li>
<li role="presentation"><a role="menuitem" tabindex="-1"href="#">Something else herea>li>
<li role="presentation"><a role="menuitem" tabindex="-1"href="#">Separated linka>li>
ul>
div>
body>
三：滚动监听
<body style="padding: 20px">
<nav id="navbar-example2"class="navbar navbar-default navbar-static">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse"data-target=".bs-example-js-navbar-scrollspy">
<span class="sr-only">Toggle navigationspan>
<span class="icon-bar">span>
<span class="icon-bar">span>
<span class="icon-bar">span>
button>
<a class="navbar-brand" href="#">Project Namea>
div>
<div class="collapse navbar-collapsebs-example-js-navbar-scrollspy">
<ul class="nav navbar-nav">
<li class=""><a href="#fat">@fata>li>
<li class=""><a href="#mdo">@mdoa>li>
<li class="dropdown active">
<a href="#" id="navbarDrop1"class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown<span class="caret">span>a>
<ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1">
<li class=""><a href="#one"tabindex="-1">onea>li>
<li class="active"><a href="#two"tabindex="-1">twoa>li>
<li class="divider">li>
<li class=""><a href="#three"tabindex="-1">threea>li>
ul>
li>
ul>
div>
div>
nav>
<div data-spy="scroll" data-target="#navbar-example2"data-offset="0" style="height:200px;overflow:auto; position: relative;">
<h4 id="fat">@fath4>
<p> cred irony biodiesel keffiyeh artisanullamco consequat.p>
<h4 id="mdo">@mdoh4>
<p>Veniam marfa mustache skateboard, adipisicingfugiat velit.p>
<h4 id="one">oneh4>
<p> fanny pack iphone.p>
<h4 id="two">twoh4>
<p> out four loko. Locavore enim nostrud mlkshkbrooklyn p>
<h4 id="three">threeh4>
<p>Ad leggings keytar, brunch id art party dolorp>
<p>Keytar twee blog, culpa p>
div>
body>
四：标签页
1.基本实例
<body style="padding: 20px">
<div class="bs-examplebs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
<ul id="myTab"class="navnav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home"id="home-tab"role="tab"data-toggle="tab"aria-controls="home" aria-expanded="true">Homea>li>
<li role="presentation" class=""><a href="#profile"role="tab"id="profile-tab"data-toggle="tab"aria-controls="profile" aria-expanded="false">Profilea>li>
<li role="presentation" class="dropdown">
<a href="#"id="myTabDrop1"class="dropdown-toggle"data-toggle="dropdown"aria-controls="myTabDrop1-contents" aria-expanded="false">Dropdown<span class="caret">span>a>
<ul class="dropdown-menu"role="menu"aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
<li class=""><a href="#dropdown1"tabindex="-1"role="tab"id="dropdown1-tab"data-toggle="tab"aria-controls="dropdown1" aria-expanded="false">@fata>li>
<li class=""><a href="#dropdown2"tabindex="-1"role="tab"id="dropdown2-tab"data-toggle="tab"aria-controls="dropdown2" aria-expanded="false">@mdoa>li>
ul>
li>
ul>
<div id="myTabContent"class="tab-content">
<div role="tabpanel" class="tab-pane fadeactive in" id="home" aria-labelledby="home-tab">
<p> voluptatenisi qui.p>
div>
<div role="tabpanel" class="tab-panefade" id="profile" aria-labelledby="profile-tab">
<p>tattooed echo park.p>
div>
<div role="tabpanel" class="tab-panefade" id="dropdown1" aria-labelledby="dropdown1-tab">
<p>haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainabletofu synth chambray yr.p>
div>
<div role="tabpanel" class="tab-panefade" id="dropdown2" aria-labelledby="dropdown2-tab">
<p>keffiyeh echo park vegan.p>
div>
div>
div>
body>
2.用js控制tab
<script type="text/javascript">
$(function() {
$('#myTab a:last').tab('show')
});
script>
head>
<body style="padding: 20px">
<div class="bs-examplebs-example-tabs" role="tabpanel"data-example-id="togglable-tabs">
<ul id="myTab"class="nav nav-tabs" role="tablist">
<li role="presentation"class="active"><a href="#home"id="home-tab" role="tab" data-toggle="tab"aria-controls="home" aria-expanded="true">Homea>li>
<li role="presentation"class=""><a href="#profile"role="tab" id="profile-tab"data-toggle="tab" aria-controls="profile"aria-expanded="false">Profilea>li>
<li role="presentation"class="dropdown">
<a href="#" id="myTabDrop1"class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents" aria-expanded="false">Dropdown<span class="caret">span>a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"id="myTabDrop1-contents">
<li class=""><a href="#dropdown1"tabindex="-1" role="tab"id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1"aria-expanded="false">@fata>li>
<li class=""><a href="#dropdown2"tabindex="-1" role="tab"id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2"aria-expanded="false">@mdoa>li>
ul>
li>
ul>
<div id="myTabContent"class="tab-content">
<div role="tabpanel" class="tab-pane fadeactive in" id="home"aria-labelledby="home-tab">
<p> Seitanaliquip quis cardigan american apparel, butcher voluptatenisi qui.p>
div>
<div role="tabpanel" class="tab-panefade" id="profile"aria-labelledby="profile-tab">
<p> tumblrbutcher vero sint qui sapiente accusamus tattooed echo park.p>
div>
<div role="tabpanel" class="tab-panefade" id="dropdown1"aria-labelledby="dropdown1-tab">
<p> vice blog.Scenester cred you probably haven't heard of them, vinyl craft beer blogstumptown. Pitchfork sustainable tofu synth chambray yr.p>
div>
<div role="tabpanel" class="tab-panefade" id="dropdown2"aria-labelledby="dropdown2-tab">
<p> marfaethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.p>
div>
div>
div>
body>
五．工具提示
1.基本实例
<script type="text/javascript">
$(function() {
$('[data-toggle="tooltip"]').tooltip()
});
script>
head>
<body style="padding: 120px">
<div class="bs-example tooltip-demo">
<div class="bs-example-tooltips">
<button type="button" class="btnbtn-default" data-toggle="tooltip"data-placement="left" title=""data-original-title="Tooltip on left">Tooltip on leftbutton>
<button type="button" class="btnbtn-default" data-toggle="tooltip"data-placement="top" title=""data-original-title="Tooltip on top">Tooltip on topbutton>
<button type="button" class="btnbtn-default" data-toggle="tooltip"data-placement="bottom" title=""data-original-title="Tooltip on bottom">Tooltip on bottombutton>
<button type="button" class="btnbtn-default" data-toggle="tooltip"data-placement="right" title="Tooltip onright">Tooltip on rightbutton>
div>
div>
<hr/>
<div class="bs-example tooltip-demo">
<p>Tight pants next level keffiyeh <a href="#"data-toggle="tooltip" title=""data-original-title="Default tooltip">you probablya> 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 aa> 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 keytara>, scenesterfarm-to-table banksy Austin <a href="#"data-toggle="tooltip" title=""data-original-title="The last tip!">twitter handlea> freegan credraw denim single-origin coffee viral.p>
div>
body>
2.用js控制
<script type="text/javascript">
$(function() {
$('[data-toggle="tooltip"]').tooltip()
});
functionshow(){
$('#element').tooltip('show');
}
functionhide(){
$('#element').tooltip('hide');
}
functiontoggle(){
$('#element').tooltip('toggle');
}
functiondestroy(){
$('#element').tooltip('destroy');
}
script>
head>
<body style="padding: 120px">
<div class="bs-example tooltip-demo">
<p>Tight pants next level keffiyeh <a id="element"href="#" data-toggle="tooltip"title="" data-original-title="Default tooltip">you probablya> 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 aa> 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 keytara>, scenesterfarm-to-table banksy Austin <a href="#"data-toggle="tooltip" title=""data-original-title="The last tip!">twitter handlea> freegan credraw denim single-origin coffee viral.p>
div>
<hr/>
<input type="button" value="show"onclick="show()"/>
<input type="button" value="hide"onclick="hide()"/>
<input type="button" value="toggle"onclick="toggle()"/>
<input type="button" value="destroy"onclick="destroy()"/>
body>
六：弹出框
1.基本实例
<script type="text/javascript">
$(function () {
$('[data-toggle="popover"]').popover();
});
script>
head>
<body style="padding: 250px">
<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 popoverbutton>
<hr/>
<button type="button"class="btn btn-default" data-container="body" data-toggle="popover"data-placement="left" data-content="Vivamussagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
button>
<button type="button"class="btn btn-default" data-container="body" data-toggle="popover"data-placement="top" data-content="Vivamussagittis lacus vel augue laoreet rutrum faucibus.">
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>
<button type="button"class="btn btn-default" data-container="body" data-toggle="popover"data-placement="right" data-content="Vivamussagittis lacus vel augue laoreet rutrum faucibus.">
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 popovera>
body>
2.js控制
<script type="text/javascript">
$(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>
<body style="padding: 120px">
<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 popoverbutton>
<hr/>
<input type="button"value="show" onclick="show()"/>
<input type="button"value="hide" onclick="hide()"/>
<input type="button"value="toggle" onclick="toggle()"/>
<input type="button"value="destroy" onclick="destroy()"/>
body>
七：警告框
<body style="padding: 20px">
<div class="bs-example bs-example-standalone" data-example-id="dismissible-alert-js">
<div id="myAlert" class="alert alert-warning alert-dismissible fadein" role="alert">
<button type="button" class="close"data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×span>button>
<strong>Holy guacamole!strong> Best check yoself, you're not looking too good.
div>
<div class="alert alert-danger alert-dismissible fade in"role="alert">
<button type="button" class="close"data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×span>button>
<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 actionbutton>
<button type="button"class="btn btn-default">Or do thisbutton>
p>
div>
div>
body>
八：按钮
1. 加载状态
<body style="padding: 20px">
<button type="button"id="myButton" data-loading-text="Loading..."class="btn btn-primary" autocomplete="off">
Loading state
button>
<script>
$('#myButton').on('click', function () {
var $btn = $(this).button('loading');
// business logic...
//$btn.button('reset');
});
script>
body>
2．单个切换
<body style="padding: 20px">
<button type="button"class="btn btn-primary" data-toggle="button" aria-pressed="false"autocomplete="off">
Single toggle
button>
body>
3.复选框
<body style="padding: 20px">
<div class="btn-group"data-toggle="buttons">
<label class="btnbtn-primary active">
<input type="checkbox"autocomplete="off" checked> Checkbox 1 (pre-checked)
label>
<label class="btnbtn-primary">
<input type="checkbox"autocomplete="off"> Checkbox 2
label>
<label class="btnbtn-primary">
<input type="checkbox"autocomplete="off"> Checkbox 3
label>
div>
body>
4.单选按钮
<body style="padding: 20px">
<div class="btn-group"data-toggle="buttons">
<label class="btnbtn-primary active">
<input type="radio"name="options" id="option1"autocomplete="off" checked> Radio 1 (preselected)
label>
<label class="btnbtn-primary">
<input type="radio"name="options" id="option2"autocomplete="off"> Radio 2
label>
<label class="btnbtn-primary">
<input type="radio"name="options" id="option3"autocomplete="off"> Radio 3
label>
div>
body>
5.方法
<body style="padding: 20px">
<button type="button"id="aButton" class="btn btn-primary"data-complete-text="finished!" autocomplete="off">
a button
button>
<hr/>
<button type="button"id="toggle">togglebutton>
<button type="button"id="s">stringbutton>
<button type="button"id="reset">resetbutton>
<script>
$('#toggle').on('click', function () {
$("#aButton").button("toggle");
});
$('#s').on('click', function () {
$("#aButton").button("complete");
});
$('#reset').on('click', function () {
$("#aButton").button("reset");
});
script>
body>
九：折叠
1.基本实例
<body style="padding: 20px">
<div class="bs-example">
<p>
<a class="btnbtn-primary collapsed"data-toggle="collapse" href="#collapseExample"aria-expanded="false" aria-controls="collapseExample">
Link with href
a>
<button class="btnbtn-primary" type="button"data-toggle="collapse" data-target="#collapseExample"aria-expanded="false" aria-controls="collapseExample">
Button with data-target
button>
p>
<div class="collapse"id="collapseExample" aria-expanded="false" style="height: 0px;">
<div class="well">
labore wes andersoncred nesciunt sapiente ea proident.
div>
div>
div>
body>
2.折叠面板
<body style="padding: 20px">
<div class="panel-group"id="accordion" role="tablist" aria-multiselectable="true">
<div class="panelpanel-default">
<div class="panel-heading"role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
a>
h4>
div>
<div id="collapseOne"class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
you probably haven't heard of them accusamuslabore sustainable VHS.
div>
div>
div>
<div class="panelpanel-default">
<div class="panel-heading"role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse"data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
a>
h4>
div>
<div id="collapseTwo"class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
beer farm-to-table, raw denim aestheticsynth nesciunt you probably haven't heard of them accusamus labore sustainableVHS.
div>
div>
div>
<div class="panelpanel-default">
<div class="panel-heading"role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse"data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
a>
h4>
div>
<div id="collapseThree"class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
you probably haven't heard ofthem accusamus labore sustainable VHS.
div>
div>
div>
div>
body>
3.折叠列表
<body style="padding: 20px">
<div class="panel-group"role="tablist">
<div class="panelpanel-default">
<div class="panel-heading"role="tab" id="collapseListGroupHeading1">
<h4 class="panel-title">
<a class="" data-toggle="collapse"href="#collapseListGroup1" aria-expanded="true" aria-controls="collapseListGroup1">
Collapsible list group
a>
h4>
div>
<div id="collapseListGroup1"class="panel-collapse collapse in" role="tabpanel" aria-labelledby="collapseListGroupHeading1" aria-expanded="true">
<ul class="list-group">
<li class="list-group-item">Bootplyli>
<li class="list-group-item">One itmus acfacilinli>
<li class="list-group-item">Second erosli>
ul>
<div class="panel-footer">Footerdiv>
div>
div>
div>
body>
4.方法
<body style="padding: 20px">
<div class="panel-group"id="accordion">
<div class="panelpanel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne">
点击我进行展开，再次点击我进行折叠。第 1 部分--hide 方法
a>
h4>
div>
<div id="collapseOne"class="panel-collapse collapse in">
<div class="panel-body">
Nihil anim keffiyehhelvetica, craft beer labore wes anderson cred
nesciunt sapiente eaproident. Ad vegan excepteur butcher vice
lomo.
div>
div>
div>
<div class="panelpanel-success">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo">
点击我进行展开，再次点击我进行折叠。第 2 部分--show 方法
a>
h4>
div>
<div id="collapseTwo"class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyehhelvetica, craft beer labore wes anderson cred
nesciunt sapiente eaproident. Ad vegan excepteur butcher vice
lomo.
div>
div>
div>
<div class="panelpanel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseThree">
点击我进行展开，再次点击我进行折叠。第 3 部分--toggle 方法
a>
h4>
div>
<div id="collapseThree"class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyehhelvetica, craft beer labore wes anderson cred
nesciunt sapiente eaproident. Ad vegan excepteur butcher vice
lomo.
div>
div>
div>
<div class="panelpanel-warning">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseFour">
点击我进行展开，再次点击我进行折叠。第 4 部分--options 方法
a>
h4>
div>
<div id="collapseFour"class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyehhelvetica, craft beer labore
div>
div>
div>
div>
<script type="text/javascript">
$(function () { $('#collapseFour').collapse({
toggle: false
})});
$(function () { $('#collapseTwo').collapse('show')});
$(function () { $('#collapseThree').collapse('toggle')});
$(function () { $('#collapseOne').collapse('hide')});
script>
body>
十：轮播组件
1.基本实例
<body style="padding: 20px">
<div id="carousel-example-generic"class="carousel slide" data-ride="carousel" style="width: 800px">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active">li>
<li data-target="#carousel-example-generic" data-slide-to="1" class="">li>
<li data-target="#carousel-example-generic" data-slide-to="2" class="">li>
ol>
<div class="carousel-inner"role="listbox">
<div class="item next left">
<img data-src="holder.js/900x500/auto/#777:#555/text:Firstslide" alt="First slide[900x500]" src="data:image/svg"data-holder-rendered="true">
div>
<div class="item">
<img data-src="holder.js/900x500/auto/#666:#444/text:Second slide"alt="Second slide [900x500]" src="data:image/svg+xml;base64" data-holder-rendered="true">
div>
<div class="item active left">
<img data-src="holder.js/900x500/auto/#555:#333/text:Thirdslide" alt="Third slide[900x500]" src="duuuu"data-holder-rendered="true">
div>
div>
<a class="leftcarousel-control" href="#carousel-example-generic"role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true">span>
<span class="sr-only">Previousspan>
a>
<a class="rightcarousel-control" href="#carousel-example-generic"role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true">span>
<span class="sr-only">Nextspan>
a>
div>
body>
2. 方法
<body style="padding: 20px">
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="width: 800px">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active">li>
<li data-target="#carousel-example-generic" data-slide-to="1" class="">li>
<li data-target="#carousel-example-generic" data-slide-to="2" class="">li>
ol>
<div class="carousel-inner" role="listbox">
<div class="item next left">
<img data-src="holder.js/900x500/auto/#777:#555/text:Firstslide" alt="First slide[900x500]" src="data:image/svg+xml;" data-holder-rendered="true">
div>
<div class="item">
<img data-src="holder.js/900x500/auto/#666:#444/text:Secondslide" alt="Second slide[900x500]" src="data:image/svg+xml;" data-holder-rendered="true">
div>
<div class="item active left">
<img data-src="holder.js/900x500/auto/#555:#333/text:Thirdslide" alt="Third slide[900x500]" src="data:image/svg+xml;base64," data-holder-rendered="true">
div>
div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true">span>
<span class="sr-only">Previousspan>
a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true">span>
<span class="sr-only">Nextspan>
a>
div>
<hr/>
<input type="button" class="btnstart-slide" value="Start">
<input type="button" class="btnpause-slide" value="Pause">
<input type="button" class="btnprev-slide" value="PreviousSlide">
<input type="button" class="btnnext-slide" value="NextSlide">
<input type="button" class="btnslide-one" value="Slide 1">
<input type="button" class="btnslide-two" value="Slide 2">
<input type="button" class="btnslide-three" value="Slide 3">
<script>
$(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.基本实例
<style type="text/css">
/* 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>
<body data-spy="scroll"data-target="#myScrollspy">
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Affixh1>
div>
<div class="row">
<div class="col-xs-3" id="myScrollspy">
<ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
<li class="active"><a href="#section-1">第一部分a>li>
<li><a href="#section-2">第二部分a>li>
<li><a href="#section-3">第三部分a>li>
<li><a href="#section-4">第四部分a>li>
<li><a href="#section-5">第五部分a>li>
ul>
div>
<div class="col-xs-9">
<h2 id="section-1">第一部分h2>
<p> id interdum neque porttitor. Integer faucibus ligula.p>am tristique, accumsannunc eu, hendrerit tellus.p>
<hr>
<h2 id="section-2">第二部分h2>
<p> consequat.p>
<p> molestie nec nibh in, hendrerit tincidunt ante. Vivamussem augue, hendrerit non sapien in, mollis ornare augue.p>
<hr>
<h2 id="section-3">第三部分h2>
<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 i aliquam id, tincidunt sit amet mauris.p>
<p> Curabitur bibendum in ligula ut rhoncus.p>
<p> eget convallis tellus. Suspendisse potenti.p>
<hr>
<h2 id="section-4">第四部分h2>
<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>
<h2 id="section-5">第五部分h2>
<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>
div>
div>
body>
2.方法
<style type="text/css">
/* 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>
<script type="text/javascript">
$(document).ready(function(){
$("#myNav").affix({
offset: {
top: 150
}
});
});
script>
head>
<body data-spy="scroll"data-target="#myScrollspy">
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Affixh1>
div>
<div class="row">
<div class="col-xs-3" id="myScrollspy">
<ul class="nav nav-tabs nav-stacked" id="myNav">
<li class="active"><a href="#section-1">第一部分a>li>
<li><a href="#section-2">第二部分a>li>
<li><a href="#section-3">第三部分a>li>
<li><a href="#section-4">第四部分a>li>
<li><a href="#section-5">第五部分a>li>
ul>
div>
<div class="col-xs-9">
<h2 id="section-1">第一部分h2>
<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>
<h2 id="section-2">第二部分h2>
<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>
<h2 id="section-3">第三部分h2>
<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>
<h2 id="section-4">第四部分h2>
<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>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>
<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>
<h2 id="section-5">第五部分h2>
<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>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>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>
div>
div>
body>