Bootstrap入门(第一天)
一直都想认真的学习一下Bootstrap,但是由于种种原因,一直没有行动,虽然期间有使用过Bootstrap,但是都没有系统的学习过。最近工作室(学校老师的工作室)安排了一个前端任务让我跟进,主要是根据已有的美工图,用html+css布局出页面,要求使用Bootstrap。正好可以系统的学习一下Bootstrap了,现在开始将学习笔记写成博文。
1、下载Bootstrap
- Bootstrap中文网http://www.bootcss.com/ ,点击进入,点击下图红框中的按钮。
- 进去以后可以看见有三个版本下载,这里只下载第一个用作学习使用。
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入门(第一天)的更多相关文章
- BootStrap入门教程 (一)
BootStrap入门教程 (一) 2011年,twitter的"一小撮"工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端 ...
- Bootstrap入门(三十)JS插件7:警告框
Bootstrap入门(三十)JS插件7:警告框 通过这个插件可以为警告信息添加点击以及消失的功能. 当使用一个.close按钮,它必须是第一个子元素.alert-dismissible,并没有文字内 ...
- Bootstrap入门(二十七)JS插件4:标签页
Bootstrap入门(二十七)JS插件4:标签页 标签页的切换可以带动内容的变化 首先我们引入CSS文件 <link href="bootstrap.min.css" re ...
- Bootstrap入门(十八)组件12:徽章与巨幕
Bootstrap入门(十八)组件12:徽章与巨幕 1.徽章 2.巨幕 1.徽章 给链接.导航等元素嵌套 <span class="badge"> 元素,可以很醒目的展 ...
- Bootstrap入门(十一)组件5:输入框组
Bootstrap入门(十一)组件5:输入框组 1.为其中添加第一个输入框 2.添加额外的元素 3.为用户提供标识 4.改变输入框的尺寸 5.为额外添加多选/单选框 6.与按钮结合 7.与下拉菜单 ...
- Bootstrap入门(九)组件3:按钮组
Bootstrap入门(九)组件3:按钮组 先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) <link h ...
- Bootstrap入门(五)表单
Bootstrap入门(五)表单 先引入本地的CSS文件 <link href="css/bootstrap.min.css" rel="stylesheet ...
- 01.Bootstrap入门
Bootstrap介绍: Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加 ...
- Bootstrap入门(二)栅格
Bootstrap入门(二)栅格 Bootstrap入门(二)栅格 全局CSS样式--栅格 先引入本地的CSS文件(根据自己的文件夹,有不同的引入地址,我是放在一个新建的名为css的文件夹中) con ...
- bootstrap 入门
bootstrap 入门 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&q ...
随机推荐
- 第五篇 Python内置函数
内置函数 abs() delattr() hash() memoryview() set() all() dict() help() min() setattr() any() dir() ...
- shell传参给matlab问题解决办法
之前需要通过shell脚本传参给matlab程序,但是遇到一些问题,现将我遇到的问题分享出来,给遇到同样问题的人一些借鉴. shell部分脚本Execl.sh: /usr/bin/python /ho ...
- JavaBean的概念
Java的一个特性,数据与行为相分离.数据就是成员变量,行为就是setter和getter方法 JavaBean是Java中开发的可以跨平台的重要组件,在JSP中常用来封装业务逻辑和数据库操作.Jav ...
- 【hadoop】 running beyond virtual memory错误原因及解决办法
问题描述: 在hadoop中运行应用,出现了running beyond virtual memory错误.提示如下: Container [pid=28920,containerID=contain ...
- .NET Core 版本不支持的问题
分析一个.NET Core开源项目(Ocelot),打开后发现提示当前版本.NET Core 不支持. 错误信息如下: The current .NET SDK does not support ta ...
- 绿色版NVM安装与配置详细说明
绿色版本(不需要安装,直接解压,然后配置环境变量等) 由于最初发布的nvm并不支持window,所以如果希望可以像在*nix上一样控制node的版本,有两种选择: nvm-windows nodi ...
- FPGA基础学习(3) -- 跨时钟域处理方法
文章主要是基于学习后的总结. 1. 时钟域 假如设计中所有的触发器都使用一个全局网络,比如FPGA的主时钟输入,那么我们说这个设计只有一个时钟域.假如设计有两个输入时钟,如图1所示,一个时钟给接口1使 ...
- nodejs npm包管理常用命令介绍
1.输入 npm config ls -l 可以查看当前的设置 2.针对某一项设置,可以通过下面方式: npm config set 属性名 属性值 eg:npm config set prefix ...
- HDU - 1024 M子段最大和 简单DP
如何确保每个段至少一个数是关键(尤其注意负数情况) #include<iostream> #include<algorithm> #include<cstdio> ...
- [转] Akka实战:构建REST风格的微服务
[From] http://www.yangbajing.me/2015/11/27/akka%E5%AE%9E%E6%88%98%EF%BC%9A%E6%9E%84%E5%BB%BArest%E9% ...