一直都想认真的学习一下Bootstrap，但是由于种种原因，一直没有行动，虽然期间有使用过Bootstrap，但是都没有系统的学习过。最近工作室（学校老师的工作室）安排了一个前端任务让我跟进，主要是根据已有的美工图，用html+css布局出页面，要求使用Bootstrap。正好可以系统的学习一下Bootstrap了，现在开始将学习笔记写成博文。

1、下载Bootstrap

  • 进去以后可以看见有三个版本下载，这里只下载第一个用作学习使用。

2、开始使用Bootstrap

  • 将下好的Bootstrap源码导入到项目工程里，这里我的路径是/WebRoot/styles/bootstrap/。

  • 新建一个html页面，这里我创建的是jsp页面（项目使用了Spring MVC 框架），将下面的代码复制进去。
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%><%@ include file="/include.inc.jsp"%>

<!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">

<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

<title>首页</title>

<!-- 新 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="${base}/styles/bootstrap/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->

<link rel="stylesheet" href="${base}/styles/bootstrap/css/bootstrap-theme.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

<script src="${base}/styles/bootstrap/js/jquery-1.7.2.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="${base}/styles/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

    <div class="container theme-showcase" role="main">

      <!-- Main jumbotron for a primary marketing message or call to action -->

      <div class="jumbotron">

        <h3>Theme example</h3>

        <p>This is a template showcasing the optional theme stylesheet included in Bootstrap.

　　　　　　Use it as a starting point to create something more unique

　　　　　　by building on or modifying it.</p>

      </div>

    </div>

</body>

</html>
  • 访问你的页面路径就能看到效果了，如果失败，请检查引用路径。

  • 这里特别要注意的是css和js文件的引用顺序。
  • 现在你就正式进入Bootstrap的世界了。

Bootstrap入门（第一天）的更多相关文章

  1. BootStrap入门教程 (一)

    BootStrap入门教程 (一)   2011年,twitter的"一小撮"工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端 ...

  2. Bootstrap入门（三十）JS插件7：警告框

    Bootstrap入门(三十)JS插件7:警告框 通过这个插件可以为警告信息添加点击以及消失的功能. 当使用一个.close按钮,它必须是第一个子元素.alert-dismissible,并没有文字内 ...

  3. Bootstrap入门（二十七）JS插件4：标签页

    Bootstrap入门(二十七)JS插件4:标签页 标签页的切换可以带动内容的变化 首先我们引入CSS文件 <link href="bootstrap.min.css" re ...

  4. Bootstrap入门（十八）组件12：徽章与巨幕

    Bootstrap入门(十八)组件12:徽章与巨幕 1.徽章 2.巨幕 1.徽章 给链接.导航等元素嵌套 <span class="badge"> 元素,可以很醒目的展 ...

  5. Bootstrap入门（十一）组件5：输入框组

    Bootstrap入门(十一)组件5:输入框组   1.为其中添加第一个输入框 2.添加额外的元素 3.为用户提供标识 4.改变输入框的尺寸 5.为额外添加多选/单选框 6.与按钮结合 7.与下拉菜单 ...

  6. Bootstrap入门（九）组件3：按钮组

    Bootstrap入门(九)组件3:按钮组   先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) <link h ...

  7. Bootstrap入门（五）表单

    Bootstrap入门(五)表单   先引入本地的CSS文件  <link href="css/bootstrap.min.css" rel="stylesheet ...

  8. 01.Bootstrap入门

    Bootstrap介绍: Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加 ...

  9. Bootstrap入门（二）栅格

    Bootstrap入门(二)栅格 Bootstrap入门(二)栅格 全局CSS样式--栅格 先引入本地的CSS文件(根据自己的文件夹,有不同的引入地址,我是放在一个新建的名为css的文件夹中) con ...

  10. bootstrap 入门

    bootstrap 入门 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&q ...

随机推荐

  1. 初学python - 零碎的知识点

    * 标识符命名规则 数字,字母,下划线组成,数字不能开头区分大小写 * 注释 单行:#:多行:‘ ‘ ‘ ,“”“: * 进制标识 b:二进制 o:八进制 d:十进制x:十六进制 转换:format( ...

  2. I/O(输入/输出)---字节流与字符流

    流: 分为输入流和输出流,输入/输出是相对计算机内存来说的,数据输入到内存是输入流,数据从内存中输出是输出流. 流对象构造的时候会和数据源联系起来. 数据源分为:源数据源和目标数据源.输入流联系的是源 ...

  3. SDUT OJ 数据结构实验之链表八：Farey序列

    数据结构实验之链表八:Farey序列 Time Limit: 10 ms Memory Limit: 600 KiB Submit Statistic Discuss Problem Descript ...

  4. js Array属性和用法

    //构造函数创建数组 var arr1=new Array(); //字面量的方式 var arr2=[]; 1.Array.isArray(对象)---->判断这个对象是不是数组 //判断对象 ...

  5. 【算法笔记】B1027 打印沙漏

    1027 打印沙漏 (20 分) 本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个“*”,要求按下列格式打印 ***** *** * *** ***** 所谓“沙漏形状”,是指每行输出奇 ...

  6. POJ - 2676 暴搜 注意实现细节

    经典sudoku问题 按部就班就好 一定要注意细节 大于1还是大于等于1 r c越界判断 judge时0的特判 blabla居然磨了2个小时 改了很多地方所以实现得有点冗余,反正能A吧 /*H E A ...

  7. 网络安全通信https工作原理

    HTTPS其实是有两部分组成:HTTP + SSL / TLS, 也就是在HTTP上又加了一层处理加密信息的模块.服务端和客户端的信息传输都会通过TLS进行加密,所以传输的数据都是加密后的数据 1. ...

  8. table加载慢

    为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析html时,table是作为一个整体解释的,使用tbody可以优化显示,如果表格很长,用tbody分段,可以一部分一部分地显示, ...

  9. [转] 从零开始学Spring Boot

    [From] http://412887952-qq-com.iteye.com/blog/2291496 一个博主写的spring boot系列文章,很赞!

  10. JAVA 序列化_基础

    JAVA序列化 实现 Serializable 接口的对象,可以序列化为本地文件 简单示例: //序列化类 public class Test implements Serializable { pr ...