bootstrap 前端框架学习笔记

1、认识一下 bootstrap 带来的优雅效果：

代码：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

      <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
        <div class="container">
            <h1 class="page-header">测试一些标签</h1>
            <p>
                <span class="token label label-default">this</span>
                <span class="token label label-danger">is</span>
                <span class="token label label-default">my</span>
                <span class="token label label-default">friend</span>
            </p>
            <a href="#">这是一个超级链接</a>
        </div>
      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.js"></script>
   </body>
</html>

显示效果：

2、bootstrap 的提示消息

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Bootstrap 模板</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- 引入 Bootstrap -->
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

        <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
        <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>

        <div class="container">
            <br />
            <div class="alert alert-success">
                这是一个成功消息，很好地完成了提交。
            </div>
            <div class="alert alert-info">
                这是一个信息，请注意这个信息。
            </div>
            <div class="alert alert-warning">
                警告！请不要提交。
            </div>
            <div class="alert alert-danger">
                错误！请进行一些更改。
            </div>
        </div>
        <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
        <script src="https://code.jquery.com/jquery.js"></script>
        <!-- 包括所有已编译的插件 -->
        <script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.js"></script>
    </body>
</html>

显示效果：

3、选项卡效果（在左侧）

源代码：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="bootstrap.css" rel="stylesheet">

      <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
        <div class="container">
            <h1 class="page-header">选项卡</h1>

            <div class="tabbable tabs-left">

                <ul class="nav nav-tabs nav-pills">
                    <li class="active"><a href="#tab1" data-toggle="tab">bootstrap前端架构</a></li>
                    <li><a href="#tab2" data-toggle="tab">HTML5标准大势所趋</a></li>
                    <li><a href="#tab3" data-toggle="tab">git分布式版本管理大行其道</a></li>
                    <li><a href="#tab4" data-toggle="tab">Maven实战</a></li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane active" id="tab1">
                        <p>Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。</p>
                    </div>
                    <div class="tab-pane" id="tab2">
                        <p>标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web超文本应用技术工作组 -WHATWG） 的组织。WHATWG 致力于 Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟） 专注于XHTML2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。</p>
                    </div>
                    <div class="tab-pane" id="tab3">
                        <p>Torvalds 开始着手开发 Git 是为了作为一种过渡方案来替代 BitKeeper，后者之前一直是 Linux 内核开发人员在全球使用的主要源代码工具。开放源码社区中的有些人觉得 BitKeeper 的许可证并不适合开放源码社区的工作，因此 Torvalds 决定着手研究许可证更为灵活的版本控制系统。尽管最初 Git 的开发是为了辅助 Linux 内核开发的过程，但是我们已经发现在很多其他自由软件项目中也使用了 Git。例如 最近就迁移到 Git 上来了，很多 Freedesktop 的项目也迁移到了 Git 上。</p>
                    </div>
                    <div class="tab-pane" id="tab4">
                        <p>Maven 除了以程序构建能力为特色之外，还提供高级项目管理工具。由于 Maven 的缺省构建规则有较高的可重用性，所以常常用两三行 Maven 构建脚本就可以构建简单的项目。由于 Maven 的面向项目的方法，许多 Apache Jakarta 项目发文时使用 Maven，而且公司项目采用 Maven 的比例在持续增长。</p>
                    </div>
                </div>

            </div>

        </div>
      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.js"></script>
   </body>
</html>

显示效果：

时间： 2024-10-02 06:39:24

bootstrap 前端框架学习笔记的相关文章

Yii框架学习笔记（二）将html前端模板整合到框架中

选择Yii 2.0版本框架的7个理由 http://blog.chedushi.com/archives/8988 刚接触Yii谈一下对Yii框架的看法和感受 http://bbs.csdn.net/topics/390807796 更多内容百度:yii 前端 http://my.oschina.net/u/1472492/blog/221085 摘要 Yii框架学习笔记(二)将html前端模板整合到框架中原文地址:http://www.ldsun.com/1309.html 上一节成功将Y

JavaSE中Collection集合框架学习笔记(2)——拒绝重复内容的Set和支持队列操作的Queue

