简单易上手的Bootstrap
-
什么是Bootstrap？
Bootstrap是一个web框架。Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
如何获取Bootstrap：
从http://v3.bootcss.com/网站下载bootstrap。
将下载的压缩包解压后将下列3哥文件夹拷贝到D盘的的bootsrap-01文件夹下：
注意：Bootstrap是基于jQuery的，所以js文件夹里还要放入一个jQuery文件，下载地址：http://jquery.com/
然后新建一个pages文件夹（用于放编写的html文件），里面新建一个Demo.html文件，，用编辑器打开，写入如下代码：
<!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 Demo</title> <!-- Bootstrap CSS -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap javascript -->
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript"> </script>
<style type="text/css"> .frame {
margin: 0 auto;
width: 1000px;
height: 100%; }
</style>
</head>
<body>
<div class="frame">
<!-- Bootstrap 警告框 -->
<div class="alert alert-success" role="alert">Well done! You successfully read this important alert message.</div>
<div class="alert alert-info" role="alert">Well done! You successfully read this important alert message.</div>
<div class="alert alert-warning" role="alert">Well done! You successfully read this important alert message.</div>
<div class="alert alert-danger" role="alert">Well done! You successfully read this important alert message.</div>
<!-- Bootstrap 进度条 -->
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped"
role="progressbar" aria-valuenow="20" aria-valuemin="0"
aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped"
role="progressbar" aria-valuenow="60" aria-valuemin="0"
aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped"
role="progressbar" aria-valuenow="80" aria-valuemin="0"
aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
<!-- Bootstrap 带情景效果的面板 -->
<div class="panel panel-default">
<div class="panel panel-heading">面板标题1</div>
<div class="panel panel-body">面板内容1</div>
</div>
<div class="panel panel-primary">
<div class="panel panel-heading">面板标题2</div>
<div class="panel panel-body">面板内容2</div>
</div>
<div class="panel panel-info">
<div class="panel panel-heading">面板标题3</div>
<div class="panel panel-body">面板内容3</div>
</div>
<div class="panel panel-danger">
<div class="panel panel-heading">面板标题4</div>
<div class="panel panel-body">面板内容4</div>
</div> <!--Bootstrap 图标-->
<div>
<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
<span class="glyphicon glyphicon-qrcode" aria-hidden="true"></span>
<span class="glyphicon glyphicon-camera" aria-hidden="true"></span>
</div>
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
<!--Bootstrap 巨幕-->
<div class="jumbotron ">
<div class="container">
<div class="page-header">
<h1>Hello Bootstrap !</h1>
</div>
<p>
This is a simple hero unit, a simple jumpbotron-style compoent for
calling extra attention to featured content or information.
</p>
<p>
<a class="btn btn-primary btn-1g" href="javascript:void(0)" role="button">Learn more</a>
</p>
</div>
</div> </div> </body>
</html>执行效果如下：
总结：Bootstrap框架给我的印象就是非常大方、简介、漂亮、易上手，希望小伙伴们好好学，该框架是目前公司里非常流行的一种框架。
简单易上手的Bootstrap的更多相关文章
- velocity 新手用小常识--开源，简单易上手
项目中经常用到的 .vm 后缀文件是什么? 基于 java 的 velocity 模版引擎的一种页面控制文件,是一些类似 html 语句和一种叫 VLT 的语句构成 velocity --美 [v ...
- 手撸一个SpringBoot的Starter，简单易上手
前言:今天介绍一SpringBoot的Starter,并手写一个自己的Starter,在SpringBoot项目中,有各种的Starter提供给开发者使用,Starter则提供各种API,这样使开发S ...
- 来来来，告诉你一个简单易上手的KPI打分的方子
▋1/3 前言 每个企业都要定期为员工的工作来进行考核,有月度考核.季度考核和年度考核. 这次月度考核,我打算用一种新的方式来执行. 我在我们研发小组内曾分享过能力-意愿四象限图.根据岗位技术能力和工 ...
- 一个简单易上手的短信服务Spring Boot Starter
前言 短信服务在用户注册.登录.找回密码等相关操作中,可以让用户使用更加便捷,越来越多的公司都采用短信验证的方式让用户进行操作,从而提高用户的实用性. Spring Boot Starter 由于 S ...
- mapreduce 倒序 排序 最简单 易上手
对于mapreduce倒序只需要建立一个类,然后继承WritableComparator 在重写 Compare函数最后在main里调用一下,就可以实现倒序排序: 代码: public static ...
- 快速上手seajs——简单易用Seajs
快速上手seajs——简单易用Seajs 原文 http://www.cnblogs.com/xjchenhao/p/4021775.html 主题 SeaJS 简易手册 http://yslo ...
- 一个简单且易上手的 Spring boot 后台管理框架-->EL-ADMIN
一个简单且易上手的 Spring boot 后台管理框架 后台源码 前台源码
- PNotify – 简单易用的 JS 通知，消息提示插件
PNotify 是一个 JavaScript 通知插件,前身为 Pines Notify.它旨在提供无与伦比的灵活性,同时很容易使用.它可以提供无阻塞的通知,允许用户无需关闭通知或者提示信息就可以点击 ...
- Echo.js – 简单易用的 JavaScript 图片延迟加载插件
Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...
随机推荐
- 【CSS3】块级元素与行内元素的区别
一.行内元素与块级函数的三个区别 行内元素的特点: 和其他元素都在一行上: 高,行高及外边距和内边距部分可改变: 宽度只与内容有关: 行内元素只能容纳文本或者其他行内元素. 行内元素设置width无效 ...
- VMware workstation批量创建虚拟机和自动化安装操作系统（二）
一. 简述 在上一篇<VMware workstation批量创建虚拟机和自动化安装操作系统(一)>中,主要介绍了VMware workstation自定义创建虚拟机的过程,和一些其他的有 ...
- OVS故障处理一例
OVS下无法访问内部网站 遇到朋友求助的一个客户问题,环境是这样的,客户在自己的iaas平台(不是openstack)上使用ovs,物理交换机上配置vlan和dhcp service,计算节点的ovs ...
- VMware NAT端口映射 外网可以访问内网虚拟机
我想尝试的是利用本机的ip+port来访问虚拟机上的web服务器,因为这样的话,我就能够将我的web服务器部署成为一个能让外网访问的服务器了,首先说下我的环境: 主机:系统win7,ip地址172.1 ...
- Javascript数组(1)--基本属性及方法
数组Array是Javascript语言中非常重要的两种引用类型数据之一,另外一种为对象Object.Array的数据模型可分为两种进行存储:堆栈结构.队列结构. 昨天,确切说是前天了,去和大学同学见 ...
- React Native 系列(二) -- React入门知识
前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...
- vue基础一
一.vue的编写步骤 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 个人php开发之工具--sublime主题配置（二）
摘要:俗话说:工欲善其事,必先利其器.作为一名开发者来说,熟练的使用工具可以达到事半功倍的效果,我就我自己使用的工具说自己的看法.当然,每个人对某个软件都有自己的看法或使用经验,还是那句老话,什么是最 ...
- PAT (Basic Level) Practise （中文） 1023. 组个最小数 (20)
1023. 组个最小数 (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CAO, Peng 给定数字0-9各若干个.你可以以 ...
- DATAGUARD常用管理命令
--DATAGUARD常用管理命令 ----------------------------2014/04/22 备用服务器的管理模式与只读模式 1.1备库启动到管理恢复模式 SQL>shutd ...