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

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实战【第一次接触使用】,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作

    本篇文章主要介绍如何实现Web页面内容的打印预览和保存操作的相关知识,一起学习吧! 1.Web页面打印的问题 在此之前,我一般使用比较好用的LODOP来执行打印的操作,这个在我之前有很多文章都有涉及,这个控件是一个ActiveX的控件,需要下载安装后就可以在页面是进行打印的排版设计,预览,打印等操作,还是很方便的一个控件,因此都很适合普通内容的打印,证件的套打等操作. 不过随着浏览器技术的更新,这个插件在Chrome或者FireFox上好像不受支持了,基本上摒弃了这种插件的处理方式了.例如如果我

  • WebApi+Bootstrap+KnockoutJs打造单页面程序

    一.前言 在前一个专题快速介绍了KnockoutJs相关知识点,也写了一些简单例子,希望通过这些例子大家可以快速入门KnockoutJs.为了让大家可以清楚地看到KnockoutJs在实际项目中的应用,本专题将介绍如何使用WebApi+Bootstrap+KnockoutJs+Asp.net MVC来打造一个单页面Web程序.这种模式也是现在大多数公司实际项目中用到的. 二.SPA(单页面)好处 在介绍具体的实现之前,我觉得有必要详细介绍了SPA.SPA,即Single Page Web App

  • WEB前端开发框架Bootstrap3 VS Foundation5

    开发工程师, 使用 Bootstrap. 前端开发人员, 使用 Foundation. 我们来谈谈为什么. Bootstrap 与 Foundation 有许多关键的区别, 但是, 我想你只需要记住一件事: ZURB 和 Twitter 的两种设计理念是很清楚的, 从他们对自己的框架的命名就可以看出来: Bootstrap 有引导, 开机自举的意思, 换言之, 它尝试处理你项目中一切所需要的. 而 Foundation 有创建, 创造的意思, 换言之, 它仅仅给你项目中强有力的创造力. 保持这种

  • Bootstrap框架动态生成Web页面文章内目录的方法

    引言 在写博客的时候,为了条理性起见,经常会使用许多小标题,当文章长时,需要来回在不同的标题之间穿梭,如果手动添加目录,添加锚点,实在是麻烦,为此,可以动态生成一块目录区域,并使用Bootstrap提供的Affix插件将目录区域固定在页面上.Bootstrap文档便使用了它 准备工作-引入bootstrap.min.js 将bootstrap.min.js放入body之前的script标签中,uikit.min.js暂时不引入. 引入相关插件之后,我们的思路是首先根据文章自动生成锚点以及菜单内容

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

    bootstrap是什么? Bootstrap是Twitter推出的一个开源的前端框架.Bootstrap由Twitter的设计师Mark Otto和Jacob Thornton合作开发,由动态语言Less写成.它是一套"易用.优雅.灵活.可扩展"的前端工具集,提供了优雅的HTML/CSS规范. bootstrap是一个前端框架,他有自己的一套css样式,公司没美工,使用bootstar做出来的页面比较好看, 使用日历控件实战 <link href="${path}js

  • Web前端框架Angular4.0.0 正式版发布

    前言 angular4.0.0正式版现在可以使用了.这是自我们宣布angular改版后,首次发布的专业版本.它向下兼容,支持所有使用了angular2.x.x版本的应用程序. 我们很高兴和大家分享这个版本,它包括最近的3个月中我们做的功能上的主要改进.我们努力让开发者们能够很容易的接受angular4.0.0. 新版本的特性 •更轻量化.更快 在这个新版本上,我们履行了我们的承诺,我们做到了让Angular的程序变的更轻量化,更快.但是我们还没有完全的优化完,在接下来的日子中,你会看到我们将着重

  • 详解能在多种前端框架下使用的表格控件

    近几年Web前端框架特别流行,比如AngularJS.AngularJS 2.ReactJS.KnockoutJS.VueJS等.表格控件是我们在开发中经常要用到的控件.有没有能够在多种前端控件下都能使用的表格控件?最近研究发现Wijmo中的FlexGrid是一款不错的表格控件,它能支持很多主流的框架.这里主要介绍在纯JavaScript和AngularJS下FlexGrid的使用. 一.在纯JavaScript下使用FlexGrid HTML文件: <!DOCTYPE html> <h

  • Bootstrap开发实战之第一次接触Bootstrap

    本文我们主要了解一下 Boostrap 历史.特点.用途,以及为什么选择 Boostrap 来开发我们的 Web 项目. 学习要点: 1.Bootstrap 概述 2.Bootstrap 特点 3.Bootstrap 结构 4.创建第一个页面 5.学习的各项准备 一.Bootstrap 概述 Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML.CSS.JavaScript 的开源框架.该框架代码简洁.视觉优美,可用于快速.简单地构建基于 PC

  • 第一次接触神奇的前端框架vue.js

    前言 入手2016最火前端框架之一vue.js.大概从网上找了些资料看了下vue.js,从网上的资料来看只能惊叹其发展速度太快,让我意外的是其作者是华人的前提下作品这么受欢迎. 网上的博客和教程各种组合.以至于我都有些感觉out.各种vue+webpack.vue+react.vue+es6+npm等等.琳琅满目.真是三天不学习赶不上刘少奇. 开篇主要是初次了解下vue.js,包括v-model.v-if.v-else.v-show.v-for(2.0对$index和$key舍弃,2.0要用in

  • 第一次接触Bootstrap框架

    关于Bootstrap,话不多说,直接进入主题: 安装 可以通过bootstrap官方网站下载安装 可以通过Bower安装(关于bower一种包管理器,本文不做详解) bower install bootstrap 可以通过npm安装(关于npm可以阅读) npm install bootstrap 项目中引入Bootstrap <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo

  • 第一次接触神奇的Bootstrap基础排版

    Bootstrap是Twitter推出的一个简单灵活的,基于HTML5和CSS3的用于搭建WEB前端页面的html.css.javascript工具集.拥有友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档,自定义JQuery插件,完整的类库,基于Less等特点.Bootstrap让Web开发更迅速.更简单. 1.Bootstrap下载 官网:http://getbootstrap.com/:新手入门:http://getbootstrap.com/getting-started

  • 利用Angularjs和Bootstrap前端开发案例实战

    我们将利用Angularjs 和 Bootstrap,开发一个前端应用实例,通过这一次简单的项目实战,引领大家进入AngularJS前端开发的殿堂,并向大家介绍一下几个知识点:  1.MVC 基础,通过项目实例,让大家初步体会MVC设计模式的应用.  2.构建我们第一个AngularJS应用,通过一个实际用例的开发,大家可以对前端开发获得一定的感性认识.  3.初步了解AngularJS三个最重要的组成部件,他们分别是Model, View, 和Controller.  4.初步了解Angula

  • 第一次接触神奇的Bootstrap表单

    本篇将主要介绍Bootstrap表单的使用技巧.  1.Bootstrap基础表单 表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 我们先来看一个基础表单: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title>基础表单</title> <link rel=&quo

随机推荐