前言:俗话说“金三银四铜五”,不知道我要在这段时间找工作会不会很艰难.不管了,工作三年之后就当给自己放个暑假. 面试当中Collection(集合)是基础重点.我在网上看了几篇讲Collection的文章,大多都是以罗列记忆点的形式书写的,没有谈论实现细节和逻辑原理.作为个人笔记无可厚非,但是并不利于他人学习.希望能通过这种比较“费劲”的讲解,帮助我自己.也帮助读者们更好地学习Java.掌握Java. 无论你跟我一样需要应聘,还是说在校学生学习Java基础,都对入门和进一步启发学习有所帮助.(关

MEAN框架学习笔记

MEAN框架学习笔记 MEAN开发框架的资料非常少.基本的资料还是来自于learn.mean.io站点上的介绍. 于是抱着一种零基础学习的心态,在了解的过程中,通过翻译加上理解将MEAN框架一点点消化而且吸收,一步一步来.慢慢地记录我学习MEAN的点点滴滴. 1.MEAN是可以管理用户的通过MEAN的mean-cli来管理用户.命令是: $ mean user <email> $ mean user <email> --addRole <role>; $ mean u

windows下scrapy框架学习笔记—'scrapy' 不是内部或外部命令

最近几天在深入的学习scrapy框架,但是装完各种需要的基础包之后却发现scrapy命令在别的路径下都用不了,我一开始是把python安装在F:\Python路径下的,安装了scrapy后它默认都会安装在这个路径下,scrapy在路径F:\Python\Scripts路径下,我的scrapy命令只能在此路径下用,因此创建什么工程也都只能在此文件下. 想了一下它的工作原理:它在F:\Python\Scripts路径下,就会在Scripts文件下存在一个scrapy批处理文件,那么在DOS下想要命令

JavaSE中线程与并行API框架学习笔记——线程为什么会不安全？

前言:休整一个多月之后,终于开始投简历了.这段时间休息了一阵子,又病了几天,真正用来复习准备的时间其实并不多.说实话,心里不是非常有底气. 这可能是学生时代遗留的思维惯性--总想着做好万全准备才去做事.当然,在学校里考试之前当然要把所有内容学一遍和复习一遍.但是,到了社会里做事,很多时候都是边做边学.应聘如此,工作如此,很多的挑战都是如此.没办法,硬着头皮上吧. 3.5 线程的分组管理在实际的开发过程当中,可能会有多个线程同时存在,这对批量处理有了需求.这就有点像用迅雷下载电视剧,假设你在同时

SuperSocket框架学习笔记4-SuperWebSocket---使用SubCommandBase

首先下载所需要的 DLL http://download.csdn.net/detail/wai2dance123/7389285 或者参见第2章到SuperSocket官网下载 http://www.cnblogs.com/xmcrew/p/3747354.html 1,新建一个 .NET4.0 控制台应用程序命名为 DiyServers 添加以下引用将默认的Program.cs改名为 DiyServers.cs 并添加以下命名空间 2,写自己的DSession和DServer继承自

JavaSE中Collection集合框架学习笔记(3)——遍历对象的Iterator和收集对象后的排序

前言:暑期应该开始了,因为小区对面的小学这两天早上都没有像以往那样一到七八点钟就人声喧闹.车水马龙. 前两篇文章介绍了Collection框架的主要接口和常用类,例如List.Set.Queue,和ArrayList.HashSet.LinkedList等等.根据核心框架图,相信我们都已经对Collection这个JavaSE中最常用API之一有一个较为全面的认识. 这个学习过程,还可以推及到其他常用开源框架和公司项目的学习和熟悉上面.借助开发工具或说明文档,先是对项目整体有一个宏观的认识,再根

j2ee开发之Spring2.5框架学习笔记

Spring 2.5框架学习笔记 1.是一个开源的控制反转IOC和面向切面AOP的容器框架 2.IOC控制反转 public class PersonServiceBean { private PersonDao personDao = new PersonDao(); publiv void save(Person person){ personDao.save(person); } } 控制反转:应用本身不负责依赖对象personDao的创建以及维护,依赖对象的创建以及维护是由外部容器负责的

Java集合框架学习笔记之集合与Collection API

一.CollectionAPI 集合是一系列对象的聚集(Collection).集合在程序设计中是一种重要的数据接口.Java中提供了有关集合的类库称为CollectionAPI. 集合实际上是用一个对象代表一组对象,在集合中的每个对象称为一个元素.在集合中的各个元素的具体类型可以不同,但一般说来,它们都是由相同的类派生出来的(而这一点并不难做到,因为Java中的所有类都是Object的子类).在从集合中检索出各个元素是,常常要根据其具体类型不同而进行相应的强制类型转换. Collection