bootstrap基础学习小记(一)简介模板、全局样式

分享到:

      2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所设计和建立,在github上开源之后,迅速成为该站上最多人watch&fork的项目。大量工程师踊跃为该项目贡献代码,社区惊人地活跃,代码版本进化非常快速,官方文档质量极其高(可以说是优雅),同时涌现了许多基于Bootstrap建设的网站:界面清新、简洁;要素排版利落大方。

      GitHub上这样介绍 bootstrap:

      ☑  简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。

      ☑  基于html5、css3的bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档。

      ☑  自定义JQuery插件,完整的类库,基于Less等。

     

      Bootstrap官网:http://getbootstrap.com

 

      bootstrap包含文件

         

 1 <!DOCTYPE html><!-- HTML5定义 -->
 2 <html lang="en">
 3     <head>
 4         <meta charset="utf-8"><!-- 页面编码 -->
 5         <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 因为不支持IE的兼容模式,加上此句代码能够在IE浏览器中运行最新的渲染模式 -->
 6         <meta name="viewport" content="width=device-width, initial-scale=1"><!-- 适配移动浏览器,初始化移动浏览显示。content=视口的宽度=物理设备的分辨率,initial-scale=1不做任何缩放 -->
 7         <title>Bootstrap的HTML标准模板</title>
 8         <link href="css/bootstrap.min.css" rel="stylesheet"><!--Bootstrap样式文件(本地文件)-->
 9 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"><!--Bootstrap样式文件(互联网文件位置)-->
10         <link href="css/your-style.css" rel="stylesheet"><!--你自己的样式文件 -->
11         <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询,如果不需要用可以移除。浏览器版本低于IE9,载入的JS文件(bootstrap不支持IE7),第一句是让IE8支持HTML5标签,第二句是IE8对媒体查询的支持 -->
12         <!--[if lt IE 9]>
13         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
14         <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
15         <![endif]-->
16     </head>
17     <body>
18         <div class="jumbotron">
19         <h1>Hello, world!</h1>
20         <p>模板内容</p>
21         <p><a href="#" >Learn more »</a></p>
22         </div>
23         <!-- 如果要使用Bootstrap的js插件,必须先调入jQuery -->
24         <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
25         <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用-->
26         <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
27     </body>
28 </html>
昵    称:
验证码:

相关文档:

  • HTML5方向键控制会奔跑的马里奥大叔
    <!DOCTYPEhtml> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/> <title>HTML5会奔跑的马里奥大叔丨石家...
  • 用HTML5构建一个流程图绘制工具
    在我们的开发工程中经常会使用到各种图,所谓的图就是由节点和节点之间的连接所形成的系统,数学上专门有一个分支叫图论(GraphTher...
  • PhantomJS快速入门
    PhantomJS快速入门 本文简要介绍了PhantomJS的相关基础知识点,主要包括PhantomJS的介绍、下载与安装、HelloWorld程序、核心模块介绍等。由于...
  • html5 浏览器端数据库
    一、为什么使用浏览器端数据库 随着浏览器的处理能力不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少...
  • HTML5入门篇
    ----HTML5简介 HTML5是用于取代1999年所制定的HTML4.01和XHTML1.0标准的HTML标准版本,现在仍处于发展阶段,但大部分浏览器已经支持某些HTML5技...
  • <HTML5 + Docker>的插件集装箱
    Android和Docker的一致架构设计(5) --<HTML5+Docker>的插件集装箱 By高焕堂(台灣Docker論壇主席) 2015/03/16misoo.tw@qq.com 歡迎報名參加2015北京開...
  • HTML5 文档结构元素
    ...
  • html5打开摄像头并用canvas模拟拍照
    网上很多关于用HTML5打开本地摄像头的文章,但各有瑕疵。根据我自己的亲身体验,我分享一下我用HTML5打开摄像头的经验。废话不多说...
  • HTML5对web workers和服务器发送事件的支持
    1)对webworkers的支持 webworker是运行在后台的JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、...
  • 让所有的浏览器都能识别HTML5标签样式的小插件
    如今HTML5愈来愈引发大家的关注了,但目前支持HTML5的浏览器还不是主流,特别是国内用户近50%以上仍旧使用IE6,由于支持HTML5的IE9不支持...
  • HTML5手机开发——滚动和惯性缓动
    1.滚动 以下是三种实现方式: 1)利用原生的css属性overflow:scroll <divid="parent"style="overflow:scroll;><divid='content'>内容区域</div></d...
  • 基于HTML5 Canvas可撕裂布料效果
    分享一款布料效果的HTML5Canvas应用演示,效果逼真。你会看到,借助Canvas的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神...
  • How To Make a Custom HTML5 Select Menu with Selectize.js
    http://designm.ag/tutorials/howto-html5-select-menu-with-selectizejs/ HowToMakeaCustomHTML5SelectMenuwithSelectize.js byJakeRocheleau August22,2013i...
  • APP定制 HTML5开发 UNITY3D游戏开发 Mac软件外包
    APP定制HTML5开发UNITY3D游戏开发Mac软件外包 app软件开发带给企业哪些价值? APP现在对于很多人都不在是陌生的词语,而是用户智能时代的...
  • [转]Using the HTML5 and jQuery UI Datepicker Popup Calendar with ASP.NET MVC
    本文转自:http://www.asp.net/mvc/overview/older-versions/using-the-html5-and-jquery-ui-datepicker-popup-calendar-with-aspnet-mvc/using-the-html5-and-jquery...
  • HTML5应用程序缓存Application Cache
    什么是ApplicationCache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cachemanifest文件,可...
  • WPF The Hard Way
    WPFTheHardWay WindowsPresentationFoundation(WPF)是微软下一代显示系统,用于生成能带给用户震撼视觉体验的Windows客户端应用程序。使用WPF,您可...
  • html5定义的新标签
    ◆<article>标记定义一篇文章◆<aside>标记定义页面内容部分的侧边栏◆<audio>标记定义音频内容◆<canvas>标记定义图片◆&l...
  • IE6-9不支持Textarea的maxlength属性
    给textarea标签添加一个maxlength=200,测试工程师提bug说IE9没起作用。后一测试,发现IE10一下的浏览器均不支持 <textareamaxlength="200"></...
  • HTML5的local storage存储的数据到底存到哪去了
    原文地址:http://zhidao.baidu.com/link?url=m6p5MLv0R46lDCd_Vnrry4XOMbdCwgV5fzs3tj5Jeyht1nPkAZ9OrO23njYBY15UMobx63X1MdP-EwKKqerm-_zSugwqqLin_TsClwOrH_O 基本使用...