Bootstrap框架
在使用Bootstrap的時候所有的頁面樣式都只需要你通過class來調節即可。
將Bootstrap文件下載到本地，在編寫相關代碼的時候才會自動提示。
bootstrap的js代碼是依賴於jQuery的，也就意味着你在使用Bootstrap動態效果的時候，一定要導入jQuery
復制樣式HTML代碼采用 copy---> outerHTML即可
布局容器
Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 容器。我們提供了兩個作此用處的類。注意，由於 padding 等屬性的原因，這兩種 容器類不能互相嵌套。
.container 類用於固定寬度並支持響應式布局的容器。
左右兩側會有留白
<div class="container">
...
</div>
.container-fluid 類用於 100% 寬度，占據全部視口（viewport）的容器。
<div class="container-fluid">
...
</div>
左右兩側沒有留白
柵格系統
Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類，還有強大的mixin 用於生成更具語義的布局。
柵格系統用於通過一系列的行（row）與列（column）的組合來創建頁面布局，你的內容就可以放入這些創建好的布局中。下面就介紹一下 Bootstrap 柵格系統的工作原理：
- “行（row）”必須包含在
.container（固定寬度）或.container-fluid（100% 寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。 - 通過“行（row）”在水平方向創建一組“列（column）”。
- 你的內容應當放置於“列（column）”內，並且，只有“列（column）”可以作為行（row）”的直接子元素。
- 類似
.row和.col-xs-4這種預定義的類，可以用來快速創建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來創建語義化的布局。 - 通過為“列（column）”設置
padding屬性，從而創建列與列之間的間隔（gutter）。通過為.row元素設置負值margin從而抵消掉為.container元素設置的padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。 - 負值的 margin就是下面的示例為什么是向外突出的原因。在柵格列中的內容排成一行。
- 柵格系統中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個等寬的列可以使用三個
.col-xs-4來創建。 - 如果一“行（row）”中包含了的“列（column）”大於 12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列。
- 柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 並且針對小屏幕設備覆蓋柵格類。 因此，在元素上應用任何
.col-md-*柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 並且針對小屏幕設備覆蓋柵格類。 因此，在元素上應用任何.col-lg-*不存在， 也影響大屏幕設備。
<div class="row"></div>
寫一個row就是將所在的區域划分成12份
<div class="col-md-6 "> 獲取你所要的份數
# 在使用bootstrap的時候 腦子里面一定要做12的加減法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
<script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<style>
.c1 {
background-color: green;
height: 100px;
border: 5px solid blue;
}
</style>
</head>
<body>
<div class="container">
<div class="row"> <!--默認分為12份-->
<!-- 每一個div占用六份-->
<div class="col-md-6 c1">
<div class="row">
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-4 c1"></div>
</div>
</div>
<div class="col-md-6 c1"></div>
<br>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<br>
<div class="col-md-3 c1"></div>
<div class="col-md-9 c1"></div>
</div>
</div>
</body>
</html>
柵格參數
col-xs- .col-sm- .col-md- .col-lg-
# 針對不同的顯示器 bootstrap會自動選擇對應的參數
# 如果你想要兼容所有的顯示器 你就全部加上即可
# 在一行如何移動位置 從左往右移動兩份
<div class="col-md-8 c1 col-md-offset-2"></div>
排版
bootstrap將所有原生的HTML標簽的文本字體統一設置成了肉眼可以接受的樣式
效果一樣，但是標簽表達的意思不一樣（語義）。
在標題內還可以包含 <small> 標簽或賦予 .small 類的元素，可以用來標記副標題。
通過添加 .lead 類可以讓段落突出顯示。
額外插入的文本（給文字添加相應的下划線）使用 <ins> 標簽。
為文本添加下划線，使用 <u> 標簽。
用斜體強調一段文本，使用<em>標簽。
- 對齊方式(使用Bootstrap操作的都是class屬性)
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
- 文本內容詳細解釋
<abbr title="attribute">attr</abbr>
表格
- 基本實例
為任意 <table> 標簽添加 .table 類可以為其賦予基本的樣式 — 少量的內補（padding）和水平方向的分隔線。這種方式看起來很多余！？但是我們覺得，表格元素使用的很廣泛，如果我們為其賦予默認樣式可能會影響例如日歷和日期選擇之類的插件，所以我們選擇將此樣式獨立出來。
<table class="table">
...
</table>
- 條紋狀表格
通過 .table-striped 類可以給 <tbody> 之內的每一行增加斑馬條紋樣式。
<table class="table table-striped">
...
</table>
- 帶邊框的表格
添加 .table-bordered 類為表格和其中的每個單元格增加邊框。
<table class="table table-bordered">
...
</table>
- 鼠標懸浮
通過添加 .table-hover 類可以讓 <tbody> 中的每一行對鼠標懸停狀態作出響應。
<table class="table table-condensed">
...
</table>
- 狀態類(定義標簽的顏色變化)
| Class | 描述 |
|---|---|
.active |
鼠標懸停在行或單元格上時所設置的顏色 |
.success |
標識成功或積極的動作 |
.info |
標識普通的提示信息或動作 |
.warning |
標識警告或需要用戶注意 |
.danger |
標識危險或潛在的帶來負面影響的動作 |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
表單
單獨的表單控件會被自動賦予一些全局樣式。所有設置了 .form-control 類的 <input>、<textarea> 和 <select> 元素都將被默認設置寬度屬性為 width: 100%;。 將 label 元素和前面提到的控件包裹在 .form-group 中可以獲得最好的排列。
<body>
<div class="container">
<div class="col-md-4 col-md-offset-4">
<h2 class="text-center">登錄頁面</h2>
<form action="">
<!-- form-control 會讓標簽顯示寬度直接跟分配的區域一樣大-->
<p>username: <input type="text" class="form-control"></p>
<p>password: <input type="text" class="form-control"></p>
<input type="submit">
</form>
</div>
</div>
</body>
# 針對表單標簽 加樣式就用form-control
class="form-control"
"""
<input type="checkbox">222
<input type="radio">333
checkbox和radio我們一般不會給它加form-control，直接使用原生的即可
"""
# 針對報錯信息 可以加has-error（input的父標簽加）
<p class="has-error">
username:
<input type="text" class="form-control">
</p>
登錄界面案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="col-md-4 col-md-offset-4">
<h2 class="text-center">登錄頁面</h2>
<form action="">
<!-- form-control 會讓標簽顯示寬度直接跟分配的區域一樣大-->
<p>username: <input type="text" class="form-control"></p>
<p>password: <input type="text" class="form-control"></p>
<input type="submit" class="btn btn-primary">
</form>
</div>
</div>
</body>
</html>
按鈕
為 <a>、<button> 或 <input> 元素添加按鈕類（button class）即可使用 Bootstrap 提供的樣式。
<a href="https://www.mzitu.com/" class="btn btn-primary">點我</a>
<button class="btn btn-danger">按我</button>
<button class="btn btn-default">按我</button>
<button class="btn btn-success">按我</button>
<button class="btn btn-info">按我</button>
<button class="btn btn-warning">按我</button>
<button class="btn btn-warning btn-lg">按我</button>
<button class="btn btn-warning btn-sm">按我</button>
<button class="btn btn-warning btn-xs">按我</button>
<input type="submit" class="btn btn-primary btn-block">
# 通過給按鈕添加 .btn-block 類可以將其拉伸至父元素100%的寬度，而且按鈕也變為了塊級（block）元素。
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
<!-- Standard button -->
<button type="button" class="btn btn-default">（默認樣式）Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首選項）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危險）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（鏈接）Link</button>
圖片布局
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<img src="https://tvax1.sinaimg.cn/mw1024/9d52c073gy1gpzir9i155j20u011iagu.jpg" alt="..." class="img-rounded">
<img src="https://tvax1.sinaimg.cn/mw1024/9d52c073gy1gpzir9i155j20u011iagu.jpg" alt="..." class="img-circle">
<img src="https://tvax1.sinaimg.cn/mw1024/9d52c073gy1gpzir9i155j20u011iagu.jpg" alt="..." class="img-thumbnail">
</div>
</div>
</div>
清除浮動
通過為父元素添加 .clearfix 類可以很容易地清除浮動（float），此類還可以作為 mixin 使用。
<!-- Usage as a class -->
<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a mixin
.element {
.clearfix();
}
圖標
<div class="container">
<div class="col-md-4 col-md-offset-4">
<h2 class="text-center">登錄頁面 <span class="glyphicon glyphicon-user"></span></h2>
<form action="">
<!-- form-control 會讓標簽顯示寬度直接跟分配的區域一樣大-->
<p>username: <input type="text" class="form-control"></p>
<p>password: <input type="text" class="form-control"></p>
<input type="submit" class="btn btn-primary">
</form>
</div>
</div>
# 修改圖標的顏色 直接修改其字體顏色即可
<style>
span {
color: red;
}
</style>
fontawsome圖標庫：https://fontawesome.dashgame.com/
導航條
<nav class="navbar navbar-inverse">
<nav class="navbar navbar-default">
分頁器
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active"><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">»</span>
</a>
</li>
</ul>
</nav>
彈框
https://lipis.github.io/bootstrap-sweetalert/
swal('你還好嗎?')
undefined
swal('你還好嗎?')
undefined
swal('你還好嗎?','我不好，想你了!')
undefined
swal('你還好嗎?','我不好，想你了!','success')
undefined
swal('你還好嗎?','我不好，想你了!','warning')
undefined
swal('你還好嗎?','我不好，想你了!','error')
undefined
swal('你還好嗎?','我不好，想你了!','info')
undefined
進度條
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="progress">
<div id="d2" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 10%">
</div>
</div>
<button id="d1" class="btn btn-danger">開始</button>
<script>
function func(i){
let tempWidth = 'width:' + i + '%'; // 拼接style后面得參數
let contentText = i + '%' // 文本屬性
$('#d2').attr('style', tempWidth).text(contentText)
}
$('#d1').click(function () {
for(let i = 0; i < 101; i++){
setInterval(func(i), 5000);
}
})
</script>
</body>
</html>
鏈接
用 <a> 標簽代替 <li> 標簽可以組成一個全部是鏈接的列表組（還要注意的是，我們需要將 <ul> 標簽替換為 <div> 標簽）。沒必要給列表組中的每個元素都加一個父元素。
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
模態框
模態框經過了優化，更加靈活，以彈出對話框的形式出現，具有最小和最實用的功能集。
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
<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">×</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
</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 changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
輪播圖案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
<script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<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 active">
<img data-src="holder.js/1140x500/auto/#777:#555/text:First slide" alt="First slide [1140x500]" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTE0MCIgaGVpZ2h0PSI1MDAiIHZpZXdCb3g9IjAgMCAxMTQwIDUwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvMTE0MHg1MDAvYXV0by8jNzc3OiM1NTUvdGV4dDpGaXJzdCBzbGlkZQpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE3OTY1ZDdmNmY3IHRleHQgeyBmaWxsOiM1NTU7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NTdwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTc5NjVkN2Y2ZjciPjxyZWN0IHdpZHRoPSIxMTQwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzc3NyIvPjxnPjx0ZXh0IHg9IjM5MC41IiB5PSIyNzUuMzczNDM3NSI+Rmlyc3Qgc2xpZGU8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" data-holder-rendered="true">
</div>
<div class="item">
<img data-src="holder.js/1140x500/auto/#666:#444/text:Second slide" alt="Second slide [1140x500]" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTE0MCIgaGVpZ2h0PSI1MDAiIHZpZXdCb3g9IjAgMCAxMTQwIDUwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvMTE0MHg1MDAvYXV0by8jNjY2OiM0NDQvdGV4dDpTZWNvbmQgc2xpZGUKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNzk2NWQ3ZjFmOSB0ZXh0IHsgZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjU3cHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE3OTY1ZDdmMWY5Ij48cmVjdCB3aWR0aD0iMTE0MCIgaGVpZ2h0PSI1MDAiIGZpbGw9IiM2NjYiLz48Zz48dGV4dCB4PSIzMzUuNTkzNzUiIHk9IjI3NS4zNzM0Mzc1Ij5TZWNvbmQgc2xpZGU8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" data-holder-rendered="true">
</div>
<div class="item">
<img data-src="holder.js/1140x500/auto/#555:#333/text:Third slide" alt="Third slide [1140x500]" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTE0MCIgaGVpZ2h0PSI1MDAiIHZpZXdCb3g9IjAgMCAxMTQwIDUwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvMTE0MHg1MDAvYXV0by8jNTU1OiMzMzMvdGV4dDpUaGlyZCBzbGlkZQpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE3OTY1ZDgxZjQwIHRleHQgeyBmaWxsOiMzMzM7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NTdwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTc5NjVkODFmNDAiPjxyZWN0IHdpZHRoPSIxMTQwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzU1NSIvPjxnPjx0ZXh0IHg9IjM3Ny44NTkzNzUiIHk9IjI3NS4zNzM0Mzc1Ij5UaGlyZCBzbGlkZTwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered="true">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev" one-link-mark="yes">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next" one-link-mark="yes">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>