使用bootstrap写作案例

原创 2019-04-29 19:44:22 404
摘要:<html>     <head>         <title>bootstrap仿站</title>         <meta c

11.png

<html>
    <head>
        <title>bootstrap仿站</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <style type="text/css">
            *{margin: 0; padding: 0}
        </style>
    </head>
<body>
    <div class="container" >
        <div class="row">
            <div class="col-md-12">
                <nav class="navbar navbar-inverse">
                    <div class="navbar-header">
                       <a class="navbar-brand" href="#">首页</a>
                    </div>

                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="mianban.html" target="content">案例</a></li>
                            <li><a href="#">解决方案</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">开发语言分类 <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">PHP</a></li>
                                    <li><a href="#">Java</a></li>
                                    <li><a href="#">Python</a></li>
                                </ul>
                            </li>
                        </ul>
                        <form class="navbar-form navbar-left">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="输入关键词">
                            </div>
                            <button type="submit" class="btn btn-info">查询</button>
                        </form>
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#">进入后台</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">关于我们 <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">联系我们</a></li>
                                    <li><a href="#">加入我们</a></li>
                                    <li><a href="#">我们地址</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>

                </nav>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="carousel slide" data-ride="carousel" id="slider">
                    <ol class="carousel-indicators">
                        <li data-target="#slider" data-slide-to="0" class="active"></li>
                        <li data-target="#slider" data-slide-to="1"></li>
                        <li data-target="#slider" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="item active ">
                            <img src="images/1.jpg">
                            <div class="carousel-caption">轮播1</div>
                        </div>
                        <div class="item">
                            <img src="images/2.jpg">
                            <div class="carousel-caption">轮播2</div>
                        </div>
                        <div class="item">
                            <img src="images/3.jpg">
                            <div class="carousel-caption">轮播3</div>
                        </div>
                    </div>

                    <a href="#slider" class="carousel-control left" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </a>

                    <a href="#slider" class="carousel-control right" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </a>
            </div>
        </div>

        <div class="row">
            <div class="col-md-2">
                <h5>社区热帖</h5>
                <div class="list-group">
                    <a href="#" class="list-group-item active">
                        小程序开发<span class="badge">562</span>
                    </a>
                    <a href="#" class="list-group-item" traget="content">APP 开发<span class="badge">181</span></a>
                    <a href="#" class="list-group-item">PHP 开发<span class="badge">397</span></a>
                    <a href="#" class="list-group-item">JAVA 开发<span class="badge">214</span></a>
                    <a href="#" class="list-group-item">Python 开发<span class="badge">69</span></a>
                </div>
                <div class="list-group">
                    <a href="#" class="list-group-item active">
                        <h4 class="list-group-item-heading">技术文章</h4>
                        <p class="list-group-item-text">所有的技术手册均可下载</p>
                    </a>
                    <a href="#" class="list-group-item active">
                        <h4 class="list-group-item-heading">视频教程</h4>
                        <p class="list-group-item-text">所有的视频均可下载</p>
                    </a>
                    <a href="#" class="list-group-item active">
                        <h4 class="list-group-item-heading">工具下载</h4>
                        <p class="list-group-item-text">所有的工具均可下载</p>
                    </a>
                </div>
                <div class="text-center">
                    <button type="button"  class="btn btn-danger btn-lg" data-toggle="modal" data-target="#myModal">菜鸟必点</button>
                </div>




            </div>
            <div class="col-md-10">

                <div class="modal fade" id="myModal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h3>html是什么意思?</h3>
                                <button type="button" class="close" data-dismiss="modal">X</button>
                            </div>

                            <div class="modal-body">
                                “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
                                超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。
                                超级文本标记语言文档制作不是很复杂,但功能强大,支持不同数据格式的文件镶入,这也是万维网(WWW)盛行的原因之一,其主要特点如下:
                                1.简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便。
                                2.可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。
                                3.平台无关性:虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超级文本标记语言可以使用在广泛的平台上,这也是万维网(WWW)盛行的另一个原因。
                                4.通用性:另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。
                                以上就是html是什么意思?的详细内容,更多请关注php中文网其它相关文章!
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-success" data-dismiss="modal">分享</button>
                                <button type="button" class="btn btn-info" data-dismiss="modal">关闭</button>
                            </div>

                        </div>
                    </div>
                </div>

                <iframe width="100%" height="800px" name="content" frameborder="0"></iframe>

            </div>
        </div>

    </div>

</body>
</html>


批改老师:查无此人批改时间:2019-04-30 09:21:04
老师总结:完成的不错。前端框架有很多,可以多了解了解。看看喜欢用哪个。继续加油。

发布手记

热门词条