BootStrap初始
序言
什么是Bootstrap
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。
它是为实现快速开发Web应用程序而设计的一套前端工具包。
它支持响应式布局,并且在V3版本之后坚持移动设备优先。
Bootstrap的历史
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 年八月在 GitHub 上发布的开源产品。
为什么要用Bootstrap
- 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。
- 浏览器支持:所有的主流浏览器都支持 Bootstrap。
- 容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。
- 响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。
- 它为开发人员创建接口提供了一个简洁统一的解决方案。
- 它包含了功能强大的内置组件,易于定制。
- 它还提供了基于 Web 的定制。
- 它是开源的。
在Bootstrap出现之前:
命名:重复、复杂、无意义(想个名字费劲)
样式:重复、冗余、不规范、不和谐
页面:错乱、不规范、不和谐
在使用Bootstrap之后: 各种命名都统一并且规范化。 页面风格统一,画面和谐。
Bootstrap 包的内容
- 起步(基本结构):Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
- 全局CSS样式:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
- 组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
- JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
- 定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
- 网站实例:提供大量的精美网站设计供程序员参考
下载及引用操作
下载地址:
我们使用V3版本的Bootstrap,我们下载的是用于生产环境的Bootstrap。
1 进入网站首页后点击起步
2 进入页面后 点击下载(用于生产环境的Bootstrap)
下载完毕后解压到当前文件夹
点击第一个
出现下面的文件夹
上面的文件夹在编写程序的时候主要用到以下的几个文件:
css文件夹中
js文件夹中
引入Bootstrap文件
直接把整个下载好的Bootstrap文件夹复制到相应的文件里即可
在具体的HTML文件中上图的位置引入Bootstrap文件
处理依赖
由于Bootstrap的某些组件依赖于jQuery,所以请确保下载对应版本的jQuery文件,来保证Bootstrap相关组件运行正常。
Bootstrap基本模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"> //字符编码
<meta http-equiv="X-UA-Compatible" content="IE=edge"> //涉及到IE浏览器 建议使用EDEE
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap Template</title> <!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE ]>
<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>
<h1>你好,世界!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
js内容书写位置
css部分讲解
一 页面设置
需要页面设置为 HTML5 文档类型
二 移动设备自适应标签
为了确保适当的绘制和触屏缩放,需要在 <head>
之中添加 viewport 元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1">
在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no
可以禁用其缩放(zooming)功能。这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉。注意,这种方式我们并不推荐所有网站使用,还是要看你自己的情况而定!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
三 container(容器)示例
.container
类用于固定宽度并支持响应式布局的容器。在浏览器的左右俩边都会留有一定的间距

