首页 > 代码库 > bootstrap相关使用案例
bootstrap相关使用案例
引文件:
<link href=http://www.mamicode.com/"dist/css/bootstrap.min.css" rel="stylesheet" /> <link href=http://www.mamicode.com/"dist/css/bug-workaround.css" rel="stylesheet" /> <script src=http://www.mamicode.com/"dist/js/jquery-1.12.4.js"></script> <script src=http://www.mamicode.com/"dist/js/bootstrap.min.js"></script>
菜单:
<div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar"> <li><a href=http://www.mamicode.com/"/home/backstage">关于我们</a></li> <li><a href=http://www.mamicode.com/"/home/backstageb">建站案例</a></li> <li><a href=http://www.mamicode.com/"/home/backstagek">知识园地</a></li> <li><a href=http://www.mamicode.com/"/home/backstagen">新闻资讯</a></li> <li><a href=http://www.mamicode.com/"#">在线留言</a></li> </ul> </div> </div> </div>
模态框:
<div style="width:40px;height:20px;background-color:gray;" id="sr"></div> <div class="modal fade" id="gg" 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-hidden="true">×</button> <h4 class="modal-title">发布案列</h4> </div> <div class="modal-body"> <h5>产品名:</h5> <input type="text" name="bname" /> <h5 id="ts_name"></h5> <h5>链接:</h5> <input type="text" name="blink" /> <h5 id="ts_lj"></h5> <h5>图片:</h5> <input type="file" name="image" /> <h5 id="ts_tp"></h5> <input type="submit" id="btn_fabu" class="btn btn-primary" value=http://www.mamicode.com/"发布" /> <!--内容 结束--> </div> <div class="modal-footer"> <button id="Button4" type="button" class="btn btn-default" data-dismiss="modal">关闭</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div>
一段js,点击发生模态框:
document.getElementById("sr").onclick = function () { $(‘#gg‘).modal({ keyboard: true }); }
bootstrap相关使用案例
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。