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="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="发布" />

                    <!--内容 结束-->
                </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
        });

    }
时间: 2024-10-11 16:32:37

bootstrap相关使用案例的相关文章

有哪些 Bootstrap 的学习案例?

bootstrap经典实用案例 bootstrap经典实用案例(非常详细),从菜鸟到高手的过程是艰辛的,你渴望救助.这本教程就是你无言的助手,默默的帮你到永远. 带奋斗一起飞翔,因为有了它,让我拥有理智之思:我才使过去的失误不再重演到今天的影片里:我才能使过去的成功在人生中继续升华:我才能真正收获金秋丰硕的果实,品味人生的快乐. 出处:http://download.csdn.net/download/lzb2512/5307039 ===============================

Bootstrap相关的网站

http://www.bootcss.com/ http://expo.bootcss.com/ http://www.webresourcesdepot.com/20-beautiful-resources-that-complement-twitter-bootstrap/ http://www.cnblogs.com/lhb25/archive/2012/09/11/resources-that-complement-twitter-bootstrap.html Bootstrap相关的网

jvm学习 - 类加载和初始化相关的案例(4)

类的加載规则 总的顺序是:先父类后子类,先静态后动态,属性和代码块的初始化遵循正常的出场顺序无论是静态还是动态,但是他们总是先于构造器执行. package ooptest; public class StaticDemo6 { public static void main(String[] args) { new SB(); } } class SA { D d; static { System.out.println("A 1"); // 1.先从父类的非静态开始 } { Sys

Bootstrap学习方法及案例分享

前言: 本文将分享一下自己学习Bootstrap时的一点经验,希望能对正在开始与Bootstrap作战的小伙伴们一点点帮助,避免一些不必要的曲折. 一.官网 学习一款框架,最开始,学习途径一定是它的官方网站,几乎每一款框架都有非常详细且清晰的文档,虽然网上关于该框架的学习资源很多,但是也都不是自创的,追其根源,全部都是来自于官网.与其花费动辄十几个小时去看别人的视频,不如自己去官网学习来得快. 二.官网怎么学 相信好多小伙伴也看过官方文档了,虽然文档挺清晰的,但是还是会觉得一头雾水,抓不住重点.

Bootstrap相关内容

 1.navbar导航条 添加.navbar-fixed-top类可以让导航条固定在顶部.(固定的导航条会遮住页面上的其他内容,除非给<body>元素设置了Padding.导航条的默认高度是50Px,比如设置:body{padding-top:70px;} 可以包含一个.contAINER或.container-fluid容器,从而让导航条居中或自适应显示. 添加.navbar-inverse类可以改变导航条的外观,变成黑底显示 通过添加.navbar-left和.navbar-right工具

Anjular+Bootstrap前端开发案例实战

我们将利用Angularjs 和 Bootstrap,开发一个前端应用实例,通过这一次简单的项目实战,引领大家进入AngularJS前端开发的殿堂,并向大家介绍一下几个知识点: MVC 基础,通过项目实例,让大家初步体会MVC设计模式的应用. 构建我们第一个AngularJS应用,通过一个实际用例的开发,大家可以对前端开发获得一定的感性认识. 初步了解AngularJS三个最重要的组成部件,他们分别是Model, View, 和Controller. 初步了解AngularJS的Scope对象的

angular+bootstrap分页指令案例

AngularJS中不仅内置了许多指令,而且开发人员也可以通过自定义指令来完成特殊操作,指令创建成功后可以到处复用. Web应用中的分页处理最为常见,我们可以将分页模块编写成一个可以复用的Angular指令,在使用时无需考虑指令的内部实现细节,像使用普通HTML元素一样简单. 1:index.html <!DOCTYPE html> <html ng-app="myApp"> <head> <title>TODO supply a tit

bootstrap相关资料

bootstrap资源:http://www.bootcss.com/https://github.com/twbs/bootstraphttp://v3.bootcss.com/getting-started/#grunt样式集合:http://bootswatch.com/ (下载variables.less替换后,再在bootstrap编译发布即可:grunt dist) http://lib.sinaapp.com/ (新浪CDN)http://cdn.code.baidu.com/ (

Bootstrap相关优质项目推荐

Bootstrap 编码规范by @mdo Bootstrap 编码规范:编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范. jQuery API 中文手册 根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册. w3schools原版国内镜像 w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧.因此做了个镜像,希望英文好的同学直接去看原版教程吧! 优站精选Bootstr