旺财速啃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（一）的更多相关文章

旺财速啃H5框架之Bootstrap（五）
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
旺财速啃H5框架之Bootstrap（四）
上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...
旺财速啃H5框架之Bootstrap（三）
好多天没有写了,继续走起在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...
旺财速啃H5框架之Bootstrap（六）
年后太忙,一直没有更新好,这篇结束,速啃嘛,就应该拿重点,实用点.继续之前的内容,接着来讲讲网页中常用的布局组件与插件,我喜欢用简单的直接的话或案例来说明,就是针对那些想快速能做出点东西的人而准备的 ...
旺财速啃H5框架之Bootstrap（二）
突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续上一篇的已经把bootstrap了解个大概了,接 ...
H5框架之Bootstrap（二）
H5框架之Bootstrap(二) 突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续上一篇的已经 ...
H5框架之Bootstrap（一）
H5框架之Bootstrap(一) 接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了 ...
关于H5框架之Bootstrap的小知识
浏览器支持旧的浏览器可能无法很好的支持 Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器 CSS源码研究我们不是在head里面引入了下面这些文件么 &l ...
关于web开发前端h5框架的选择
关于web开发前端h5框架的选择看了很多移动版框架都是基于app混合式开发的,不是单独h5网站的基于h5开发的web框架从组件丰富度,兼容性,相关教程来说bootstrap还是最好的react和vu ...

随机推荐

NYOJ 1007
在博客NYOJ 998 中已经写过计算欧拉函数的三种方法,这里不再赘述. 本题也是对欧拉函数的应用的考查,不过考查了另外一个数论基本定理:如何用欧拉函数求小于n且与n互质所有的正整数的和. 记eule ...
JS 判断数据类型的三种方法
说到数据类型,我们先理一下JavaScript中常见的几种数据类型: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Functi ...
为什么做java的web开发我们会使用struts2，springMVC和spring这样的框架?
今年我一直在思考web开发里的前后端分离的问题,到了现在也颇有点心得了,随着这个问题的深入,再加以现在公司很多web项目的控制层的技术框架由struts2迁移到springMVC,我突然有了一个新的疑 ...
一步一步教你用CSS画爱心
今天小颖给大家分享一个用CSS画的爱心,底下有代码和制作过程,希望对大家有所帮助. 第一步: 先画一个正方形.如图: <!DOCTYPE html> <html> <he ...
jquery插件的用法之cookie 插件
一．使用cookie 插件插件官方网站下载地址:http://plugins.jquery.com/cookie/ cookie 插件的用法比较简单,直接粘贴下面代码示例: //生成一个cookie ...
【Python五篇慢慢弹】快速上手学python
快速上手学python 作者:白宁超 2016年10月4日19:59:39 摘要:python语言俨然不算新技术,七八年前甚至更早已有很多人研习,只是没有现在流行罢了.之所以当下如此盛行,我想肯定是多 ...
Spark踩坑记——数据库（Hbase+Mysql）
[TOC] 前言在使用Spark Streaming的过程中对于计算产生结果的进行持久化时,我们往往需要操作数据库,去统计或者改变一些值.最近一个实时消费者处理任务,在使用spark streami ...
我这么玩Web Api（一）：帮助页面或用户手册(Microsoft and Swashbuckle Help Page)
前言你需要为客户编写Api调用手册?你需要测试你的Api接口?你需要和前端进行接口对接?那么这篇文章应该可以帮到你.本文将介绍创建Web Api 帮助文档页面的两种方式,Microsoft Help ...
thinkphp数据的查询和截取
public function NewsList(){ $this->assign('title','news'); $p = I('page',1); $listRows = 6; $News ...
ORACLE分区表梳理系列（二）- 分区表日常维护及注意事项（红字需要留意）
版权声明:本文发布于http://www.cnblogs.com/yumiko/,版权由Yumiko_sunny所有,欢迎转载.转载时,请在文章明显位置注明原文链接.若在未经作者同意的情况下,将本文内 ...

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

接下来：hello word

旺财速啃H5框架之Bootstrap（一）的更多相关文章

随机推荐

热门专题