bootstrap的使用2
2024-08-29 21:00:43
表单控件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/1.12.2/jquery.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
form{ margin-top: 100px;
}
</style> </head>
<body>
<div>
<div class="col-sm-6"> </div>
<div class="col-sm-4">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div> </div> </body>
</html>
在上面中引入了栅格系统，展示效果：
如果页面加上了背景图就更好看了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/1.12.2/jquery.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style> body{
/* background-image: url("2.jpg");*/
}
.background1{
margin-top: 100px;
margin-left: 20px;
height:330px;
background-image: url("2.jpg");
}
.background2{
margin-top: 100px;
margin-left: 20px;
height:330px;
background-color: beige;
}
</style> </head>
<body>
<div> aaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="background">
<div class="col-sm-6 background1"> </div>
<div class="col-sm-4 background2" >
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div> </div> </body>
</html>
效果如下
这个是竖排的，还可以进行横排
再加上样式：
.background1{
margin-top: 100px;
margin-left: 20px;
height:330px;
background-image: url("2.jpg");
background-size: %,%;
又变了
最新文章
- hadoop实战 -- 网站日志KPI指标分析
- Winform TreeView 查找下一个节点
- $.ajax()方法参数详解
- 使用PHP_UML生成代码的UML图
- 关闭IE窗口
- Oracle数据库对象_同义词
- C#.net在后台执行javascript
- gradle使用国内源
- 【POJ 1741】 Tree (树的点分治)
- Mina学习之IoSession
- jbpmAPI-8
- jQuery中的DOM操作《思维导图》
- licecap软件——简单做出app的效果gif图
- OperationCenter Docker容器启动脚本
- python day28--json,pickle,hashlib,logging
- 20135337——Linux实践三：程序破解
- 关于c#的知识博客
- 利用javascript实现css操作
- 【总结】 NOIp2018考时经历记
- Objective-C与JavaScript交互的那些事