下面是一个基于 bootstrap 前端架构的最最基本的模板：

（这里添加慕课网的学习笔记。）

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

代码：

  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.       <meta charset="utf-8">
  5.       <title>Bootstrap 模板</title>
  6.       <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.       <!-- 引入 Bootstrap -->
  8.       <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  9.  
  10.       <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  11.       <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
  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.3.0/respond.min.js"></script>
  15.       <![endif]-->
  16.    </head>
  17.    <body>
  18.         <div class="container">
  19.             <h1 class="page-header">测试一些标签</h1>
  20.             <p>
  21.                 <span class="token label label-default">this</span>
  22.                 <span class="token label label-danger">is</span>
  23.                 <span class="token label label-default">my</span>
  24.                 <span class="token label label-default">friend</span>
  25.             </p>
  26.             <a href="#">这是一个超级链接</a>
  27.         </div>
  28.       <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
  29.       <script src="https://code.jquery.com/jquery.js"></script>
  30.       <!-- 包括所有已编译的插件 -->
  31.       <script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.js"></script>
  32.    </body>
  33. </html>

显示效果：

2、bootstrap 的提示消息

代码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Bootstrap 模板</title>
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <!-- 引入 Bootstrap -->
  8.         <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  9.  
  10.         <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  11.         <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
  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.3.0/respond.min.js"></script>
  15.         <![endif]-->
  16.     </head>
  17.     <body>
  18.  
  19.         <div class="container">
  20.             <br />
  21.             <div class="alert alert-success">
  22.                 这是一个成功消息，很好地完成了提交。
  23.             </div>
  24.             <div class="alert alert-info">
  25.                 这是一个信息，请注意这个信息。
  26.             </div>
  27.             <div class="alert alert-warning">
  28.                 警告！请不要提交。
  29.             </div>
  30.             <div class="alert alert-danger">
  31.                 错误！请进行一些更改。
  32.             </div>
  33.         </div>
  34.         <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
  35.         <script src="https://code.jquery.com/jquery.js"></script>
  36.         <!-- 包括所有已编译的插件 -->
  37.         <script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.js"></script>
  38.     </body>
  39. </html>

显示效果：

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

源代码：

  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.       <meta charset="utf-8">
  5.       <title>Bootstrap 模板</title>
  6.       <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.       <!-- 引入 Bootstrap -->
  8.       <link href="bootstrap.css" rel="stylesheet">
  9.  
  10.       <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  11.       <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
  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.3.0/respond.min.js"></script>
  15.       <![endif]-->
  16.    </head>
  17.    <body>
  18.         <div class="container">
  19.             <h1 class="page-header">选项卡</h1>
  20.  
  21.             <div class="tabbable tabs-left">
  22.  
  23.                 <ul class="nav nav-tabs nav-pills">
  24.                     <li class="active"><a href="#tab1" data-toggle="tab">bootstrap前端架构</a></li>
  25.                     <li><a href="#tab2" data-toggle="tab">HTML5标准大势所趋</a></li>
  26.                     <li><a href="#tab3" data-toggle="tab">git分布式版本管理大行其道</a></li>
  27.                     <li><a href="#tab4" data-toggle="tab">Maven实战</a></li>
  28.                 </ul>
  29.  
  30.                 <div class="tab-content">
  31.                     <div class="tab-pane active" id="tab1">
  32.                         <p>Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。</p>
  33.                     </div>
  34.                     <div class="tab-pane" id="tab2">
  35.                         <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>
  36.                     </div>
  37.                     <div class="tab-pane" id="tab3">
  38.                         <p>Torvalds 开始着手开发 Git 是为了作为一种过渡方案来替代 BitKeeper，后者之前一直是 Linux 内核开发人员在全球使用的主要源代码工具。开放源码社区中的有些人觉得 BitKeeper 的许可证并不适合开放源码社区的工作，因此 Torvalds 决定着手研究许可证更为灵活的版本控制系统。尽管最初 Git 的开发是为了辅助 Linux 内核开发的过程，但是我们已经发现在很多其他自由软件项目中也使用了 Git。例如 最近就迁移到 Git 上来了，很多 Freedesktop 的项目也迁移到了 Git 上。</p>
  39.                     </div>
  40.                     <div class="tab-pane" id="tab4">
  41.                         <p>Maven 除了以程序构建能力为特色之外，还提供高级项目管理工具。由于 Maven 的缺省构建规则有较高的可重用性，所以常常用两三行 Maven 构建脚本就可以构建简单的项目。由于 Maven 的面向项目的方法，许多 Apache Jakarta 项目发文时使用 Maven，而且公司项目采用 Maven 的比例在持续增长。</p>
  42.                     </div>
  43.                 </div>
  44.  
  45.             </div>
  46.  
  47.         </div>
  48.       <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
  49.       <script src="https://code.jquery.com/jquery.js"></script>
  50.       <!-- 包括所有已编译的插件 -->
  51.       <script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.js"></script>
  52.    </body>
  53. </html>

