第一篇初识bootstrap_javascript技巧

Bootstrap是一款目前非常流行的前端框架,简单的说,就是html,css,javascript的工具集,我们可以用bootstrap搭建出简洁,清新的网站或软件界面,有了bootstrap这个利器后台开发人员再也不用发愁前台界面的搭建了。

Bootstrap(1)包含了丰富的web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件:下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对话框等。

(2)自带了13个jQery插件,这些插件为bootstrap中的组件赋予了生命。其中包括:模式对话框、标签页、滚动条、弹出框等。

Bootstrap是twitter的工程师在业余时间开发的,在最大最流行的开源站点github上开源以后讯速成为该网站上更新最频繁的项目,大量工程师踊跃为该项目贡献代码,短时间内涌现出大量使用bootstrap搭建的网站。何以bootstrap发展速度会如此惊人呢?这主要得益于bootstrap的优秀特性:

移动设备优先:将针对移动的特性放在了首位

浏览器支持:所有的主流浏览器都支持 Bootstrap

容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap

响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

它包含了功能强大的内置组件,易于定制

下面我们来看用bootstrap搭建出来的最简单的一个页面。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>我的第一个 Bootstrap 页面</h1>
<p>重置窗口大小,查看响应式效果!</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>学的不仅是技术,更是梦想!</p>
<p>再牛逼的梦想,也抵不住你傻逼似的坚持!</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>学的不仅是技术,更是梦想!</p>
<p>再牛逼的梦想,也抵不住你傻逼似的坚持!</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>学的不仅是技术,更是梦想!</p>
<p>再牛逼的梦想,也抵不住你傻逼似的坚持!</p>
</div>
</div>
</div>
</body>
</html>

以上所述是小编给大家介绍的第一篇初识bootstrap的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索初识bootstrap
第一篇 买入技巧篇、bootstrap javascript、bootstrap使用技巧、bootstrap 技巧、bootstrap布局技巧,以便于您获取更多的相关知识。

时间: 2024-09-24 09:28:20

第一篇初识bootstrap_javascript技巧的相关文章

第一章之初识Bootstrap_javascript技巧

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

bootstrap学习笔记之初识bootstrap_javascript技巧

Bootstrap是一款目前非常流行的前端框架,简单的说,就是html,css,javascript的工具集,我们可以用bootstrap搭建出简洁,清新的网站或软件界面,有了bootstrap这个利器后台开发人员再也不用发愁前台界面的搭建了. bootstrap是一Twitter推出的一个开源的用于前端开发的工具包,是一个CSS/HTML框架.bootstrap提供了优雅的html和css规范,它即是由动态css语言Less写成.是Github上的热门开源项目. 它基于jQuery框架开发,在

JavaScript 继承详解 第一篇_javascript技巧

面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++.C#.Java)的开发经验. 在传统面向对象的语言中,有两个非常重要的概念 - 类和实例. 类定义了一类事物公共的行为和方法:而实例则是类的一个具体实现. 我们还知道,面向对象编程有三个重要的概念 - 封装.继承和多态. 但是在JavaScript的世界中,所有的这一切特性似乎都不存在. 因为JavaScript本身不是面向对象的语言,而是基于对象的语言. 这里面就有一些有趣的特性,比如JavaScript中所有事物都是对象, 包

MVC4制作网站教程第一篇 绪论_实用技巧

听说Win8和v2012发布,今天心血来潮重装了系统 感觉界面还是不错的. 安装一下vs2012学习一下mvc4,居然没找到Vs2012专业版破解的,干脆下载Express for Web ,算是支持正版吧! 509M很快就下载完,然后安装. 安装完界面,感觉跟vs2010还是有很多不同. 一兄弟说学习最好的方式就是独立完成一个小东东,咱就准备学做个小网站吧,名字想好了大气一点姑且叫做NineskyCMS吧,反正CMS这个名字被用烂,我也跟风一下,希望自己能把她完成. 学习正式开始: 打开VS

JavaScript第一篇之实现按钮全选、功能_javascript技巧

   1.新建一个文档(用NotePad软件,为了使得在浏览器中打开不是乱码,在软件的文件出找到编码,将其修改为UTF-8编码.或者点击谷歌浏览器中的右上角的三条杠,选择更多工具->编码->UTF-8),将其重命名(例:第一个java script.html   注:一定要把扩展名改为.html).    2.将其用记事本的格式打开,进行编写.    3.以下是编写的"按钮全选的实现"的相关代码: <html> <head> <title>

ASP基础入门第一篇(ASP技术简介)_应用技巧

本文将以如何建立基于IIS 的ASP 动态网站为中心向大家一步一步地揭示动态商业网站设计的真正奥秘.为了使各位能够全面.细致地掌握 ASP 的开发技巧,本文今后将采取连载的形式,手把手地教你如何建立属于自己 ASP 动态网站.由于本文是作者根据自己的学习和实践经验并结合了一些外文资料而写成的,因此不免会有一些偏颇,希望各位见谅. Microsoft Active Server Pages 即我们所称的ASP ,其实是一套微软开发的服务器端脚本环境, ASP 内含于 IIS 3.0 和 4.0 之

Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)_javascript技巧

什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 接下来给大家介绍vuejs单向绑定.双向绑定.列表渲染.响应函数基础知识,具体详情如下所示: (一)单向绑定 <div id="app"> {{ message }} </div> <sc

BOM系列第一篇之定时器setTimeout和setInterval_javascript技巧

setTimeout() setTimeout()方法用来指定某个函数或字符串在指定的毫秒数之后执行.它返回一个整数,表示定时器的编号,这个值可以传递给clearTimeout()用于取消这个函数的执行 以下代码中,控制台先输出0,大概过1000ms即1s后,输出定时器setTimeout()方法的返回值1 var Timer = setTimeout(function(){ console.log(Timer); },1000); console.log(0); 也可以写成字符串参数的形式,由

phalapi-入门篇6(小技巧和浅谈API适用范围以及入门篇总结)

phalapi-入门篇6(小技巧和浅谈API适用范围以及入门篇总结) 前言 先在这里感谢phalapi框架创始人@dogstar,为我们提供了这样一个优秀的开源框架. 本篇文章的目的在于把框架自带的一些好用,封装好的一些方便开发的类库简单的说一下,灵活使用可以提高开发效率,再就是因为在交流过程中有很多童鞋提出了一些关于什么样的项目怎么用API和web端怎么使用API这类的问题,我就我的理解把我的一些想法和大家交流一下,最后是对于入门篇做一下总结,以及对后面的一些教程做一下说明. 附上: 官网地址