• bootstrap小试牛刀


    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--
            作者:459756123@qq.com
            时间:2016-08-06
            描述:当前网页在 移动设备上,不可以 缩放
            -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>Bootstrap 基础 Template</title>
    <!-- Bootstrap -->
    <link href="bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-2.1.0.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap/3.3.4/js/bootstrap.min.js"></script>
    </head>
    <body>
    <!--需要一个头,导航-->
    <nav class="navbar navbar-default navbar-fixed-top">


    <div class="container" id="divHeader">
    <div class="navbar-header">



    <a class="navbar-brand" style='margin: 10px 30px 0px 0px; 109px; height: 39px; ' href="index.html">
    <span class="glyphicon glyphicon-home"></span>首页
    </a>


    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false">
                        
                       <span class="sr-only">Toggle navigation</span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                     </button>
    </div>


    <div class="collapse navbar-collapse" id="nav">
    <ul class="nav navbar-nav navbar-right">
    <li>
    <a href="showInfo.html" style=" font-weight: bold; margin-top: 5px;"> 查看已经登记信息</a>
    </li>
    <li>
    <a href="#"><input type="button" class="btn btn-sm btn-danger" value="登陆" id="indexALogin" /></a>
    </li>
    <li>
    <a href="#"><input type="button" class="btn  btn-sm btn-danger" value="注册" /></a>
    </li>


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


    </nav>




    <div class="container" style="margin-top: 100px;">
    <!--
    描述:当编写了class=row的时候,会将行分割为12列。
                    这是bootstrap的核心思想,叫做 栅格系统
                    -->
                    <div class="row">
                    <div class="col-lg-6 col-sm-12">
                    <img src="images/banner-wjb-1500_762e185.jpg" class="img-thumbnail"/>
                    </div>
                    <div class="col-lg-6 col-lg-12">
                    <form action="inputSuccess.html">
                    <table class="table table-bordered table-striped table-hover">
                    <tr>
                    <td>姓名:</td>
                    <td><input class="form-control" type="text"/></td>
                    </tr>
                    <tr>
                    <td>性别:</td>
                    <td><input type="radio" checked="checked"/>男
                    <input type="radio"  />女
                    </td>
                    </tr>
                    <tr>
                    <td>联系方式:</td>
                    <td><input class="form-control" type="text"/></td>
                    </tr>
                    <tr>
                    <td>出生日期:</td>
                    <td><input class="form-control" type="text"/></td>
                    </tr>
                    <tr>
                    <td>家庭住址:</td>
                    <td><input class="form-control" type="text"/></td>
                    </tr>
                    <tr>
                    <td>学历:</td>
                    <td><input class="form-control" type="text"/></td>
                    </tr>
                    <tr>
                    <td colspan="2" align="center"><input class="btn btn-block btn-success" type="submit" value="提交"/></td>
                    </tr>
                    </table>
                    </form>
                    </div>
                   
                    </div>

    </div>
    </body>
    </html>

  • 相关阅读:
    第四次寒假作业
    寒假作业三
    寒假作业二
    关于C语言
    寒假作业2代码
    计算机小白
    软工第二次作业
    新开始
    android 自定义滑动按钮
    新知识 HtMl 5
  • 原文地址:https://www.cnblogs.com/huangzhe1515023110/p/9276118.html
Copyright © 2020-2023  润新知