Bootstrap框架
在使用Bootstrap的时候所有的页面样式都只需要你通过class来调节即可。
https://v3.bootcss.com/
将Bootstrap文件下载到本地，在编写相关代码的时候才会自动提示。
bootstrap的js代码是依赖于jQuery的，也就意味着你在使用Bootstrap动态效果的时候，一定要导入jQuery
复制样式HTML代码采用 copy—> outerHTML即可
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
左右两侧会有留白
1<divclass=”container”>2…3</div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
1<divclass=”container-fluid”>2…3</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- 不存在， 也影响大屏幕设备。
1<divclass=”row”></div>2写一个row就是将所在的区域划分成12份34<divclass=”col-md-6″>获取你所要的份数5#在使用bootstrap的时候脑子里面一定要做12的加减法 1<!DOCTYPEhtml> 2<htmllang=”en”> 3<head> 4<metacharset=”UTF-8″> 5<title>Title</title> 6<metaname=”viewport”content=”width=device-width,initial-scale=1″> 7<scriptsrc=”https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js”></script> 8<linkrel=”stylesheet”href=”bootstrap-3.4.1-dist/css/bootstrap.min.css”> 9<scriptsrc=”bootstrap-3.4.1-dist/js/bootstrap.min.js”></script>1011<style>12.c1{13background-color:green;14height:100px;15border:5pxsolidblue;16}17</style>1819</head>20<body>2122<divclass=”container”>23<divclass=”row”><!–默认分为12份–>24<!–每一个div占用六份–>25<divclass=”col-md-6c1″>26<divclass=”row”>27<divclass=”col-md-1c1″></div>28<divclass=”col-md-1c1″></div>29<divclass=”col-md-1c1″></div>30<divclass=”col-md-1c1″></div>31<divclass=”col-md-1c1″></div>32<divclass=”col-md-1c1″></div>33<divclass=”col-md-1c1″></div>34<divclass=”col-md-1c1″></div>35<divclass=”col-md-4c1″></div>36</div>37</div>38<divclass=”col-md-6c1″></div>39<br>40<divclass=”col-md-1c1″></div>41<divclass=”col-md-1c1″></div>42<divclass=”col-md-1c1″></div>43<divclass=”col-md-1c1″></div>44<divclass=”col-md-1c1″></div>45<divclass=”col-md-1c1″></div>46<divclass=”col-md-1c1″></div>47<divclass=”col-md-1c1″></div>48<divclass=”col-md-1c1″></div>49<divclass=”col-md-1c1″></div>50<divclass=”col-md-1c1″></div>51<divclass=”col-md-1c1″></div>52<br>53<divclass=”col-md-3c1″></div>54<divclass=”col-md-9c1″></div>5556</div>57</div>58</body>59</html>栅格参数1col-xs-.col-sm-.col-md-.col-lg-2#针对不同的显示器bootstrap会自动选择对应的参数3#如果你想要兼容所有的显示器你就全部加上即可456#在一行如何移动位置从左往右移动两份7<divclass=”col-md-8c1col-md-offset-2″></div>8排版
bootstrap将所有原生的HTML标签的文本字体统一设置成了肉眼可以接受的样式
效果一样，但是标签表达的意思不一样（语义）。
在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。
通过添加 .lead 类可以让段落突出显示。
额外插入的文本（给文字添加相应的下划线）使用 <ins> 标签。
为文本添加下划线，使用 <u> 标签。
用斜体强调一段文本，使用<em>标签。
对齐方式(使用Bootstrap操作的都是class属性)
1<pclass=”text-left”>Leftalignedtext.</p>2<pclass=”text-center”>Centeralignedtext.</p>3<pclass=”text-right”>Rightalignedtext.</p>4<pclass=”text-justify”>Justifiedtext.</p>5<pclass=”text-nowrap”>Nowraptext.</p>
文本内容详细解释
1<abbrtitle=”attribute”>attr</abbr>表格
基本实例
为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。
1<tableclass=”table”>2…3</table>
条纹状表格
通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。
1<tableclass=”tabletable-striped”>2…3</table>
带边框的表格
添加 .table-bordered 类为表格和其中的每个单元格增加边框。
1<tableclass=”tabletable-bordered”>2…3</table>
鼠标悬浮
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
1<tableclass=”tabletable-condensed”>2…3</table>
状态类(定义标签的颜色变化)
Class描述.active鼠标悬停在行或单元格上时所设置的颜色.success标识成功或积极的动作.info标识普通的提示信息或动作.warning标识警告或需要用户注意.danger标识危险或潜在的带来负面影响的动作 1<!–Onrows–> 2<trclass=”active”>…</tr> 3<trclass=”success”>…</tr> 4<trclass=”warning”>…</tr> 5<trclass=”danger”>…</tr> 6<trclass=”info”>…</tr> 7 8<!–Oncells(`td`or`th`)–> 9<tr>10<tdclass=”active”>…</td>11<tdclass=”success”>…</td>12<tdclass=”warning”>…</td>13<tdclass=”danger”>…</td>14<tdclass=”info”>…</td>15</tr>表单
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
1<body> 2<divclass=”container”> 3<divclass=”col-md-4col-md-offset-4″> 4<h2class=”text-center”>登录页面</h2> 5<formaction=””> 6<!–form-control会让标签显示宽度直接跟分配的区域一样大–> 7<p>username:<inputtype=”text”class=”form-control”></p> 8<p>password:<inputtype=”text”class=”form-control”></p> 9<inputtype=”submit”>10</form>11</div>12</div>13</body>1#针对表单标签加样式就用form-control2class=”form-control”3 1″”” 2<inputtype=”checkbox”>222 3<inputtype=”radio”>333 4checkbox和radio我们一般不会给它加form-control，直接使用原生的即可 5″”” 6 7#针对报错信息可以加has-error（input的父标签加） 8<pclass=”has-error”> 9username:10<inputtype=”text”class=”form-control”>11</p>12
登录界面案例
1<!DOCTYPEhtml> 2<htmllang=”en”> 3<head> 4<metacharset=”UTF-8″> 5<title>Title</title> 6<metaname=”viewport”content=”width=device-width,initial-scale=1″> 7<linkhref=”https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css”rel=”stylesheet”> 8<scriptsrc=”https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js”></script> 9<scriptsrc=”https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js”></script>1011</head>12<body>13<divclass=”container”>14<divclass=”col-md-4col-md-offset-4″>15<h2class=”text-center”>登录页面</h2>16<formaction=””>17<!–form-control会让标签显示宽度直接跟分配的区域一样大–>18<p>username:<inputtype=”text”class=”form-control”></p>19<p>password:<inputtype=”text”class=”form-control”></p>20<inputtype=”submit”class=”btnbtn-primary”>21</form>22</div>23</div>24</body>25</html>按钮
为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
1<ahref=”https://www.mzitu.com/”class=”btnbtn-primary”>点我</a> 2<buttonclass=”btnbtn-danger”>按我</button> 3<buttonclass=”btnbtn-default”>按我</button> 4<buttonclass=”btnbtn-success”>按我</button> 5<buttonclass=”btnbtn-info”>按我</button> 6<buttonclass=”btnbtn-warning”>按我</button> 7 8 9<buttonclass=”btnbtn-warningbtn-lg”>按我</button>10<buttonclass=”btnbtn-warningbtn-sm”>按我</button>11<buttonclass=”btnbtn-warningbtn-xs”>按我</button>12<inputtype=”submit”class=”btnbtn-primarybtn-block”>1314#通过给按钮添加.btn-block类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。151<aclass=”btnbtn-default”href=”#”role=”button”>Link</a>2<buttonclass=”btnbtn-default”type=”submit”>Button</button>3<inputclass=”btnbtn-default”type=”button”value=”Input”>4<inputclass=”btnbtn-default”type=”submit”value=”Submit”> 1<!–Standardbutton–> 2<buttontype=”button”class=”btnbtn-default”>（默认样式）Default</button> 3 4<!–Providesextravisualweightandidentifiestheprimaryactioninasetofbuttons–> 5<buttontype=”button”class=”btnbtn-primary”>（首选项）Primary</button> 6 7<!–Indicatesasuccessfulorpositiveaction–> 8<buttontype=”button”class=”btnbtn-success”>（成功）Success</button> 910<!–Contextualbuttonforinformationalalertmessages–>11<buttontype=”button”class=”btnbtn-info”>（一般信息）Info</button>1213<!–Indicatescautionshouldbetakenwiththisaction–>14<buttontype=”button”class=”btnbtn-warning”>（警告）Warning</button>1516<!–Indicatesadangerousorpotentiallynegativeaction–>17<buttontype=”button”class=”btnbtn-danger”>（危险）Danger</button>1819<!–Deemphasizeabuttonbymakingitlooklikealinkwhilemaintainingbuttonbehavior–>20<buttontype=”button”class=”btnbtn-link”>（链接）Link</button>图片布局1<divclass=”container”>2<divclass=”row”>3<divclass=”col-md-8col-md-offset-2″>4<imgsrc=”https://tvax1.sinaimg.cn/mw1024/9d52c073gy1gpzir9i155j20u011iagu.jpg”alt=”…”class=”img-rounded”>5<imgsrc=”https://tvax1.sinaimg.cn/mw1024/9d52c073gy1gpzir9i155j20u011iagu.jpg”alt=”…”class=”img-circle”>6<imgsrc=”https://tvax1.sinaimg.cn/mw1024/9d52c073gy1gpzir9i155j20u011iagu.jpg”alt=”…”class=”img-thumbnail”>7</div>8</div>9</div>清除浮动
通过为父元素添加 .clearfix 类可以很容易地清除浮动（float），此类还可以作为 mixin 使用。
1<!–Usageasaclass–>2<divclass=”clearfix”>…</div> 1//Mixinitself 2.clearfix(){ 3&:before, 4&:after{ 5content:””; 6display:table; 7} 8&:after{ 9clear:both;10}11}1213//Usageasamixin14.element{15.clearfix();16}图标 1<divclass=”container”> 2<divclass=”col-md-4col-md-offset-4″> 3<h2class=”text-center”>登录页面<spanclass=”glyphiconglyphicon-user”></span></h2> 4<formaction=””> 5<!–form-control会让标签显示宽度直接跟分配的区域一样大–> 6<p>username:<inputtype=”text”class=”form-control”></p> 7<p>password:<inputtype=”text”class=”form-control”></p> 8<inputtype=”submit”class=”btnbtn-primary”> 9</form>10</div>11</div>1#修改图标的颜色直接修改其字体颜色即可2<style>3span{4color:red;5}6</style>
fontawsome图标库：https://fontawesome.dashgame.com/
导航条1<navclass=”navbarnavbar-inverse”>2<navclass=”navbarnavbar-default”>分页器 1<navaria-label=”Pagenavigation”> 2<ulclass=”pagination”> 3<li> 4<ahref=”#”aria-label=”Previous”> 5<spanaria-hidden=”true”>«</span> 6</a> 7</li> 8<liclass=”active”><ahref=”#”>1</a></li> 9<li><ahref=”#”>2</a></li>10<li><ahref=”#”>3</a></li>11<li><ahref=”#”>4</a></li>12<li><ahref=”#”>5</a></li>13<li>14<ahref=”#”aria-label=”Next”>15<spanaria-hidden=”true”>»</span>16</a>17</li>18</ul>19</nav>弹框
https://lipis.github.io/bootstrap-sweetalert/
1swal(‘你还好吗?’) 2undefined 3swal(‘你还好吗?’) 4undefined 5swal(‘你还好吗?’,’我不好，想你了!’) 6undefined 7swal(‘你还好吗?’,’我不好，想你了!’,’success’) 8undefined 9swal(‘你还好吗?’,’我不好，想你了!’,’warning’)10undefined11swal(‘你还好吗?’,’我不好，想你了!’,’error’)12undefined13swal(‘你还好吗?’,’我不好，想你了!’,’info’)14undefined进度条 1<!DOCTYPEhtml> 2<htmllang=”en”> 3<head> 4<metacharset=”UTF-8″> 5<title>Title</title> 6<metaname=”viewport”content=”width=device-width,initial-scale=1″> 7<linkhref=”https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css”rel=”stylesheet”> 8<scriptsrc=”https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js”></script> 9<scriptsrc=”https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js”></script>1011</head>12<body>13<divclass=”progress”>14<divid=”d2″class=”progress-barprogress-bar-stripedactive”role=”progressbar”aria-valuenow=”45″aria-valuemin=”0″aria-valuemax=”100″style=”width:10%”>15</div>161718</div>19<buttonid=”d1″class=”btnbtn-danger”>开始</button>2021<script>22functionfunc(i){23lettempWidth=’width:’ i ‘%’;//拼接style后面得参数24letcontentText=i ‘%’//文本属性25$(‘#d2’).attr(‘style’,tempWidth).text(contentText)26}27$(‘#d1’).click(function(){28for(leti=0;i<101;i ){29setInterval(func(i),5000);30}31})32</script>33</body>34</html>链接
用 <a> 标签代替 <li> 标签可以组成一个全部是链接的列表组（还要注意的是，我们需要将 <ul> 标签替换为 <div> 标签）。没必要给列表组中的每个元素都加一个父元素。
1<divclass=”list-group”>2<ahref=”#”class=”list-group-itemactive”>3Crasjustoodio4</a>5<ahref=”#”class=”list-group-item”>Dapibusacfacilisisin</a>6<ahref=”#”class=”list-group-item”>Morbileorisus</a>7<ahref=”#”class=”list-group-item”>Portaacconsecteturac</a>8<ahref=”#”class=”list-group-item”>Vestibulumateros</a>9</div>模态框
模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集。
1<divclass=”modalfade”tabindex=”-1″role=”dialog”aria-labelledby=”gridSystemModalLabel”> 2<divclass=”modal-dialog”role=”document”> 3<divclass=”modal-content”> 4<divclass=”modal-header”> 5<buttontype=”button”class=”close”data-dismiss=”modal”aria-label=”Close”><spanaria-hidden=”true”>×</span></button> 6<h4class=”modal-title”id=”gridSystemModalLabel”>Modaltitle</h4> 7</div> 8<divclass=”modal-body”> 9<divclass=”row”>10<divclass=”col-md-4″>.col-md-4</div>11<divclass=”col-md-4col-md-offset-4″>.col-md-4.col-md-offset-4</div>12</div>13<divclass=”row”>14<divclass=”col-md-3col-md-offset-3″>.col-md-3.col-md-offset-3</div>15<divclass=”col-md-2col-md-offset-4″>.col-md-2.col-md-offset-4</div>16</div>17<divclass=”row”>18<divclass=”col-md-6col-md-offset-3″>.col-md-6.col-md-offset-3</div>19</div>20<divclass=”row”>21<divclass=”col-sm-9″>22Level1:.col-sm-923<divclass=”row”>24<divclass=”col-xs-8col-sm-6″>25Level2:.col-xs-8.col-sm-626</div>27<divclass=”col-xs-4col-sm-6″>28Level2:.col-xs-4.col-sm-629</div>30</div>31</div>32</div>33</div>34<divclass=”modal-footer”>35<buttontype=”button”class=”btnbtn-default”data-dismiss=”modal”>Close</button>36<buttontype=”button”class=”btnbtn-primary”>Savechanges</button>37</div>38</div><!–/.modal-content–>39</div><!–/.modal-dialog–>40</div><!–/.modal–>轮播图案例 1<!DOCTYPEhtml> 2<htmllang=”en”> 3<head> 4<metacharset=”UTF-8″> 5<title>Title</title> 6<metaname=”viewport”content=”width=device-width,initial-scale=1″> 7<scriptsrc=”https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js”></script> 8<linkrel=”stylesheet”href=”bootstrap-3.4.1-dist/css/bootstrap.min.css”> 910<scriptsrc=”bootstrap-3.4.1-dist/js/bootstrap.min.js”></script>11</head>12<body>13<divclass=”container”>14<divclass=”row”>15<divclass=”col-md-8col-md-offset-2″>16<divid=”carousel-example-generic”class=”carouselslide”data-ride=”carousel”>17<olclass=”carousel-indicators”>18<lidata-target=”#carousel-example-generic”data-slide-to=”0″class=”active”></li>19<lidata-target=”#carousel-example-generic”data-slide-to=”1″class=””></li>20<lidata-target=”#carousel-example-generic”data-slide-to=”2″class=””></li>21</ol>22<divclass=”carousel-inner”role=”listbox”>23<divclass=”itemactive”>24<imgdata-src=”holder.js/1140×500/auto/#777:#555/text:Firstslide”alt=”Firstslide[1140×500]”src=”data:image/svg xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTE0MCIgaGVpZ2h0PSI1MDAiIHZpZXdCb3g9IjAgMCAxMTQwIDUwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvMTE0MHg1MDAvYXV0by8jNzc3OiM1NTUvdGV4dDpGaXJzdCBzbGlkZQpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0 PGRlZnM PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE3OTY1ZDdmNmY3IHRleHQgeyBmaWxsOiM1NTU7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NTdwdCB9IF1dPjwvc3R5bGU PC9kZWZzPjxnIGlkPSJob2xkZXJfMTc5NjVkN2Y2ZjciPjxyZWN0IHdpZHRoPSIxMTQwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzc3NyIvPjxnPjx0ZXh0IHg9IjM5MC41IiB5PSIyNzUuMzczNDM3NSI Rmlyc3Qgc2xpZGU8L3RleHQ PC9nPjwvZz48L3N2Zz4=”data-holder-rendered=”true”>25</div>26<divclass=”item”>27<imgdata-src=”holder.js/1140×500/auto/#666:#444/text:Secondslide”alt=”Secondslide[1140×500]”src=”data:image/svg xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTE0MCIgaGVpZ2h0PSI1MDAiIHZpZXdCb3g9IjAgMCAxMTQwIDUwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvMTE0MHg1MDAvYXV0by8jNjY2OiM0NDQvdGV4dDpTZWNvbmQgc2xpZGUKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI PCFbQ0RBVEFbI2hvbGRlcl8xNzk2NWQ3ZjFmOSB0ZXh0IHsgZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjU3cHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE3OTY1ZDdmMWY5Ij48cmVjdCB3aWR0aD0iMTE0MCIgaGVpZ2h0PSI1MDAiIGZpbGw9IiM2NjYiLz48Zz48dGV4dCB4PSIzMzUuNTkzNzUiIHk9IjI3NS4zNzM0Mzc1Ij5TZWNvbmQgc2xpZGU8L3RleHQ PC9nPjwvZz48L3N2Zz4=”data-holder-rendered=”true”>28</div>29<divclass=”item”>30<imgdata-src=”holder.js/1140×500/auto/#555:#333/text:Thirdslide”alt=”Thirdslide[1140×500]”src=”data:image/svg xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTE0MCIgaGVpZ2h0PSI1MDAiIHZpZXdCb3g9IjAgMCAxMTQwIDUwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvMTE0MHg1MDAvYXV0by8jNTU1OiMzMzMvdGV4dDpUaGlyZCBzbGlkZQpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0 PGRlZnM PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE3OTY1ZDgxZjQwIHRleHQgeyBmaWxsOiMzMzM7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NTdwdCB9IF1dPjwvc3R5bGU PC9kZWZzPjxnIGlkPSJob2xkZXJfMTc5NjVkODFmNDAiPjxyZWN0IHdpZHRoPSIxMTQwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzU1NSIvPjxnPjx0ZXh0IHg9IjM3Ny44NTkzNzUiIHk9IjI3NS4zNzM0Mzc1Ij5UaGlyZCBzbGlkZTwvdGV4dD48L2c PC9nPjwvc3ZnPg==”data-holder-rendered=”true”>31</div>32</div>33<aclass=”leftcarousel-control”href=”#carousel-example-generic”role=”button”data-slide=”prev”one-link-mark=”yes”>34<spanclass=”glyphiconglyphicon-chevron-left”aria-hidden=”true”></span>35<spanclass=”sr-only”>Previous</span>36</a>37<aclass=”rightcarousel-control”href=”#carousel-example-generic”role=”button”data-slide=”next”one-link-mark=”yes”>38<spanclass=”glyphiconglyphicon-chevron-right”aria-hidden=”true”></span>39<spanclass=”sr-only”>Next</span>40</a>41</div>42</div>43</div>44</div>45</body>46</html>
***************************************************************
完