显示效果：

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

  1. spring mvc 及NUI前端框架学习笔记

    spring mvc 及NUI前端框架学习笔记 页面传值 一.同一页面 直接通过$J.getbyName("id").setValue(id); Set值即可 二.跳转页面(bus ...

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

    选择Yii 2.0版本框架的7个理由 http://blog.chedushi.com/archives/8988 刚接触Yii谈一下对Yii框架的看法和感受 http://bbs.csdn.net/ ...

  3. bootStrap简要和学习笔记

    bootStrap简要和学习笔记前端在学些了html.css.JavaScript三件套后,我们感觉前端变数太多了,需要创造力来设计一些可能经常使用的界面啊.按钮样式啊等,也就有了一些前端的框架,那何 ...

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

    前言:俗话说“金三银四铜五”,不知道我要在这段时间找工作会不会很艰难.不管了,工作三年之后就当给自己放个暑假. 面试当中Collection(集合)是基础重点.我在网上看了几篇讲Collection的 ...

  5. 基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【六】【引入bootstrap前端框架】

    https://blog.csdn.net/linzhefeng89/article/details/78752658 基于springboot+bootstrap+mysql+redis搭建一套完整 ...

  6. MEAN框架学习笔记

    MEAN框架学习笔记 MEAN开发框架的资料非常少.基本的资料还是来自于learn.mean.io站点上的介绍. 于是抱着一种零基础学习的心态,在了解的过程中,通过翻译加上理解将MEAN框架一点点消化 ...

  7. bootCDN引用的bootstrap前端框架套件和示例

    这是bootCDN上引用的bootstrap前端框架套件,由多个框架组合而成,方便平时学习和测试使用.生产环境要仔细琢磨一下,不要用开发版,而要用生产版.bootCDN的地址是:https://www ...

  8. CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架：

    19:29 2016/3/10CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架:项目主路径:F:\wamp\www\graduationPr ...

  9. phalcon（费尔康）框架学习笔记

    phalcon(费尔康)框架学习笔记 http://www.qixing318.com/article/phalcon-framework-to-study-notes.html 目录结构   pha ...

随机推荐

  1. JavaScript 变量，语句

    定义变量的方式: var   变量可以没有初始值,变量可以修改,变量可以覆盖,存在变量提升. // 变量提升机制 console.log(name)// undefined var name = &q ...

  2. exceptions: django2.2/ mysql ImproperlyConfigured: mysqlclient 1.3.13 or newer is required; you have 0.9.3

    在centos部署python应用后访问页面,显示如下异常信息 报错环境 python=3.6,django=2.2……django.core.exceptions.ImproperlyConfigu ...

  3. Selfishness is not living as one wishes to live. it is asking others to live as wishes to live.

    regin: n. 统治; 任期 lap:n. 大腿部. procession: n. 行列,游行 lessen: n. 减少 wade: v. 跋涉 patriotic: adj. 爱国的 Medi ...

  4. JavaScript文件中; !function (win, undefined) {}(window);的意义

    +function (){}-function (){}!function (){}~function (){}(function (){})() 这种写法可以保证匿名函数立即运行且运行一次 传入的 ...

  5. levelDB SSTable-静态布局结构

    SSTable是Bigtable中至关重要的一块,对于LevelDB来说也是如此,对LevelDB的SSTable实现细节的了解也有助于了解Bigtable中一些实现细节.     本节内容主要讲述S ...

  6. MySQL的练习

    mysql登录:方法1:使用Command Line Client登录,缺点:不显示报错信息 方法2:使用cmd登录(cmd的常用:查看ip地址:ipcongfi-----定时关机:shutdown ...

  7. Codeforces 984D 题解(DP)

    题面 传送门 题目大意: 给你一个计算区间f函数的公式,举例f(1,2,4,8)=f(1⊕2,2⊕4,4⊕8)=f(3,6,12)=f(3⊕6,6⊕12)=f(5,10)=f(5⊕10)=f(15)= ...

  8. 在eclipse上配置多个jdk

    在实际生产中,可能会遇到这样的问题:在eclipse中存在多个项目时,可能不同的项目需要不同的jdk版本.这时,我们就可以给eclipse配置多个jdk进行切换. 注:貌似只有较新版eclipse才能 ...

  9. 分布式唯一ID生成器

    在应用程序中,经常需要全局唯一的ID作为数据库主键.如何生成全局唯一ID? 首先,需要确定全局唯一ID是整型还是字符串?如果是字符串,那么现有的UUID就完全满足需求,不需要额外的工作.缺点是字符串作 ...

  10. <input>/<textarea>输入框设置默认提示文字（隐藏式）

    html代码如下: <tr>    <td>签   名:</td>    <td><input type="text" nam ...