[英]Small fonts on Bootstrap DateTime picker
I´m using the Bootstrap 3 DateTime picker from www.github.com/Eonasdan/bootstrap-datetimepicker 我正在使用来自www.github.com/Eonasdan/bootstrap-datetimepicker的Bootstrap 3 DateTime选择器
Everything is working fine, except that I need to use small fonts and less spacing between the calendar grid lines. 一切工作正常,除了我需要使用小字体和更少的日历网格线间距。
Does anyone has an idea on how to do it. 有谁知道如何做到这一点。 This is the original code:
这是原始代码:
<div class="small">
<div id="myPlaceholder"></div>
</div>
And on Javascript: 在Javascript上:
$('#myPlaceholder').datetimepicker({
language : 'en'
});
It works well, but does not show small fonts. 它运作良好,但不显示小字体。
You only need to add your own CSS to style the date picker. 您只需要添加自己的CSS即可为日期选择器设置样式。
This will make the columns narrower: 这将使列变窄:
.bootstrap-datetimepicker-widget td.day {
width: 200px;
}
This will make the rows shorter: 这将使行更短:
.bootstrap-datetimepicker-widget td.day {
line-height: 10px;
}
This makes the font smaller for the day numbers: 这使字体缩小为日期数字:
.bootstrap-datetimepicker-widget td.day {
font-size: 10px;
}
And combining them all: 并将它们结合在一起:
.bootstrap-datetimepicker-widget td.day {
width: 200px;
line-height: 10px;
font-size: 10px;
}
And as a bonus, this will make the font size of the day of week smaller: 另外,这将减小星期几的字体大小:
th.dow {
font-size: 12px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.