bootstrap基础（三）
一：模态框
给button按钮绑定时间【data-toggle="modal" data-target="#my"】
1 <div class="modal-dialog" role="document"> 2 <div class="modal-content"> 3 <div class="modal-header"> 4 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 5 <h4 class="modal-title">Modal title</h4> 6 </div> 7 <div class="modal-body"> 8 <p>One fine body…</p> 9 </div> 10 <div class="modal-footer"> 11 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 12 <button type="button" class="btn btn-primary">Save changes</button> 13 </div> 14 </div><!-- /.modal-content --> 15 </div><!-- /.modal-dialog --> 16 </div><!-- /.modal -->
模态框大小：【放在modal里面标签上的 。modal-lg/md/sm/xs】
动画效果：【.fade】 禁止动画效果：【去掉 .fade】
增强模态框的可访问性：【.modal 添加 role="dialog" 和 aria-labelledby="..." 属性】
【.modal-dialog 添加aria-hidden="true" 属性】
【你还应该通过 aria-describedby 属性为模态框 .modal 添加描述性信息】
可选尺寸：【.modal-dialog 增加一个样式调整类实现】
Remove animation：【实例如下】
1 <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel"> 2 <div class="modal-dialog" role="document"> 3 <div class="modal-content"> 4 <div class="modal-header"> 5 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 6 <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4> 7 </div> 8 <div class="modal-body"> 9 <div class="row"> 10 <div class="col-md-4">.col-md-4</div> 11 <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> 12 </div> 13 <div class="row"> 14 <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> 15 <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div> 16 </div> 17 <div class="row"> 18 <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> 19 </div> 20 <div class="row"> 21 <div class="col-sm-9"> 22 Level 1: .col-sm-9 23 <div class="row"> 24 <div class="col-xs-8 col-sm-6"> 25 Level 2: .col-xs-8 .col-sm-6 26 </div> 27 <div class="col-xs-4 col-sm-6"> 28 Level 2: .col-xs-4 .col-sm-6 29 </div> 30 </div> 31 </div> 32 </div> 33 </div> 34 <div class="modal-footer"> 35 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 36 <button type="button" class="btn btn-primary">Save changes</button> 37 </div> 38 </div><!-- /.modal-content --> 39 </div><!-- /.modal-dialog --> 40 </div><!-- /.modal -->
Varying modal content based on trigger button：【如下】
1 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button> 2 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button> 3 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button> 4 ...more buttons... 5 6 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> 7 <div class="modal-dialog" role="document"> 8 <div class="modal-content"> 9 <div class="modal-header"> 10 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 11 <h4 class="modal-title" id="exampleModalLabel">New message</h4> 12 </div> 13 <div class="modal-body"> 14 <form> 15 <div class="form-group"> 16 <label for="recipient-name" class="control-label">Recipient:</label> 17 <input type="text" class="form-control" id="recipient-name"> 18 </div> 19 <div class="form-group"> 20 <label for="message-text" class="control-label">Message:</label> 21 <textarea class="form-control" id="message-text"></textarea> 22 </div> 23 </form> 24 </div> 25 <div class="modal-footer"> 26 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 27 <button type="button" class="btn btn-primary">Send message</button> 28 </div> 29 </div> 30 </div> 31 </div> 32 33 34 35 $('#exampleModal').on('show.bs.modal', function (event) { 36 var button = $(event.relatedTarget) // Button that triggered the modal 37 var recipient = button.data('whatever') // Extract info from data-* attributes 38 // If necessary, you could initiate an AJAX request here (and then do the updating in a callback). 39 // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead. 40 var modal = $(this) 41 modal.find('.modal-title').text('New message to ' + recipient) 42 modal.find('.modal-body input').val(recipient) 43 })
一个正经的模态框：【1. .modal-header 2. .modal-body 3. .modal-footer】
参数：【backdrop： true/false/'static' --> 遮罩层的参数
keyboard: true/false --> 键盘上的ESC按键】
事件：【显示之前/显示完/显示之前/隐藏完】
1 $(document).ready(function () { 2 $('#myModal').on('show.bs.modal', function (e) { 3 // do something... 4 alert("我让模态框显示出来，但是它还没来得及显示"); 5 }); 6 7 $('#myModal').on('shown.bs.modal', function (e) { 8 // do something... 9 alert("我让模态框显示出来，现在它已经显示出来了"); 10 })
二：轮播图
1 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 2 <!-- Indicators --> 3 <ol class="carousel-indicators"> 4 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 5 <li data-target="#carousel-example-generic" data-slide-to="1"></li> 6 <li data-target="#carousel-example-generic" data-slide-to="2"></li> 7 </ol> 8 9 <!-- Wrapper for slides --> 10 <div class="carousel-inner" role="listbox"> 11 <div class="item active"> 12 <img src="..." alt="..."> 13 <div class="carousel-caption"> 14 ... 15 </div> 16 </div> 17 <div class="item"> 18 <img src="..." alt="..."> 19 <div class="carousel-caption"> 20 ... 21 </div> 22 </div> 23 ... 24 </div> 25 26 <!-- Controls --> 27 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 28 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 29 <span class="sr-only">Previous</span> 30 </a> 31 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 32 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 33 <span class="sr-only">Next</span> 34 </a> 35 </div>
三：伸缩
1 <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 2 <div class="panel panel-default"> 3 <div class="panel-heading" role="tab" id="headingOne"> 4 <h4 class="panel-title"> 5 <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 6 Collapsible Group Item #1 7 </a> 8 </h4> 9 </div> 10 <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 11 <div class="panel-body"> 12 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 13 </div> 14 </div> 15 </div> 16 <div class="panel panel-default"> 17 <div class="panel-heading" role="tab" id="headingTwo"> 18 <h4 class="panel-title"> 19 <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 20 Collapsible Group Item #2 21 </a> 22 </h4> 23 </div> 24 <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 25 <div class="panel-body"> 26 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 27 </div> 28 </div> 29 </div> 30 <div class="panel panel-default"> 31 <div class="panel-heading" role="tab" id="headingThree"> 32 <h4 class="panel-title"> 33 <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 34 Collapsible Group Item #3 35 </a> 36 </h4> 37 </div> 38 <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 39 <div class="panel-body"> 40 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 41 </div> 42 </div> 43 </div> 44 </div>
浙公网安备 33010602011771号