`

bootstrap时间控件

javascripthtmljquery 
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />


<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">

<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">


<!-- 最新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>

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

<title>作业管理&gt;新建作业</title>
</head>

<body>
<div class="container">
<div class="col-xs-12 dzp_top"><!--顶部--></div>
<div class="col-xs-12_content">
<div class="row">
<div class="col-xs-3">1<!--左侧--></div>
<div class="col-xs-9" style="min-height:470px;">
<label class="dzp_title">作业管理>新建作业</label>
<div class="row">
<div class="col-xs-12">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">作业信息</h3>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<table class="table table-bordered table-striped">
<tr>
<td style="text-align:right;">名称：</td>
<td>
<div class="row">
<div class="col-xs-5">
<input type="text" class="form-control" style="height:34px;"/>
</div>
</div>
</td>
</tr>
<tr>
<td style="text-align:right;">上传附件 ：</td>
<td>
<div class="row">
<div class="col-xs-5">
<input type="text" class="form-control" style="height:34px;" />
</div>
<div class="col-xs-3">
<button type="button" class="btn btn-default">浏览</button>
    </div>
</div>
</td>
</tr>
<tr>
<td style="text-align:right;">附件名：</td>
<td>
<div class="row">
<div class="col-xs-5">
<input type="text" class="form-control" style="height:34px;"/>
</div>
<div class="col-xs-3">
<button type="button" class="btn btn-default">上传</button>
    </div>
</div>
</td>
</tr>
<tr>
<td style="text-align:right;">描述：</td>
<td>
<textarea class="form-control" rows="4" style="resize:none;">章节描述。。。</textarea>
</td>
</tr>
<tr>
<td style="text-align:right;">满分：</td>
<td>
<div class="row">
<div class="col-xs-5">
<input type="text" class="form-control" style="height:34px;"/>
</div>
</div>
</td>
</tr>
<tr>
<td style="text-align:right;">作业提交截止时间：</td>
<td>
<div>
<div class="col-xs-3">
<div id="datetimepicker2" class="input-append">
                                                <input data-format="yyyy-MM-dd" class="form-control" type="text" style="height:34px;"></input>
                                                <span class="add-on" style="height:34px;cursor:pointer;">
                                                  <span class="glyphicon glyphicon-calendar"></span>
                                                </span>
                                            </div>
</div>
</div>
</td>
</tr>
</table>
<div class="row" style="margin-bottom:20px;">
<div class="col-xs-6 text-right">
<button type="button" class="btn btn-default btn-md">提交</button>
</div>
<div class="col-xs-6">
<button type="button" class="btn btn-default btn-md">取消</button>
</div>
</div>
</div>
</div>
</div>
</div>
            <div class="col-xs-12 dzp_bottom">
            <!--底部-->
            </div>
</div>
    </div>
    <script type="text/javascript"
    src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script>
    <script type="text/javascript"
    src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
    </script>
    <script type="text/javascript"
   src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
    </script>
<script type="text/javascript">
      $(function() {
        $('#datetimepicker1').datetimepicker({
          pickTime: false
        });
      });
  $(function() {
        $('#datetimepicker2').datetimepicker({
          pickTime: false
        });
      });
    </script>
</body>
</html>
分享到：
| IE=EmulateIE7 标签的作用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    BootStrap时间控件.zip

    Bootstrap时间控件是一种基于Twitter Bootstrap框架的用户界面组件，用于在网页上实现高效、美观的时间选择功能。Bootstrap作为最流行和广泛使用的前端开发框架之一，提供了丰富的预设样式、组件和JavaScript插件，...

    可选择秒针的 bootstrap时间控件 精确选择到秒

    现有的bootstrap时间控件最小精度只能选择到分钟，秒针是随机生成的。如果应用在时间精度要求很高的系统里，因为随机生成不可控制秒值将会达不到需求。之前做一个公安项目的时候就遇到这一情况。为此改造了原有时间...

    bootstrap时间控件的使用

    Bootstrap时间控件是一种在网页设计中用于用户交互的组件，特别是在数据输入时提供方便的时间选择功能。Bootstrap，作为最流行和广泛使用的前端开发框架之一，提供了丰富的UI组件，包括时间控件，以帮助开发者创建...

    bootstrap时间控件含中文

    Bootstrap时间控件，通常指的是基于Bootstrap框架开发的日期和时间选择器组件，它极大地提升了用户在Web应用中输入日期和时间的便捷性。在本案例中，我们关注的是"bootstrap时间控件含中文"，这意味着该控件不仅提供...

    基于bootstrap时间控件

    Bootstrap时间控件是一种在网页应用中用于选择时间的交互组件，尤其在数据输入或日程管理等场景下非常实用。Bootstrap作为一款流行的前端框架，它提供了丰富的UI组件，包括时间控件，使得开发者能够轻松创建出美观且...

    bootstrap时间控件8个

    Bootstrap时间控件是一种用于网页交互设计的组件，它极大地增强了用户在网页上处理时间选择的体验。Bootstrap，作为世界上最流行和广泛使用的前端开发框架之一，提供了丰富的预设样式、组件和JavaScript插件，使得...

    bootstrap 时间控件.zip

    Bootstrap时间控件是一款基于Bootstrap框架的插件，用于在网页上提供方便的日期和时间选择功能。Bootstrap，是由Twitter开发的开源前端框架，它提供了丰富的样式、组件和JavaScript插件，帮助开发者快速构建响应式、...

    bootstrap时间控件daterangepicker使用方法及各种小bug修复

    bootstrap 时间控件 daterangepicker 使用方法及各种小 bug 修复 Bootstrap 的时间控件 daterangepicker 是一个功能强大且灵活的日期选择器插件，它可以帮助开发者快速实现日期选择功能。下面将详细介绍 daterange...

    BOOTSTRAP时间控件显示在模态框下面的bug修复

    在这个问题中，我们关注的是Bootstrap时间控件在模态框（modal）中的显示异常，具体表现为时间控件出现在模态框下方，而不是正常地覆盖在模态框内容之上。这通常是一个Z-index相关的问题，Z-index是CSS中用于控制...

    Bootstrap 时间控件控制只显示年，只显示年月

    在Bootstrap中，时间控件通常指的是Datepicker插件，它允许用户选择日期或者日期时间。在这个主题中，我们将深入探讨如何通过Bootstrap Datepicker来实现只显示年份或者年月的视图。 首先，为了实现这个功能，我们...

    bootstrap的时间控件

    Bootstrap时间控件是一种基于Bootstrap框架的JavaScript插件，主要用于在网页上添加交互式的时间和日期选择功能。这个插件使得用户能够方便地选取特定的日期和时间，提升了用户体验，尤其适用于需要用户输入特定时间...

    基于bootstrap的时间控件

    首先，Bootstrap本身并不直接提供时间控件，但可以通过第三方插件如"Bootstrap Daterangepicker"来实现日期和时间范围的选择。Daterangepicker是一个强大的JavaScript组件，它与Bootstrap的样式完美融合，可以方便地...

    angularjs和bootstrap开发的web控件的集合

    **AngularJS与Bootstrap结合开发Web控件集合** 在Web应用开发中，AngularJS和Bootstrap是两个非常受欢迎的开源框架。AngularJS，一个由Google维护的JavaScript框架，专注于数据绑定和依赖注入，使得前端开发更加...

    bootstrap日历控件例子

    Bootstrap日历控件是网页开发中常用的一种交互组件，它为用户提供了一个直观、方便的方式来选择日期和时间。在本示例中，我们关注的是`bootstrap-datetimepicker-0.0.11`这个版本，这是一款基于Bootstrap框架的日期...

    bootstrap日期控件

    Bootstrap日期控件是一款高度可定制、用户友好的前端组件，专为在Web应用程序中实现日期和时间选择功能而设计。这款控件充分利用了Bootstrap框架的灵活性和美感，为开发者提供了简单易用的日期和时间输入解决方案。...

Magicbox
Global site tag (gtag.js) - Google Analytics