Bootstrap是一款目前非常流行的前端框架，简单的说，就是html,css,javascript的工具集，我们可以用bootstrap搭建出简洁，清新的网站或软件界面，有了bootstrap这个利器后台开发人员再也不用发愁前台界面的搭建了。Bootstrap是twitter的工程师在业余时间开发的，在最大最流行的开源站点github上开源以后讯速成为该网站上更新最频繁的项目，大量工程师踊跃为该项目贡献代码，短时间内涌现出大量使用bootstrap搭建的网站。何以bootstrap发展速度会如此惊人呢？这主要得益于bootstrap的优秀特性：

移动设备优先：将针对移动的特性放在了首位

浏览器支持：所有的主流浏览器都支持 Bootstrap

容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap

响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

它包含了功能强大的内置组件，易于定制

下面我们来看用bootstrap搭建出来的最简单的一个页面。

<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->

<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

<!--[if lt IE 9]>

<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

<![endif]-->

</head>

<body>

<div class="container">
  <div class="jumbotron">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>重置窗口大小，查看响应式效果！</p>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>学的不仅是技术，更是梦想！</p>
      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>学的不仅是技术，更是梦想！</p>
      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>学的不仅是技术，更是梦想！</p>
      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
    </div>
  </div>
</div>

</body>

</html>

第一篇:初识bootstrap的更多相关文章

  1. 深入理解javascript对象系列第一篇——初识对象

    × 目录 [1]定义 [2]创建 [3]组成[4]引用[5]方法 前面的话 javascript中的难点是函数.对象和继承,前面已经介绍过函数系列.从本系列开始介绍对象部分,本文是该系列的第一篇——初 ...

  2. 我们一起学习WCF 第一篇初识WCF（附源码供对照学习）

    前言:去年由于工作需要我学习了wcf的相关知识,初期对wcf的作用以及为何用怎么样都是一知半解,也许现在也不是非常的清晰.但是通过项目对wcf的运用在脑海里面也算有了初步的模型.今天我就把我从开始wc ...

  3. go [第一篇]初识

    [第一篇] 简介 Go 是一个开源的编程语言,它能让构造简单.可靠且高效的软件变得容易. Go是从2007年末由Robert Griesemer, Rob Pike, Ken Thompson主持开发 ...

  4. 【python游戏编程之旅】第一篇---初识pygame

    本系列博客介绍以python+pygame库进行小游戏的开发.有写的不对之处还望各位海涵. 一.pygame简介 Pygame 是一组用来开发游戏软件的 Python 程序模块,基于 SDL 库的基础 ...

  5. Mybatis之旅第一篇-初识Mybatis

    一.JDBC的问题 为什么我们要使用Mybatis,是因为JDBC存在以下问题 1. 数据库连接创建.释放频繁造成系统资源浪费,从而影响系统性能.如果使用数据库连接池可解决此问题. 2. Sql语句在 ...

  6. spring cloud连载第一篇之bootstrap context

    1. Spring Cloud Context: Application Context Services(应用上下文服务) 1.1 The Bootstrap Application Context ...

  7. JavaWeb学习总结第一篇--初识JavaWeb

    JavaWeb学习总结(一)-- 初识JavaWeb 一:Web相关概念 Web程序也就是一般所说的网站,由服务器.客户端浏览器和网络组成.Web程序的好处就是使用简单,不需要安装.学习,有一台电脑. ...

  8. Docker 第一篇--初识docker

    已经多年不写博客, 看完<晓松奇谈>最后一期猛然觉醒, 决定仔细梳理下自己这几年的知识脉络. 既然决定写, 那么首先就从最近2年热门的开源项目Docker开始.Docker 这两年在国内很 ...

  9. Spring之旅第一篇-初识Spring

    一.概述 只要用框架开发java,一定躲不过spring,Spring是一个轻量级的Java开源框架,存在的目的是用于构建轻量级的J2EE应用.Spring的核心是控制反转(IOC)和面向切面编程(A ...

随机推荐

  1. 总结common-dbutils.jar

    2016/4/13 20:19:36 common-dbutils.jar 最核心的类:QueryRunner updata方法: int update(String sql,Object... pa ...

  2. apache服务器安装以及使用passenger插件部署rails应用

    小例子可以部署在rails自带的WEBrick上,逐渐往后走还得上Apache. 安装apache服务器 命令是sudo apt-get install apache2 安装passenger插件 安 ...

  3. [地图SkyLine二次开发]框架(1)

    项目介绍: 项目是三维地理信息系统的开发,框架MVC4.0 + EF5.0 + Extjs4.2 + SkyLine + Arcgis,是对SkyLine的二次开发. 项目快结束了,先给大家看一眼效果 ...

  4. CSS3动画特效——transform详解

    transform让css3可以做很优质的特效,transform的意思是:改变,使-变形,转换. 在css3中transform的作用也是改变,让元素倾斜,旋转,缩放,位移. 下面来一一分解tran ...

  5. Java网络编程初探

    IP地址案例 package ch17; import javax.swing.text.Style; import java.net.InetAddress; /** * Created by Ji ...

  6. PBS 安装

    How to install PBS Pro using the configure script. . Install the prerequisite packages for building ...

  7. contiki-事件调度

    事件驱动机制广泛应用于嵌入式系统,类似于中断机制,当有事件到来时(比如按键.数据到达),系统响应并处理该事件.相对于轮询机制,事件机制优势很明星,低功耗(系统处于休眠状态,当有事件到达时才被唤醒)和M ...

  8. Java中的JDK动态代理

    所谓代理,其实就是相当于一个中间人,当客户端需要服务端的服务时,不是客户直接去找服务,而是客户先去找代理,告诉代理需要什么服务,然后代理再去服务端找服务,最后将结果返回给客户. 在日常生活中,就拿买火 ...

  9. maven + eclipse + tomcat热部署

    环境:eclipse  + tomcat  + maven + m2eclipse 解决这种问题有两种方案(方案二更好用,不想看方案一的人可以直接绕过). 方案一: 第一种方案摘自http://blo ...

  10. SPSS数据分析—两阶段最小二乘法

    传统线性模型的假设之一是因变量之间相互独立,并且如果自变量之间不独立,会产生共线性,对于模型的精度也是会有影响的.虽然完全独立的两个变量是不存在的,但是我们在分析中也可以使用一些手段尽量减小这些问题产 ...