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 上下滚动广告
Jun 17 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
ParseInt函数参数设置介绍
Jan 02 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
javascript中replace( )方法的使用
Apr 24 Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 Javascript
Angular如何引入第三方库的方法详解
Jul 13 Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
Vue项目history模式下微信分享爬坑总结
Mar 29 Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 Javascript
js实现移动端轮播图滑动切换
Dec 21 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
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
php eval函数一句话木马代码
2015/05/21 PHP
浅析php静态方法与非静态方法的用法区别
2016/05/17 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
Javascript 面试题随笔
2011/03/31 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
Postman的下载及安装教程详解
2018/10/16 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
react 生命周期实例分析
2020/05/18 Javascript
python实现类之间的方法互相调用
2018/04/29 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
浅谈python连续赋值可能引发的错误
2018/11/10 Python
python pytest进阶之xunit fixture详解
2019/06/27 Python
Python Merge函数原理及用法解析
2020/09/16 Python
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
在什么时候需要使用"常引用"
2015/12/31 面试题
简历上的自我评价
2014/02/03 职场文书
新书发布会策划方案
2014/06/09 职场文书
校园文明标语
2014/06/13 职场文书
自查自纠整改报告
2014/11/06 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
单位收入证明范本
2015/06/18 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
Kubernetes控制节点的部署
2022/04/01 Servers
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python
Android studio 简单计算器的编写
2022/05/20 Java/Android