zoukankan      html  css  js  c++  java
  • bootstrap相关使用案例

    引文件:

    <link href="dist/css/bootstrap.min.css" rel="stylesheet" />
        <link href="dist/css/bug-workaround.css" rel="stylesheet" />
        <script src="dist/js/jquery-1.12.4.js"></script>
        <script src="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="/home/backstage">关于我们</a></li>
                        <li><a href="/home/backstageb">建站案例</a></li>
                        <li><a href="/home/backstagek">知识园地</a></li>
                        <li><a href="/home/backstagen">新闻资讯</a></li>
                        <li><a href="#">在线留言</a></li>
                    </ul>
    
                </div>
            </div>
        </div>

    模态框:

     <div style="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="发布" />
                        
                        <!--内容 结束-->
                    </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
            });
    
        }
  • 相关阅读:
    DataTable的一些使用技巧
    Linux下使用Mysql
    【Cocos2d-X开发学习笔记】第28期:游戏中音乐和音效的使用
    HDU 4669 Mutiples on a circle (DP , 统计)
    面试经典-设计包含min函数的栈
    最大熵模型
    这篇文章关于两阶段提交和Paxos讲的很好
    【读书笔记】神经网络与深度学习
    这个对协程的分析不错
    sendfile学习
  • 原文地址:https://www.cnblogs.com/wy1992/p/6937159.html
Copyright © 2011-2022 走看看