输入组

输入组

关注
发信
关注(28)粉丝(399)

Bootstrap 输入组

Bootstrap 输入组：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">

</head>

<body style="margin:50px 0">

    <div class="container">

        <input type="text" class="form-control">

        <div class="input-group">

            <span class="input-group-addon">$</span>

            <input type="text" class="form-control">

            <span class="input-group-addon">.00</span>

        </div>

        <div class="input-group input-group-lg">

            <span class="input-group-addon">

                <input type="checkbox">

            </span>

            <input type="text" class="form-control">

        </div>

        <div class="input-group">

            <span class="input-group-addon">

                <input type="checkbox">

            </span>

            <input type="text" class="form-control">

        </div>

        <div class="input-group input-group-sm">

            <span class="input-group-addon">

                <input type="checkbox">

            </span>

            <input type="text" class="form-control">

        </div>

        <div class="input-group">

            <input type="text" class="form-control">

            <div class="input-group-btn">

                <button type="button" class="btn btn-default">btn</button>

            </div>

        </div>

        <div class="row">

            <div class="col-xs-2">

                <input type="text" class="form-control input-lg">

            </div>

            <div class="col-xs-2">

                <input type="text" class="form-control">

            </div>

            <div class="col-xs-2">

                <input type="text" class="form-control input-sm">

            </div>

        </div>

    </div>

</body>

</html>

输入组：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>">

<meta charset="UTF-8">

<title>b index</title>

<link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'>

</head>

<body style="margin:150px;">

    <div class="bg-primary">输入框组</div>

    <div class="input-group">

        <span class="input-group-addon">$</span>

        <input type="text" class="form-control">

        <span class="input-group-addon">.00</span>

    </div>

    <div class="bg-primary">输入框组多个input好像有问题</div>

    <div class="input-group">

        <span class="input-group-addon">$</span>

        <span class="input-group-addon">$</span>

        <span class="input-group-addon">$</span>

        <input type="text" class="form-control">

        <input type="text" class="form-control">

        <input type="text" class="form-control">

        <span class="input-group-addon">.00</span>

        <span class="input-group-addon">.00</span>

        <span class="input-group-addon">.00</span>

    </div>

    <div class="bg-primary">输入框组-多个addon</div>

    <div class="input-group">

        <span class="input-group-addon">$</span>

        <span class="input-group-addon">$$$$$$</span>

        <span class="input-group-addon">$$$$$$</span>

        <input type="text" class="form-control">

        <span class="input-group-addon">.00</span>

        <span class="input-group-addon">.001234</span>

        <span class="input-group-addon">.005678</span>

    </div>

    <div class="bg-primary">输入框组    大小</div>

    <div class="input-group input-group-lg">

        <span class="input-group-addon">$</span>

        <span class="input-group-addon">$$$$$$</span>

        <span class="input-group-addon">$$$$$$</span>

        <input type="text" class="form-control">

        <span class="input-group-addon">.00</span>

        <span class="input-group-addon">.001234</span>

        <span class="input-group-addon">.005678</span>

    </div>

    <div class="bg-primary">输入框组    大小</div>

    <div class="input-group input-group-sm">

        <span class="input-group-addon">$</span>

        <span class="input-group-addon">$$$$$$</span>

        <span class="input-group-addon">$$$$$$</span>

        <input type="text" class="form-control input-lg"><!-- 这里的input-lg没有反应？ -->

        <span class="input-group-addon">.00</span>

        <span class="input-group-addon">.001234</span>

        <span class="input-group-addon">.005678</span>

    </div>

    <div class="bg-primary">输入框组checkbox</div>

    <div class="input-group">

        <span class="input-group-addon">

            <input type="checkbox">

        </span>

        <input type="text" class="form-control">

        <span class="input-group-addon">.00</span>

    </div>

    <div class="bg-primary">输入框组radio</div>

    <div class="input-group">

        <span class="input-group-addon">

            <input type="radio">

        </span>

        <input type="text" class="form-control">

        <span class="input-group-addon">.00</span>

    </div>

    <div class="bg-primary">输入框组-包含按钮情况</div>

    <div class="input-group">

        <span class="input-group-btn">

            <button class="btn btn-default">GO!</button>

        </span>

        <input type="text" class="form-control">

        <span class="input-group-addon">.00</span>

    </div>

    <div class="bg-primary">输入框组-包含按钮情况</div>

    <div class="input-group">

        <span class="input-group-addon">$$</span>

        <input type="text" class="form-control">

        <span class="input-group-btn">

            <button class="btn btn-primary">GO!</button>

            <button class="btn btn-primary">GO!</button>

            <button class="btn btn-primary">GO!</button>

        </span>

    </div>

    <div class="bg-primary">输入框组-包含下拉菜单按钮</div>

    <div class="input-group">

        <span class="input-group-addon">$$</span>

        <input type="text" class="form-control">

        <span class="input-group-btn">

            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">GO!

                <span class="caret"></span>

            </button>

            <ul class="dropdown-menu">

                <li><a>01</a></li>

                <li><a>02</a></li>

                <li><a>03</a></li>

                <li><a>04</a></li>

            </ul>

        </span>

    </div>

    <div class="bg-primary">输入框组-包含多个按钮，下拉菜单按钮，终于玩坏了</div>

    <div class="input-group">

        <span class="input-group-addon">$$</span>

        <input type="text" class="form-control">

        <span class="input-group-btn">

            <button class="btn btn-primary">GO!</button>

            <button class="btn btn-primary">GO!</button>

            <button class="btn btn-primary">GO!</button>

            <button class="btn btn-primary">GO!</button>

            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">GO!

                <span class="caret"></span>

            </button>

            <ul class="dropdown-menu">

                <li><a>01</a></li>

                <li><a>02</a></li>

                <li><a>03</a></li>

                <li><a>04</a></li>

            </ul>

        </span>

    </div>

    <div class="bg-primary">输入框组-包含多个按钮，下拉菜单按钮，还是有问题</div>

    <div class="input-group">

        <span class="input-group-addon">$$</span>

        <span class="input-group-btn">

            <button class="btn btn-primary">GO!</button>

            <button class="btn btn-primary">GO!</button>

            <button class="btn btn-primary">GO!</button>

        </span>

        <input type="text" class="form-control">

        <span class="input-group-btn">

            <button class="btn btn-primary">GO!</button>

            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">GO!

                <span class="caret"></span>

            </button>

            <ul class="dropdown-menu">

                <li><a>01</a></li>

                <li><a>02</a></li>

                <li><a>03</a></li>

                <li><a>04</a></li>

            </ul>

        </span>

    </div>

    <div class="bg-primary">输入框组-包含多个按钮，下拉菜单按钮，前面好了，后面还是没好</div>

    <div class="input-group">

        <span class="input-group-btn">

            <button class="btn btn-primary">GO!</button>

            <button class="btn btn-primary">GO!</button>

            <button class="btn btn-primary">GO!</button>

        </span>

        <span class="input-group-addon">$$</span>

        <input type="text" class="form-control">

        <span class="input-group-btn">

            <button class="btn btn-primary">GO!</button>

            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">GO!

                <span class="caret"></span>

            </button>

            <button class="btn btn-primary">GO!</button>

            <button class="btn btn-primary">GO!</button>

            <button class="btn btn-primary">GO!</button>

            <button class="btn btn-primary">GO!</button>

            <ul class="dropdown-menu">

                <li><a>01</a></li>

                <li><a>02</a></li>

                <li><a>03</a></li>

                <li><a>04</a></li>

            </ul>

        </span>

    </div>

    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>

    <script type="text/javascript" src="b/js/bootstrap.js"></script>

