您的位置：首页 > Web前端 > BootStrap

bootstrap学习心得(1)-------框架-----表单

2016-09-26 11:23 459 查看

bootstrap 学习网站：点击打开链接

最基本的东西：

1>使用bootstrap要引入的css与js文件

<%@ page language="java" contentType="text/html; charset="UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>

<html>
<head>
<title>bootstrap</title>
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/common/bootstrap/min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script type="text/javascript" src="<%=request.getContextPath()%>/js.commom/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/common/bootstrap/min.js"></script>
</head>
<body>

</body>
</html>

<%=request.getContextPath()%>可返回站点的根路径

得到工程文件的实际物理路径：<%=request.getRealPath("/")%>

2>表单





其中需要注意的是：格式是这样的

<form class="form-horizontal" role="form">

<div class="control-group">

<label class="col-sm-2 control-label">

</label>

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

<input class="form-control"/>

</div>

</div>

</form>

上面 col-sm-2,这是规定对其的列数，一共有12列；

xs、sm、md 还是 lg四种分别对应四种主流的屏幕宽度：手机、平板、笔记本、电脑宽屏

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>bootstrap</title>
 <link rel="stylesheet" href="./css/common/bootstrap.min.css">
 <script type="text/javascript" src="./js/common/bootstrap.min.js"></script>
 <script type="text/javascript" src="./js/common/jquery-2.2.0.min.js"></script>
</head>
<body>
 <!-- eg(水平表单)： -->
 <form class="form-horizontal" role="form">
  <div class="form-group">
   <label for="koko" class="col-sm-2 control-label">Email</label>
   <div class="col-sm-10">
    <input type="text" id="koko" class="form-control" />
   </div>
  </div>
  <div class="form-group">
  <label class="col-sm-2 control-label">选择文件</label>
   <div class="col-sm-2">
    <input type="file" id="inputfile" class="form-control">
    <p class="help-block">这里是块级帮助文本的实例</p>
   </div> 
  </div>
 </form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： bootstrap 表单框架

相关文章推荐

新的分享

章节导航