bootstrap表单

1.bootstrap表单

(1)form 声明一个表单域
(2)form-inline 内联表单域
(3)form-horizontal 水平排列表单域
(4)form-group 表单组、包括表单文字和表单控件
(5)form-control 文本输入框、下拉列表控件样式
(6)checkbox check-inline 多选框样式
(7)radio radio-inline 单选框样式
(8)input-group 表单控件组
(9)input-group-addon 表单控件组物件样式
(10)input-group-btn 表单控件组物件为按钮的样式
(11)form-group-lg 大尺寸表单
(12)form-group-sm 小尺寸表单

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">

</script>

<style type="text/css">

.glyphicon .glyphicon-heart{
    color: antiquewhite;
}
</style>

</head>
<!--使用bootstrap的类和样式,所以上官网熟悉各种操作-->
<body>
<div class="container">
<div class="row">
<h2>表单</h2>
</div>
</div>
<div class="container">
<div class="row">
<form>
<div class="form-group">
<label for="iptem">邮箱地址</label>
<input type="email" name="邮箱地址" id="iptem" class="form-control" placeholder="email">
</div>
<div class="form-group">
<label for="iptps">密码</label>
<input type="password" name="password" id="iptps" class="form-control" placeholder="password">
</div>
</form>

        <br>
        <br>

        <form class="form-inline">
            <div class="form-group form-group-lg">
                <label for="iptem01">邮箱地址</label>
                <input type="email" name="邮箱地址" id="iptem01" class="form-control" placeholder="email">
            </div>
            <div class="form-group">
                <label for="iptps01">密码</label>
                <input type="password" name="password" id="iptps01" class="form-control" placeholder="password">
            </div>
        </form>

        <br>
        <br>

        <form class="form-horizontal">
            <div class="form-group form-group-lg">
                <label for="iptem01" class="col-xs-2">邮箱地址</label>
                <div class="col-xs-10">

                    <input type="email" name="邮箱地址" id="iptem01" class="form-control" placeholder="email">
                </div>

            </div>

            <div class="form-group">
                <label for="iptem01" class="col-xs-2">通信地址</label>
                <div class="col-xs-10">

                    <input type="email" name="邮箱地址" id="iptem01" class="form-control" placeholder="email">
                </div>

            </div>

            <div class="form-group">
                <label for="iptps01" class="col-xs-2">密码</label>
                <div class="col-xs-10">
                    <input type="password" name="password" id="iptps01" class="form-control" placeholder="password">
                </div>  
            </div>
        </form>

        <form>

            <div class="input-group">
                <input type="text" class="form-control">
                <span class="input-group-btn">
                    <button class="btn btn-primary">
                        <span class="glyphicon glyphicon-heart" aria-hidden="true""></span>
                    </button>
                </span>

            </div>
        </form>

    </div>
</div>

</body>
</html>

bootstrap表单

2.bootstrap容器

container-fluid流体
container
。1170
。970
。750
。100%

3.bootstrap响应式查询区间:
(1)>=768
(2)>=992
(3)>=1200

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>container</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript">

</script>

<style type="text/css">
/流体容器/
.container-fluid,.container{
height: 50px;
background-color: antiquewhite;
border: 1px solid #000;
}
</style>
</head>

<body>

<div class="container-fluid">流体容器</div>
<br>
<br>
<div class="container">响应式容器</div>

</body>

</html>

bootstrap表单

4.bootstrap栅格系统

bootstrap将页面横向分为12等分,按照12等分定义了适应不同宽度等分的样式类,这些样式类组成了一套响应式、移动设备优先的流式栅格系统:

(1)col-lg-大于1200排成一行,小于1200分别占一行
(2)col-md-大于992排成一行,小于992分别占一行
(3)col-sm-大于768排成一行,小于768分别占一行
(4)col-xs-始终排列成一行

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>container</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript">

</script>

<style type="text/css">
/样式选择器,选择含有col-/
div[class*='col-']{
border: 1px solid #000;
background-color: antiquewhite;
}
</style>
</head>

<body>

上一篇:GPU中与CUDA相关的几个概念


下一篇:iOS 沙盒目录结构及正确使用