VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > JavaScript >

  • JavaScript教程之前端之移动端库和框架bootstrap(3)

br> <br> <div class="row"> <a href="#" class="btn btn-success btn-lg">大按钮</a> <a href="#" class="btn btn-info btn-md">中等按钮</a> <a href="#" class="btn btn-warning btn-xs">小按钮</a> <a href="#" class="btn btn-danger">一般的按钮</a> </div> <br> <br> <div class="row"> <a href="#" class="btn btn-primary btn-block">宽度是100%的按钮</a> </div> <br> <br> <div class="row"> <div class="btn-group"> <a href="#" class="btn btn-primary">步骤一</a> <a href="#" class="btn btn-primary">步骤二</a> <a href="#" class="btn btn-default">步骤三</a> </div> </div> <br> <br> <div class="row"> <div class="btn-group btn-group-justified"> <a href="#" class="btn btn-primary">步骤一</a> <a href="#" class="btn btn-primary">步骤二</a> <a href="#" class="btn btn-default">步骤三</a> </div> </div> <br> <br> <div class="row"> <!-- 在使用input和btn-group-justified组合使用时，会出现bug，a标签组合使用不会，解决方式如下 --> <div class="btn-group btn-group-justified"> <div class="btn-group"> <input type="button" name="" value="步骤一" class="btn btn-primary"> </div> <div class="btn-group"> <input type="button" name="" value="步骤二" class="btn btn-primary"> </div> <div class="btn-group"> <input type="button" name="" value="步骤三" class="btn btn-default"> </div> </div> </div> </div> </body> </html>
复制代码

表单-字体图标

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <style type="text/css">
        .glyphicon-heart {
            font-size: 16px;
            color: gold;
        }

        .glyphicon-user {
            font-size: 20px;
            color: pink;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <h2>表单</h2>
    </div>
</div>


<div class="container">
    <div class="row">
        <form>
            <div class="form-group">
                <label for="input01"><span class="glyphicon glyphicon-user"></span></label>
                <input type="text" name="" class="form-control" id="input01">
            </div>

            <div class="form-group">
                <label for="pwd">密码:</label>
                <input type="password" name="" class="form-control" id="pwd">
            </div>
        </form>

        <br>
        <br>

        <form class="form-inline">
            <div class="form-group form-group-lg">
                <label for="input02">用户名:</label>
                <input type="text" name="" class="form-control" id="input02">
            </div>

            <div class="form-group">
                <label for="pwd02">密码:</label>
                <input type="password" name="" class="form-control" id="pwd02">
            </div>
        </form>


        <br>
        <br>

        <form class="form-horizontal">
            <div class="form-group form-group-lg">
                <label for="input03" class="col-xs-2">用户名:</label>
                <div class="col-xs-10">
                    <input type="text" name="" class="form-control" id="input03">
                </div>
            </div>

            <div class="form-group form-group-sm">
                <label for="input03" class="col-xs-2">通信地址:</label>
                <div class="col-xs-10">
                    <input type="text" name="" class="form-control" id="input03">
                </div>
            </div>

            <div class="form-group">
                <label for="pwd03" class="col-xs-2">密码:</label>
                <div class="col-xs-10">
                    <input type="password" name="" class="form-control" id="pwd03">
                </div>
            </div>
        </form>
        
        <br>
        <br>
        <br>
        
        <form>
            <div class="input-group">
                <span class="input-group-addon">@</span>
                <input type="text" class="form-control">
            </div>
            <br>
            <br>

            <div class="input-group">

                <input type="text" class="form-control">
                <span class="input-group-btn">
                      <!-- <input type="button" name="" value="搜索" class="btn btn-default"> -->

                      <button class="btn btn-primary">搜索</button>
                  </span>
            </div>

            <br>
            <br>

            <div class="input-group">

                <input type="text" class="form-control">
                <span class="input-group-btn">
                      <!-- <input type="button" name="" value="搜索" class="btn btn-default"> -->

                      <button class="btn btn-primary"><span class="glyphicon glyphicon-heart"></span></button>
                  </span>
            </div>
            <br>
            <br>
        </form>
    </div>
</div>
</body>
</html>
复制代码

 

 

Bootstrap菜单、对话框、布局实例

菜单-导航条示例

 菜单-导航条示例

模态框/丐版
模态框/丐版示例

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn01').click(function () {
                //$('#modal04').modal('show');
                $('#modal04').modal({
                    show: true,
                    backdrop: 'static'
                });

            });

            $('#shutoff').click(function () {
                $('#modal04').modal('hide');
            })
        })

相关教程