</body>

</html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>">

<meta charset="UTF-8">

<title>b index</title>

<link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'>

</head>

<body style="margin:150px;">

    <div class="bg-primary">输入框组, 最后一个下拉框使用了pull-right样式,第一个下拉框点击会有略微的变形</div>

    <div class="bg-primary">最后一个按钮组使用了open样式，导致下拉按钮也有样式变化</div>

    <div class="row">

        <div class="col-sm-6">

            <div class="input-group">

                <div class="input-group-btn">

                    <button type="button" class="btn btn-default">按钮A</button>

                    <button data-toggle="dropdown" class="btn btn-default">

                        <span class="caret"></span>

                    </button>

                    <button type="button" class="btn btn-default">按钮B</button>

                    <button type="button" class="btn btn-default">按钮C</button>

                    <ul class="dropdown-menu">

                        <li><a>01</a></li>

                        <li><a>02</a></li>

                        <li><a>03</a></li>

                        <li><a>04</a></li>

                    </ul>

                    <button type="button" class="btn btn-default">按钮D</button>

                </div>

                <input class="form-control" type="text" value="a">

            </div>

        </div>

        <div class="col-sm-6">

            <div class="input-group">

                <input type="text" class="form-control" value="b">

                <div class="input-group-btn open">

                    <button type="button" class="btn btn-default">Action</button>

                    <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle" >

                        <span class="caret"></span>

                    </button>

                    <ul class="dropdown-menu pull-right">

                        <li><a>01</a></li>

                        <li><a>02</a></li>

                        <li><a>03</a></li>

                        <li><a>04</a></li>

                    </ul>

                </div>

            </div>

        </div>

    </div>

    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>

    <script type="text/javascript" src="b/js/bootstrap.js"></script>

</body>

</html>
05-08 08:00
Powered by LMLPHP ©2024 输入组 0.063471