H5框架之Bootstrap（一）

接下来的时间里，我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习，以案例的形式、对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了。如果你想详细的学习Bootstrap，建议去http://noob.d8jd.com/noob/5.html这里学习，说多了，开始走两步....

第一步：下载Bootstrap

看这个大B就知道有多NB了，哈哈~~~~

英文也说它最流行的HTML，CSS和JS框架，至于它有哪些好处，谁用谁知道。

官方下载地址：http://getbootstrap.com/getting-started/#download

中文网下载地址：http://v3.bootcss.com/getting-started/#download

下载第一个哦

下载下来解压后，目录大体是这样的：

bootstrap/

├── css/

│   ├── bootstrap.css

│   ├── bootstrap.min.css

│   ├── bootstrap-theme.css

│   └── bootstrap-theme.min.css

├── js/

│   ├── bootstrap.js

│   └── bootstrap.min.js

└── fonts/

    ├── glyphicons-halflings-regular.eot

    ├── glyphicons-halflings-regular.svg

    ├── glyphicons-halflings-regular.ttf

    └── glyphicons-halflings-regular.woff

但是你的网站上线了，最好用它cdn里面的地址，除非你能保证你的网络特牛掰。。。

引用CDN地址，只须要在head之间加入如下代码：

<!-- 新 Bootstrap 核心 CSS 文件 --> 
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/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="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

接下来：hello word

案例来起：

<!DOCTYPE html>

<html>

<head>

  <title>在线尝试 Bootstrap 实例</title>

  <!-- 新 Bootstrap 核心 CSS 文件 -->

  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

  <!-- 可选的Bootstrap主题文件（一般不用引入） -->

  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/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="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>

<body>

      <h1>Hello, world!</h1>

      是不是太老套，真心不想看到它

</body>

</html>

看效果，《猛点这里》

注意，要想对手机显示友好，请在head之间加上：

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>

具体意思嘛：

width - viewport的宽度 height - viewport的高度

initial-scale - 初始的缩放比例

minimum-scale - 允许用户缩放到的最小比例

maximum-scale - 允许用户缩放到的最大比例

user-scalable - 用户是否可以手动缩放

再上案例：

<!DOCTYPE html>

<html>

<head>

  <title>Bootstrap 实例</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>

  <!-- 新 Bootstrap 核心 CSS 文件 -->

  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

  <!-- 可选的Bootstrap主题文件（一般不用引入） -->

  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/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="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

  <div class="jumbotron">

    <h1>我的第一个 Bootstrap 页面</h1>

    <p>重置窗口大小，查看响应式效果！</p>

  </div>

  <div class="row">

    <div class="col-sm-4">

      <h3>第一列</h3>

      <p>学的不仅是技术，更是梦想！</p>

      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>

    </div>

    <div class="col-sm-4">

      <h3>第二列</h3>

      <p>学的不仅是技术，更是梦想！</p>

      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>

    </div>

    <div class="col-sm-4">

      <h3>第三列</h3>

      <p>学的不仅是技术，更是梦想！</p>

      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>

    </div>

  </div>

</div>

</body>

</html>

看效果，《猛点这里》

-转载

H5框架之Bootstrap（一）的更多相关文章

  1. 旺财速啃H5框架之Bootstrap（五）

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  2. 旺财速啃H5框架之Bootstrap（四）

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  3. 旺财速啃H5框架之Bootstrap（三）

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  4. H5框架之Bootstrap（二）

    H5框架之Bootstrap(二) 突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经 ...

  5. 旺财速啃H5框架之Bootstrap（一）

    接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...

  6. 旺财速啃H5框架之Bootstrap（二）

    突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接 ...

  7. 关于H5框架之Bootstrap的小知识

    浏览器支持 旧的浏览器可能无法很好的支持 Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器 CSS源码研究 我们不是在head里面引入了下面这些文件么 &l ...

  8. 旺财速啃H5框架之Bootstrap（六）

    年后太忙,一直没有更新 好,这篇结束,速啃嘛,就应该拿重点,实用点.继续之前的内容,接着来讲讲网页中常用的布局组件与插件,我喜欢用简单的直接的话或案例来说明,就是针对那些想快速能做出点东西的人而准备的 ...

  9. 关于web开发前端h5框架的选择

    关于web开发前端h5框架的选择 看了很多移动版框架都是基于app混合式开发的,不是单独h5网站的基于h5开发的web框架从组件丰富度,兼容性,相关教程来说bootstrap还是最好的react和vu ...

随机推荐

  1. jquery 和 css 属性

    offset()获取标签离左上角的位置,离顶部和左部的距离.离整个屏幕的左上角的距离. position() 相对于某一个标签的位置.离父标签的距离.离父标签的左上角的距离. height(), wi ...

  2. svn中cleanup作用

    我们开发项目的时候,用版本控制软件svn提交项目时候难免会遇到cleanup,那么这个提示是怎么产生的呢?它有什么作用呢? 产生原因:SVN 本地更新时,由于一些操作中断更新,如磁盘空间不够,用户取消 ...

  3. Java中，包的概念、常量、静态成员、继承

    新建包:左上角-新建-包 命名规则(通常从大到小,方便整合不容易冲突)  例如:com.itnba.maya.test package必须在最顶行,之前不能再有其他代码 使用包: 快捷方式:使用包中的 ...

  4. easyui datagrid 动态操作editor 的方法

    easyui本身是不提供这么细节的功能的,需要我们自己拓展下: 在easyui.min.js中扩展: $.extend($.fn.datagrid.methods, { addEditor : fun ...

  5. python征程1.1（初识python）

    在学习python前必须要掌握的一些基本知识   1.编程语言 2.python   .  C#   JAVA 3.python:  pypy    cpython     jpython 4.执行方 ...

  6. 关于java中接口定义常量和类定义常量的区别

    /** * * @author YZJ * @Description java中定义常量的最佳方法 */ public final class Contants{ /** * @Description ...

  7. Java基础学习 -- 接口

    interface是一种特殊的class 接口是纯抽象类 所有的成员函数都是抽象函数: 所有的成员变量都是public static final; 接口是为了方便类的调用 一个类如果要去实现某个接口, ...

  8. js事件处理、事件对象

    事件类型分类: 1 添加在html结构中的事件 <div id="div1" onclick="alert('append click event in html' ...

  9. js 之 continue break return 用法及注意事项

    1,continue continue有两种用法: 1,continue; 这种用法必须包含在循环里,否则报错,例子: for(var i=0;i<10;i++){ if(i%2===0){ c ...

  10. javascript的函数（二）

    1. 函数的作用域 作用域是指变量的存在的范围.javascript中有两种作用域,一种是全局作用域,变量在整个程序中一直存在,另一种是函数作用域,变量只存在于函数体内部.在函数体外部声明的变量就是全 ...