一直都想认真的学习一下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. ZooKeeper的部署和测试

    一背景 zookeeper是一个开源的分布式应用程序协调服务,是Apache Hadoop 的一个子项目.它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护.名字服务.分布式同步.组服 ...

  2. JavaScript学习笔记——4.数组

    数组(Array) 数组也是一个对象   数组中保存的内容我们称为元素 数组的操作 - 创建数组 - var arr = new Array();   - var arr = []; 例如:var m ...

  3. struts2的主要工作流程

    struts2的框架结构图 struts2的主要工作流程: 1.客户端请求一个HttpServletRequest的请求,如在浏览器中输入http://localhost: 8080/bookcode ...

  4. [SCOI2007]最大土地面积(旋转卡壳)

    首先,最大四边形的四个点一定在凸包上 所以先求凸包 有个结论,若是随机数据,凸包包括的点大约是\(\log_2n\)个 然鹅,此题绝对不会这么轻松,若\(O(n^4)\)枚举,只有50分 所以还是要想 ...

  5. bash: ./AdobeAIRInstaller.bin: No such file or directory

    # chmod a+x AdobeAIRInstaller.bin # ./AdobeAIRInstaller.binbash: ./AdobeAIRInstaller.bin: No such fi ...

  6. SDUT OJ 顺序表应用2:多余元素删除之建表算法

    顺序表应用2:多余元素删除之建表算法 Time Limit: 3 ms Memory Limit: 600 KiB Submit Statistic Discuss Problem Descripti ...

  7. abp框架angular 项目docker 手动部署到Linux环境中

    1.https://aspnetboilerplate.com/Templates 2.后端项目发布,在publish中abp默认已经存在DockerFile文件 3.修改后端文件中的DockerFi ...

  8. 215 Kth Largest Element in an Array 快排

    题目:在无序的数组中找到第k大的元素,也就是若长度为n的数组从小到大排列时,下标为n-k的元素. 注意Example2:第4大的元素是4,也就是数组中出现的两个5分别是第2大和第3大的数字. 解法一: ...

  9. 112th LeetCode Weekly Contest Validate Stack Sequences

    Given two sequences pushed and popped with distinct values, return true if and only if this could ha ...

  10. Oracle中对XMLType的简单操作(extract、extractvalue)

    前几天一直在做Oracle对XMLType字段的操作,我还不是Oracle大拿,到网上找了很多资料,但是很多就是单一功能的介绍,不能很好的解决问题,现在在这里总结下. 1.下面先创建一个名未test. ...