Bootstrap的简介及使用
一、Bootstrap简介
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、javascript 的，它简洁灵活，使得 Web 开发更加快捷。它用于开发响应式布局、移动设备优先的 WEB 项目。
1.1 响应式页面
所谓响应式页面，也称为自适应的页面。众所周知，电脑、平板、手机的屏幕是差距很大的，假如在电脑上写好了一个页面，在电脑上看起来不错，但是如果放到手机上的话，那可能就会乱的一塌糊涂；另外不同分辨率的电脑在观看同一个网页的时候也可能会呈现出不同的效果。上述这两种情况利用响应式页面解决再好不过了。
1.2 CSS3的@media媒体查询
使用 @media媒体查询，我们可以针对不同的屏幕大小定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果我们需要设置设计响应式的页面，@media 是非常有用的。 当我们在重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，这对调试来说是一个极大的便利
大家看下面这段代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<style>
.c1{
background-color: yellow;
height:50px;
}
@media (min-width: 500px) {
.c2{
background-color: #2b84da;
height:60px;
}
}
</style>
<body>
<div class="c1 c2"></div>
<script src="jquery-1.12.4.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
首先需要注意我们在使用bootstrap时需要先引入它的css样式以及js文件，当然，bootstrap是基于jQuery做的，我们还得引入jquery。
另外，大家可以看到：我们定义的div有c1与c2两个类，而style文件中：
@media (min-width: 500px) {
.c2{
background-color: #2b84da;
height:60px;
}
这段代码的含义是：当页面的宽度不小于500px时采用c2类，大家可以看一下效果：
也就是说：我们可以利用@media调整css样式达到不同屏幕大小下内容的灵活呈现。这就是响应式页面的灵活之处！
二、Bootstrap的使用
2.1 bootstrap的引入
首先，我们需要到官网将bootstrap下载下来，将文件解压后可以看到里面有三个文件夹：
第一个是bootstrap的css样式，第二个是bootstrap的图标文件；第三个是bootstrap的js文件。如果不考虑手机端的使用，我们在页面中只要引入css样式、jQuery以及js即可，当然还有一些很必要的引入大家可以参考下面代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--以最高的IE浏览器渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口的设置 移动设备优先 支持移动端 在多个设备上适应 PC iPhone 安卓-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap的css 必须引入bootstrap-->
<!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9 ]> 要是在IE9以下的浏览器用的话得把下面这段代码打开
<!--<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>-->
<!--<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>-->
<!--<![endif]–>-->
</head>
<body>
<!--这个span标签是在官网搞的 注意必须要有fonts图标文件夹-->
<span class="glyphicon glyphicon-signal" aria-hidden="true"></span>
<!--注意！！！-->
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src='jquery-1.12.4.js'></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
2.2 bootstrap的布局容器以及栅格系统
2.2.1 布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
（1）.container 类用于固定宽度并支持响应式布局的容器。
<div class="container"> ... </div>
（2）.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid"> ... </div>
2.2.2 栅格系统
栅格系统的鼻祖是 https://960.gs/。
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列，也就是默认12栅格系统。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，我们的内容就可以放入这些创建好的布局中。
官网上栅格系统的工作原理是这样的：
下面是栅格的参数：
使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。
下面是一个栅格系统的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<body>
<!--固定宽度容器 .container -->
<div class="container">
<h1>栅格系统</h1>
<!--一行-->
<div class="row">
<div class="col-md-6">
<!--所有的列必须包含在行里面-->
<div class="col-md-4">栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。
</div>
<div class="col-md-4">栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。
</div>
<div class="col-md-4">栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。
</div>
</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
栅格系统
效果如下：
大家可以看到，当我改变屏幕的大小的时候，段落的内容会灵活根据屏幕的缩放变化。
2.3 bootstrap的常见应用：
其实从应用角度来讲，bootstrap是深受广大后台开发者喜爱的，因为很多组件我们可以直接Ctrl-C & Ctrl-V，哈哈！很多东西官方都已经写好了，专业的前端开发攻城狮会选择vue。
这里为后台开发者的入门选手总结一下bootstrap常用的“全局CSS样式”、“组件”以及“js插件”的使用，具体的使用以及参数设置大家去官网查看，要是详细些的话本文也是得Ctrl-C & Ctrl-V了，哈哈！
2.3.1 全局CSS样式
全局CSS样式常用的有：标题、对齐、改变大小写、表格、按钮、表单。
2.3.2 组件
bootstrap常用到的组件有：图标、导航、面板、下拉菜单、分页、徽章、警告框、进度条、页头、巨幕。
2.3.3 js插件
js插件这里常用的有模态框、滚动监听以及轮播图。这里需要说明一下：轮播图给的效果不是很理想，当然我们可以利用jQuery自己实现；另外，官网中没有给滚动监听的示例，这里把滚动监听的代码以及效果发一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">luffy</a>
</div>
<div class="collapse navbar-collapse bs-js-navbar-scrollspy">
<ul class="nav navbar-nav">
<li>
<a href="#ios">iOS</a>
</li>
<li>
<a href="#svn">SVN</a>
</li>
<li class="dropdown">
<a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1">
<li>
<a href="#jmeter" tabindex="-1">jmeter</a>
</li>
<li>
<a href="#ejb" tabindex="-1">ejb</a>
</li>
<li class="divider"></li>
<li>
<a href="#spring" tabindex="-1">spring</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height:200px;overflow:auto; position: relative;">
<h4 id="ios">iOS</h4>
<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。
</p>
<h4 id="svn">SVN</h4>
<p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。
</p>
<h4 id="jmeter">jMeter</h4>
<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。
</p>
<h4 id="ejb">EJB</h4>
<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
</p>
<h4 id="spring">Spring</h4>
<p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。
</p>
<p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。
</p>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
滚动监听
效果如下：
Bootstrap的简介及使用的更多相关文章
- 1.bootstrap基础简介
一·基础简介 1.Bootstrap,来自 Twitter,是一个用于快速开发 Web 应用程序和网站的前端框架,是目前最受欢迎的前端框架. Bootstrap 是基于 HTML.CSS.JavaSc ...
- Bootstrap 3 简介
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first pr ...
- Bootstrap教程简介
Bootstrap,来自Twitter,是目前最受欢迎的前端框架. Bootstrap是基于HTML. CSS. JAVASCRIPT的,它简洁灵活,使得Web开发更加便捷. 为什么要使用Bootst ...
- Bootstrap框架简介
Bootstrap是Twitter公司(www. twitter.com)开发的一个基于HTML , CSS , JavaScript的技术框架,符合HTML和 CSS规范,且代码简洁.视觉优美.该框 ...
- 《深入理解bootstrap》读书笔记：第一章 入门准备
一.bootstrap框架简介 Bootstrap是最流行的前端开发框架. 什么是框架:开发过程的半成品. bootstrap具有以下重要特性: (1)完整的CSS样式插件 (2)丰富的预定义样式表 ...
- 表格组件神器：bootstrap table详细使用指南
1.bootstrap-table简介 1.1.bootstrap table简介及特征: Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单 ...
- 新的表格展示利器 Bootstrap Table
1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...
- 新的表格展示利器 Bootstrap Table Ⅰ
1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...
- bootstrap实战教程
bootstrap实战教程 bootstrap介绍 简介 Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.全球数以百万计的网站都是 ...
随机推荐
- servlet创建项目过程中，servlet内容重写的两种搭建，tomcat的配置，class的存放位置，web.xml的搭建等注意事项与易错点
运行一个servlet项目:需要做这些前提工作: 1.配置tomcat,在server选项卡的设置也就基本的设置,HTTP port与JMX port等端口号:基本都是默认的.这里需要注意的是,有的教 ...
- 统计cpu相关信息
我的cpu为i3310m 适用类型:笔记本 CPU系列:酷睿i3 3代系列 CPU主频:2.4GHz 三级缓存:3MB 插槽类型:FCBGA1023,FCPGA988 封装大小:37.5×37.5mm ...
- How_Require_Extensions_Work
Why Doing require extensions correctly is essential, because: Users should be able to install multip ...
- hasura graphql-engine集成pgbouncer 连接池工具
pgbouncer 是一个轻量的pg 连接池工具,我们可以和hasura graphql-engine集成起来,进行连接的一些优化 环境准备 docker-compose 文件 version: '3 ...
- 用Python免费发短信，实现程序实时报警
进入正文 今天跟大家分享的主题是利用python库twilio来免费发送短信. 先放一张成品图: 代码放在了本文最后的地址中 正文 眼尖的小伙伴已经发现了上面的短信的前缀显示这个短信来自于一个叫Twi ...
- LoadRunner参数化&关联
我们用 HTTP 协议做脚本,要注意的是,不同协议的函数是不一样的,假如换 websocket 协议,关联函数就要用其他的 参数化 原理 1.什么叫参数化 把脚本内一个写死的值,去一个数组内取值,进行 ...
- MEMS 硅麦资料收集
MEMS 硅麦资料收集 PCM 和 I2S 协议的 MEMS Microphone PCM 协议在蓝牙方面比较多,一般都有 PCM 的接口. MEMS Microphone 更加的省电,更方便用于语音 ...
- Oracle存储过程和自定义函数笔记
学习地址:https://www.imooc.com/learn/370 存储过程和存储函数定义:指存储在数据库中供所有用户程序调用的子程序叫做存储过程 .存储函数. 相同点:完成特定功能的程序.区别 ...
- 5分钟搭建 nginx +php --------------(LNMP)新手专用
5分钟搭建 nginx +php --------------(LNMP)新手专用 2014-11-14 16:48 88876人阅读 评论(2) 收藏 举报 版权声明:本文为博主原创文章,未经博主允 ...
- ubuntu 17.10.1 安装 virtual box 增强工具
ubuntu 17.10.1 安装 virtual box 增强工具遇到 “ Please install the gcc make perl packages from your distribu ...