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. fineUI ueditor（可能别的editor也有）配置注意事项

    1.把ueditor配置在弹窗里的一些小问题 这种弹窗的原理 如果把ueditor放进这个小窗口里 放进items里(以下截图还没有放) 那么配置的ueditor是不可用的 就好像enable=fal ...

  2. 1012. The Best Rank (25)

    To evaluate the performance of our first year CS majored students, we consider their grades of three ...

  3. Sublime Text 配置记录

    sublime userSetting sublime theme sublime plug sublime userSetting 对sublime的配置 { "color_scheme& ...

  4. VMWARE里启动kylin16.0时出现'SMBus Host Controller not enabled'(还未进入系统）

    在Vmware里安装完Ubuntu16.10,启动时出现'SMBus Host Controller not enabled'错误提示,进不到图形界面.网上搜了一下,解决办法是在图形界面里进终端窗口, ...

  5. 浅谈android binder机制

    binder机制 是谷歌优化在android上更适合终端的IPC(多进程通信方式),满足系统对通信方式,传输性能和安全性的要求. 特性: 1. 用驱动程序来推进进程间的通信.2. 通过共享内存来提高性 ...

  6. gulp入门教程（详细注解）

    本文转载自http://www.ydcss.com/archives/18 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很 ...

  7. 分页组件 - layui.laypage

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. Python中文乱码

    1,注意:请使用智慧型浏览器 "CHROME" 配合理解和运作本文中提到的程序. 2,提示:谷歌的CHROME浏览器是迄今为止最智慧的浏览器,没有之一,只有第一. 3,谷歌的CHR ...

  9. mysql 重置root密码

    最近又项目用到mysql 由于电脑上mysql是很久以前安装的root密码忘记了, 百度一下重置密码 Windows: 1.以系统管理员登陆: 2.停止MySQL服务: 3.进入CMD,进入MySQL ...

  10. java 简单数组元素的增删改查

    public class Test { static int[] a = new int[20]; static int n; public static void main(String[] arg ...