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. window 配置wnmp(转下整理 ，全)

    工具/原料   RunHiddenConsole.exe 下载地址:http://pan.baidu.com/share/link?shareid=100074&uk=822373947 方法 ...

  2. Java多线程初探

    多线程 单线程的程序只有一个顺序执行流.多个顺序流之间互不干扰. 多线程的创建 定义Thread类的子类,重写该类的run()方法. 创建Thread子类的实例. 调用线程对象的start()方法来启 ...

  3. 老王讲自制RPC框架.(三.ZOOKEEPER）

    (#)定义Zookeeper 分布式服务框架是 Apache Hadoop 的一个子项目,它主要是用来解决分布式应用中经常遇到的一些数据管理问题,如:统一命名服务.状态同步服务.集群管理.分布式应用配 ...

  4. Selenium：元素等待的4种方法

    1.使用Thread.sleep(),这是最笨的方法,但有时候也能用到而且很实用. 2.隐示等待,隐性等待是指当要查找元素,而这个元素没有马上出现时,告诉WebDriver查询Dom一定时间.默认值是 ...

  5. 解决在CAPSLOCK开启情况下sendkeys大小写异常的问题

    http://files.cnblogs.com/files/liuzhaoyzz/sendkeys%E5%A4%A7%E5%B0%8F%E5%86%99.rar 首先利用GetKeyState(vb ...

  6. java中的数据结构（集合|容器）

    对java中的数据结构做一个小小的个人总结,虽然还没有到研究透彻jdk源码的地步.首先.java中为何需要集合的出现?什么需求导致.我想对于面向对象来说,对象适用于描述任何事物,所以为了方便对于对象的 ...

  7. TAP/TUN摘要

    TUN适用于IP帧.Tap适用于以太网帧.TAP摸拟一个以太网设备(以arp广播MAC识别),它操作第二层数据包如以太网数据帧.TUN模拟了网络层ip设备(以点对点的方式,使用ip标识),操作第三层数 ...

  8. STM32 串口固件库中定义的几个中断标志位什么意思?

    在stm32f10x_usart.h中以上几个宏,很没有规律,诈一看还真不知道为什么会这么定义,其实通过代码就很容易明白: D7~D5:代表中断标志位对应的中断使能位在 CR1.CR2还是CR3寄存器 ...

  9. this

    JavaScript 中的 this ! 2016-12-28 vvv阿城 JavaScript 转自  https://qiutc.me/post/this-this-this-in-javascr ...

  10. monkeyrunner自动化测试

    通过MonkeyRunner遍历apk文件夹里的apk文件,实现自动安装应用,打开应用,截图,将截图与提前准备好的基线图做对比,对比相似度达到90%时,则对比通过,然后自动卸载应用,进入下一个APK文 ...