如何使用Twitter bootstrap 3显示日历图标

时间:2013-08-17 16:13:22

标签: html css twitter-bootstrap

我正在尝试在 C#MVC 视图中实现日期时间选择器,但输入框右侧的日历图标不会出现。

我正在关注here中的示例。

我的部分观点

<script src="/Scripts/angular-0.10.0.min.js"></script>
        <link rel="stylesheet" type="text/css" href="/Content/bootstrap/css/bootstrap.min.css" >
        <link rel="stylesheet" type="text/css" href="/Content/bootstrap/css/bootstrap-responsive.min.css" >
        <script src="/Scripts/jquery-lib/jquery-1.10.2.min.js"></script>
        <script src="/Content/bootstrap/js/bootstrap.min.js"></script>


        <script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
    </script>
        <script  data-main="/Scripts/main" src="~/Scripts/require.min.js"></script>


 <div id="datetimepicker2" class="input-append">
                           <input data-format="MM/dd/yyyy HH:mm:ss PP" type="text"/>
                        <span class="add-on">
                            <i data-time-icon="icon-time" data-date-icon="icon-calendar">
                            </i>
                        </span>
                    </div>

我已经尝试明确说明了下面哪些字形图标的路径不起作用:

   @iconSpritePath:     "/Content/bootsrap/img/glyphicons-halflings.png";

我最终收到此错误:

  

名称'iconSpritePath'不存在

我还注意到我的Twitter bootsrap 3类不包含icon-calender类。

如何制作日历图标?

1 个答案:

答案 0 :(得分:0)

从官方引导程序文档:

随着Bootstrap 3的推出,图标已被移动到一个单独的存储库中。这使主要项目尽可能精简,使人们更容易交换图标库,并使得Glyphicons图标字体更容易被更多人用于Bootstrap之外。

这就是你如何使用它。说明如下:http://glyphicons.getbootstrap.com/

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css" rel="stylesheet">
<span class="glyphicon glyphicon-calendar"></span>