效果如下:
.container-fluid
类用于 100% 宽度,占据全部视口(viewport)的容器。会铺满整个浏览器
效果如下:
四 栅格系统
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中
“行(row)”必须包含在
.container
(固定宽度)或 .container-fluid
(100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
- 通过“行(row)”在水平方向创建一组“列(column)”。
- 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
- 类似
.row
和.col-xs-4
这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。 - 通过为“列(column)”设置
padding
属性,从而创建列与列之间的间隔(gutter)。通过为.row
元素设置负值margin
从而抵消掉为.container
元素设置的padding
,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding
。 - 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
- 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个
.col-xs-4
来创建。 - 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
- 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何
.col-md-*
栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何.col-lg-*
不存在, 也影响大屏幕设备。
栅格系统格式:
<body>
<div class="container-fluid/container">
<div class="row" style="background-color: red"> 所有的行必须包含在container-fluid/container当中
<div class="col-md-1" style="border: 1px solid black"></div> 每一行可以包含多个列 最多包含12列(即示例中最多有12个div)
如果超出12列就会另外再起一行超出几列下一行就有几列
<div class="col-md-1" style="border: 1px solid black"></div> 列的格式:class="col-xs-2/col-sm-1/col-md-3/col-lg-2"
</div>
<div class="row" style="background-color: red">
<div class="col-md-6" style="border: 1px solid black"></div> 一行中列的宽度控制:型号后的数字的范围1~12
<div class="col-md-6" style="border: 1px solid black"></div>
</div> <div class="row" style="background-color: red">
<div class="col-md-8" style="border: 1px solid black"></div>
<div class="col-md-4" style="border: 1px solid black"></div>
</div> //响应式列的自适应宽度
<div class="row" style="background-color: green">
<div class="col-xs-8 col-md-12" style="border: 1px solid black"></div>
//当列的宽度小于一定范围的时候会自动变成col-xs-8的格式 当列的宽度大于一定的范围的时候会自动变成col-md-12的格式
<div class="col-xs-4 col-md-12" style="border: 1px solid black"></div>
//同上
</div>
</div>
</body>
列的示例及详解
<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, maximum-scale=1, user-scalable=no">
<title>列示例</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container"> 首先所有的内容必须包含在container中
<div class="row" style="background-color: hotpink"> //设置一行
<div class="col-md-6" style="background-color: red"> //设置一行中的一列宽度为6 <div class="col-md-1" style="background-color: green"></div> //在上列中嵌套多列
<div class="col-md-1" style="background-color: green"></div>
<div class="col-md-1" style="background-color: green"></div>
<div class="col-md-1" style="background-color: green"></div>
</div>
</div>
</div>
</body>
</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, maximum-scale=1, user-scalable=no">
<title>-CSS媒体查询示例</title>
<style>
.c1 {
background-color: red;
} @media screen and (max-width: 600px){
.c1 {
background-color: green;
}
}
</style>
</head>
<body> <div class="c1" style="height: 400px;width: 400px"></div>
</body>
</html>
参数详情:
/* 超小屏幕(手机,小于 768px) */
/* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) */ /* 小屏幕(平板,大于等于 768px) */
@media (min-width: @screen-sm-min) { ... } /* 中等屏幕(桌面显示器,大于等于 992px) */
@media (min-width: @screen-md-min) { ... } /* 大屏幕(大桌面显示器,大于等于 1200px) */
@media (min-width: @screen-lg-min) { ... }
我们偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内。
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
列的偏移及排序
<div class="container">
<div class="row">
<div class="col-md-3 col-md-offset-3" style="background-color: red"></div>
.col-md-offset-3
将.col-md-4
元素向右侧偏移了3个列(column)的宽度
</div> <!--列排序-->
以文档的左边为基准push是推pull是拉 向右移动用push向左移动用pull
<div class="row">
<div class="col-md-9 col-md-push-3">本来应该在左边.col-md- .col-md-push-</div> 向右推4列
<div class="col-md-3 col-md-pull-9">本来应该在右边.col-md- .col-md-pull-</div> 向左拉3列
</div>
</div>
Bootstrap全局样式
排版、按钮、表格、表单、图片等我们常用的HTML元素,Bootstrap中都提供了全局样式。
我们只要在基本的HTML元素上通过设置class就能够应用上Bootstrap的样式,从而使我们的页面更美观和谐。
排版
标题相关
<h1>一级标题36px</h1>
<h2>二级标题30px</h2>
<h3>三级标题24px</h3>
<h4>四级标题18px</h4>
<h5>五级标题14px</h5>
<h6>六级标题12px</h6>
<!--除了使用h标签,Bootstrap内置了相应的全局样式-->
<!--内联标签应用标题样式-->
<span class="h1">一级标题36px</span>
<span class="h2">二级标题30px</span>
<span class="h3">三级标题24px</span>
<span class="h4">四级标题18px</span>
<span class="h5">五级标题14px</span>
<span class="h6">六级标题12px</span>
副标题
<!--一级标题中嵌入小标题-->
<h1>一级标题<small>小标题</small></h1>
文本对齐
<!--文本对齐-->
<p class="text-left">文本左对齐</p>
<p class="text-center">文本居中</p>
<p class="text-right">文本右对齐</p>
文本大小写
<!--大小写-->
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
表格
Class | 描述 |
.table-striped | 条纹状表格 |
.table-bordered | 带边框的表格 |
.table-hover | 鼠标悬停变色的表格 |
.table-condensed | 紧缩型表格 |
.table-responsive | 响应式表格 |
状态类
Class | 描述 |
---|---|
.active |
鼠标悬停在行或单元格上时所设置的颜色 |
.success |
标识成功或积极的动作 |
.info |
标识普通的提示信息或动作 |
.warning |
标识警告或需要用户注意 |
.danger |
标识危险或潜在的带来负面影响的动作 |
表单
内联表单
表单状态
带图标的表单
按钮
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
按钮样式
<!-- Standard button -->
<button type="button" class="btn btn-default">(默认样式)Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">(首选项)Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">(成功)Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">(一般信息)Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">(警告)Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">(危险)Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">(链接)Link</button>
按钮大小
<p>
<button type="button" class="btn btn-primary btn-lg">(大按钮)Large button</button>
<button type="button" class="btn btn-default btn-lg">(大按钮)Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">(默认尺寸)Default button</button>
<button type="button" class="btn btn-default">(默认尺寸)Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">(小按钮)Small button</button>
<button type="button" class="btn btn-default btn-sm">(小按钮)Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button>
<button type="button" class="btn btn-default btn-xs">(超小尺寸)Extra small button</button>
</p>
图片
<img src="..." class="img-responsive" alt="Responsive image">
图片形状
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
辅助类
文本颜色
p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
背景颜色
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
关闭按钮
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
下拉三角
<span class="caret"></span>
快速浮动
<div class="pull-left">...</div>
<div class="pull-right">...</div>
内容块居中
<div class="center-block">...</div>
清除浮动
<!-- Usage as a class -->
<div class="clearfix">...</div>
显示与隐藏
<div class="show">...</div>
<div class="hidden">...</div>
BootStrap初始的更多相关文章
- 初始Bootstrap
使用示例 ①下载Bootstrap框架 网址:http://v3.bootcss.com/getting-started/#download ②解压得到三个文件 ③将文件添加进项目后,在页面中 ...
- 旺财速啃H5框架之Bootstrap(一)
接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...
- JS组件系列——Bootstrap文件上传组件:bootstrap fileinput
前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...
- 翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑
Part 3: 设计逻辑层:核心开发 如前所述,我们的解决方案如下所示: 下面我们讨论整个应用的结构,根据应用中不同组件的逻辑相关性,分离到不同的层中,层与层之间的通讯通过或者不通过限制.分层属于架构 ...
- 模拟Bootstrap响应式网格系统
Bootstrap响应式(适应于不同的终端设备).Bootstrap栅格系统是利用百分比把视口等分为12个,然后利用媒体查询,设置float属性使之并列显示 一.媒体查询 媒体查询包含一个可选的媒体类 ...
- JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)
前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...
- 初学者--bootstrap(一)----在路上(1)
bootstrap: 是目前最受欢迎的前端框架,并基于HTML.CSS.JavaScript 等,而且他是为了适应并兼容各个电子设备,是对媒体查询的封装. 1.什么是媒体查询 他 是响应式布局的方 ...
- 【读书笔记《Bootstrap 实战》】6.单页营销网站
我们已经掌握了很多实用 Bootstrap 的重要技能.现在,是时候拿出更多的创意来帮助客户实现他们全方位在线营销的愿望了.此次将带领大家做一个漂亮的单页高端营销网站. 主要任务如下: □ 一个大型 ...
- 【读书笔记《Bootstrap 实战》】2.作品展示站点
假设我们已经想好了要给自己的作品弄一个在线站点.一如既往,时间紧迫.我们需要快一点,但作品展示效果又必须专业.当然,站点还得是响应式的,能够在各种设备上正常浏览,因为这是我们向目标客户推销时的卖点.这 ...
随机推荐
- 如何将极客时间课程制作成kindle电子书
订阅了几个极客时间的专栏,一直没有时间去看. 最近,想着如果把内容制作成电子书,利用上下班时间学习一下,岂不是很方便? 在网上搜到一个很好用的开源软件,几分钟就可以把极客时间的专栏做成电子书,简直太棒 ...
- MySQL查询不使用索引汇总 + 如何优化sql语句
不使用索引原文 : http://itlab.idcquan.com/linux/MYSQL/918330.html MySQL查询不使用索引汇总 众所周知,增加索引是提高查询速度的有效途径,但是很多 ...
- DevExpress破解和消除弹出框问题
在解决方案管理器列表中找到 license.licx 设置属性 将[生成操作]选项改为[无]
- C#编程经验-选择结构和循环结构
选择结构:if elseif else ifswitch 循环结构:whiledo whilefor()foreach() 种类太多,不便记忆,人脑要记多种结构,要用的时候一种也把握不住所以,为方便记 ...
- [UE4]Menu Anchor,菜单锚点
一.想要弹出某个菜单的时候,Menu Anchor可以做为菜单弹出的位置. 二.Menu Anchor本身不显示任何东西 三.Menu Class:选择要弹出的UI,可以是任意的UserWidget ...
- mysql中间件kingshard
这样写是OK的: select * from bind_history limit 10;select id, passport_id, person_id, create_time, cast(is ...
- Github 大牛封装 Python 代码,实现自动发送邮件只需三行代码
*注意:全文代码可左右滑动观看 在运维开发中,使用 Python 发送邮件是一个非常常见的应用场景.今天一起来探讨一下,GitHub 的大牛门是如何使用 Python 封装发送邮件代码的. 一般发邮件 ...
- [Oracle,2018-02-07] Oracle 报错:“ORA-02292:违反完整约束条件(XXX.FKXXX)
报错的原因很清楚,就是你要删除的记录是另外某条记录的外键,解决办法: 1.删除子记录,在删除本记录: 2.暂时禁用此外键(适合在测试后清除所有记录的情况,记得最后要恢复此外键) 解决办法有了,现在最主 ...
- uva-10400-搜索
题意:题意很简单,就是输入数字,对数字进行加减乘除,然后能不能得到最后的数字. wa了很多次,memcpy(dst,src,sizeof(dst))才对,最后一个参数写错,最后一个参数是要拷贝的字节数 ...
- python学习笔记_week27
search import time import random def cal_time(func): def wrapper(*args, **kwargs): t1 = time.time() ...