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. ajax请求总是进入Error里

    ajax请求时找到了正确的地址,执行完返回总是进入error里,并且浏览器错误显示是找不到请求的地址. 解决办法: 查看配置文件的,把maxJsonLength值改大. <system.web. ...

  2. Spire.Office组件使用例子

    用.NET开发程序通常要涉及到对Office文件读写操作,比较常见的操作比如提取文本,导出Excel格式数据,动态生成word文档,生成pdf文档等. 实现这些功能通常需要在服务端安装office软件 ...

  3. jQuery get() 函数

    get() 函数 用于获取当前jQueryobject对象所匹配的DOM元素 语法 jQueryobject.get(index)//因为在JQuery中.很多时候和[]等价所以jQueryobjec ...

  4. red hat安装mysql二进制包

    数据包命名格式解释 mysql-5.7.15-linux-glibc2.5-x86_64.tar.gz 黑色粗体表示为包名称 蓝色表示linux系统二进制包 红色表示构架     1.上传mysql- ...

  5. 转！！windows记事本保存“联通” 编码问题

    原博文网址:http://blog.csdn.net/Zhiyuan_Ma/article/details/51838054 简单分析: 这是微软记事本的一个BUG,准确点就是unicode编码的问题 ...

  6. Evolutionary Computing: 5. Evolutionary Strategies(1)

    resource: Evolutionary computing, A.E.Eiben Outline What is Evolution Strategies Introductory Exampl ...

  7. try-catch

    try{ // 程序代码 }catch(异常类型1 异常的变量名1){ // 程序代码 }catch(异常类型2 异常的变量名2){ // 程序代码 }catch(异常类型2 异常的变量名2){ // ...

  8. Unity中Time.deltaTime的含义及其应用

    The time in scenes it took to complete the last frame.这是使用此函数的时候给出的提示 一般我们会在设置速度的时候看到这个函数.先写出我对Time. ...

  9. jmeter for循环嵌套if学习2

    if语句中勾选Evaluate选项,每执行一句都会判断result的值是否为true. 执行结果: three没有执行,到debug时变量的值变成tom了

  10. UI测试 错题分析

    从服务器端获取的json对象,可以直接访问对象中的属性 该属性的作用就是C text属性显示节点文本,state属性默认为open 看错行  不能用 ' ' 包裹 state:节点状态,'open' ...