Web前端框架bootstrap实战【第一次接触使用】


Posted in Javascript onDecember 28, 2016

bootstrap是什么?

Bootstrap是Twitter推出的一个开源的前端框架。Bootstrap由Twitter的设计师Mark Otto和Jacob Thornton合作开发,由动态语言Less写成。它是一套“易用、优雅、灵活、可扩展”的前端工具集,提供了优雅的HTML/CSS规范。

bootstrap是一个前端框架,他有自己的一套css样式,公司没美工,使用bootstar做出来的页面比较好看,

使用日历控件实战

<link 
 href="${path}js/bootstrap-3.3.5-dist/css/bootstrap-datetimepicker.min.css" 
 rel="stylesheet"> 
<link 
 href="${path}js/bootstrap-3.3.5-dist/css/bootstrap-responsive.min.css" 
 rel="stylesheet">
<script 
<span style="white-space:pre">  
</span>
src="${path}js/bootstrap-3.3.5-dist/js/bootstrap-datetimepicker.min.js">
</script> 
<span style="white-space:pre"> 
</span>
<script 
<span style="white-space:pre">  
</span>
src="${path}js/bootstrap-3.3.5-dist/js/bootstrap-datetimepicker.zh-CN.js">
</script>
//引入日历css样式以及js文件
//<span style="font-family: Arial, Helvetica, sans-serif;">
bootstrap-datetimepicker.min.js一定要在
</span>
<span style="font-family: Arial, Helvetica, sans-serif;">
bootstrap-datetimepicker.zh-CN.js"之前引用
</span>
<!-- 新 Bootstrap 核心 CSS 文件 --> 
<link rel="stylesheet" 
<span style="white-space:pre"> 
</span>
href="${path}js/bootstrap-3.3.5-dist/css/bootstrap.min.css"> 
<!-- 可选的Bootstrap主题文件(一般不用引入) --> 
<link rel="stylesheet" 
<span style="white-space:pre"> 
</span>href="${path}js/bootstrap-3.3.5-dist/css/bootstrap-theme.min.css"> 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> 
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js">
</script> 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 
<script src="${path}js/bootstrap-3.3.5-dist/js/bootstrap.min.js">
</script>
<div class="input-append date form_datetime"> 
<span style="white-space:pre">         
</span>
<li>
<span>日期:</span>
<input size="16" type="text" 
<span style="white-space:pre">          
</span>name="usedate" id="usedate" 
<span style="white-space:pre">          
</span>value="" type="date" dateStyle="default"/>" > 
<span 
<span style="white-space:pre">          
</span>class="add-on"><i class="icon-th">
</i>
</span> 
<span style="white-space:pre">        
</span>
</div>
<script type="text/javascript"> 
<span style="white-space:pre">  
</span>$(function() { 
<span style="white-space:pre">   
</span>$(".form_datetime").datetimepicker({ 
<span style="white-space:pre">    
</span>language : 'zh-CN',//显示语言为中文 
<span style="white-space:pre">    
</span>format : "yyyy-mm-dd",//日期格式化样式 
<span style="white-space:pre">    
</span>autoclose : true, 
<span style="white-space:pre">    
</span>todayBtn : true, 
<span style="white-space:pre">    
</span>minView : "month"//日历只显示到月日历 
<span style="white-space:pre">   
</span>}); 
<span style="white-space:pre">  
</span>
}
) 
</scrip>

这些引进的js文件和css文件在 bootstrap官网上都能下载到 。

以上所述是小编给大家介绍的Web前端框架bootstrap实战【第一次接触使用】,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jquery的15款幻灯片插件
Apr 10 Javascript
在Javascript里访问SharePoint列表数据的实现方法
May 22 Javascript
基于jquery自己写tab滑动门(通用版)
Oct 30 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
JQuery Tips相关(1)----关于$.Ready()
Aug 14 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
Angular2使用vscode断点调试ts文件的方法
Dec 13 Javascript
使用Angular-CLI构建NPM包的方法
Sep 07 Javascript
浅谈js闭包理解
Apr 01 Javascript
原生js实现移动小球(碰撞检测)
Dec 17 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 #Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 #Javascript
基于JS设计12306登录页面
Dec 28 #Javascript
JS实现搜索框文字可删除功能
Dec 28 #Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 #Javascript
jQuery实现拖动剪裁图片作为头像
Dec 28 #Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 #Javascript
You might like
Syphon 使用方法
2021/03/03 冲泡冲煮
用PHP查询域名状态whois的类
2006/11/25 PHP
PHP提取中文首字母
2008/04/09 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
Javascript学习笔记 delete运算符
2011/09/13 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
jquery通过a标签删除table中的一行的代码
2013/12/02 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
jquery马赛克拼接翻转效果代码分享
2015/08/24 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
vue构建动态表单的方法示例
2018/09/22 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中的字典遍历备忘
2015/01/17 Python
django模板语法学习之include示例详解
2017/12/17 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
Pyqt5 基本界面组件之inputDialog的使用
2019/06/25 Python
Django模板语言 Tags使用详解
2019/09/09 Python
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
中药专业毕业自荐书范文
2014/02/08 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers