关键词:
## BootStrap
1、概念:一个前端开发的框架:Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。
* 框架:一个半成品软件,开发人员可以在框架基础上,再进行开发,简化编码
* 好处:
1、定义了很多CSS样式和JS插件。我们开发人员可以直接使用这些样式和插件得到丰富的页面效果。
2、响应式布局
* 同一套页面可以兼容不同分辨率的设备。
2、快速入门
1、下载bootstrap
2、在项目中将这三个文件夹复制进去
3、创建html页面,引入必要的资源文件(一般的话引入含min的文件,因为是压缩般的,加载速度快;没有min的适合源码阅读)
基本模板:
<!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>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>你好,世界!</h1> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) --> <script src="js/jquery-3.2.1.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="js/bootstrap.min.js"></script> </body> </html>
3、响应式布局
* 同一套页面可以兼容不同分辨率的设备。
* 实现:依赖于栅格系统:将一行平均分为12个格子,可以指定元素占几个格子。
* 步骤:
1、定义容器。相当于之前的table
* 容器的分类:
1、container:两边留白
2、container-fluid:100% 每一种设备都是100%宽度
2、定义行。相当于之前的tr 样式:row
3、定义元素。指定该元素在不同的设备上,所占的格子数目。 样式:col-设备代号-格子数目
* 设备代号:
1、xs:超小屏幕 手机(<768px):col-xs-12
2、sm:小屏幕 平板(>=768px)
3、md:中等屏幕 桌面显示器(>=992px)
4、lg:大屏幕 大桌面显示器(>=1200px)
* 注意:
1、一行中,如果格子数目超过12,超出部分自动换行
2、栅格类属性可以向上兼容。栅格类适用于屏幕宽度大于或等于分界点大小的设备
3、如果设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素占满一整行
4、CSS样式和JS插件
全局CSS样式:
* 按钮:class="btn btn-primary" 控制按钮样式
* 图片:class="img-responsive img-circle" 图片在任意尺寸都占100% 后面一个是调整图片形状(有三种)
* 表格:class="table table-bordered table-hover"
* 表单:给表单项添加:class="form-control"
组件:
* 导航条:
<nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
* 分页条:
<nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav>
插件:
* 轮播图:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
5、综合案例
<!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 --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) --> <script src="js/jquery-3.2.1.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="js/bootstrap.min.js"></script> <style> .paddtop { padding-top: 12px; } .search-input { float: left; border: 2px solid #ffc900; width: 400px; height: 35px; padding-left: 5px; margin-top: 15px; } .sersearch-btn { float: left; border: 2px solid #ffc900; width: 90px; height: 35px; background-color: #ffc900; text-align: center; line-height: 35px; /*垂直居中*/ margin-top: 15px; } .jx { border-bottom: 2px solid #ffc900; padding: 5px; } .company { height: 40px; background-color: #ffc900; text-align: center; line-height: 40px; font-size: 12px查看详情从 Bootstrap 3 迁移到 Bootstrap 4? [关闭]
】从Bootstrap3迁移到Bootstrap4?[关闭]【英文标题】:MigratetoBootstrap4fromBootstrap3?[closed]【发布时间】:2017-02-0818:37:06【问题描述】:我在我的项目中使用bootstrap3。我看到Bootstrap4是对几乎整个Bootstrap项目的重大改写。但是有没有必要... 查看详情
Bootstrap 4 到 Bootstrap 5 迁移,容器问题
】Bootstrap4到Bootstrap5迁移,容器问题【英文标题】:Bootstrap4toBootstrap5migration,containerissue【发布时间】:2021-09-0300:57:58【问题描述】:希望从Bootstrap4迁移到Bootstrap5。容器最大宽度在默认设置下似乎不同。知道为什么以及应该更改... 查看详情
bootstrap基本使用
参考技术ABootstrap是当前流行的前端框架。下面,我们来看看Bootstrap的基本使用吧。01Bootstrap中文网在浏览器中输入【Bootstrap中文网】,然后点击相关的链接,如下图所示:02Bootstrap中文文档然后会进入相关的页面,点击【Bootstrap... 查看详情
bootstrap-flex、bootstrap-grid 和 bootstrap-reboot 的区别
】bootstrap-flex、bootstrap-grid和bootstrap-reboot的区别【英文标题】:Differencesbetweenbootstrap-flex,bootstrap-gridandbootstrap-reboot【发布时间】:2017-04-1104:05:36【问题描述】:在最新版本的Bootstrap中(提问时的当前版本是bootstrap@4.0.0-alpha.5)有3... 查看详情
bootstrap学习——bootstrap入门
...的WEB项目,点击导入,选择文件系统,然后下一步,选择BootStrap文件目录路径,如下:完成后,WEB项目下的css、img、js就出现相应文件,说明导入成功。然后导入较新版本的JQuery库,目录结构如下:至此环境搭建完成。3、BootStrap... 查看详情
bootstrap入门
bootstrap在后台管理系统中使用较多,先前所做的几个项目也是使用的Bootstrap框架。只是并未系统学习过Bootstrap,最近工作没有那么忙了,于是计划系统地学习一下。先简单分享一下Bootstrap表格。 使用Bootstrap... 查看详情
bootstrap
一、什么是bootstrap?bootstrap是目前很受欢迎的前端框架,用于构建响应式、移动设备优先的网站。Bootstrap是基于HTML、CSS、javascript开发的,它简洁灵活,使得Web开发更加快捷,是一个css/html框架,Bootstrap提供了优雅的HTML和CSS规范... 查看详情
bootstrap学习
一、Bootstrap的介绍凡是使用过Bootstrap的开发者,都不在乎做这么两件事情:复制and粘贴。哈哈~,是的使用Bootstrap非常简单,但是在复制粘贴之前,需要先对Bootstrap的用法一一熟悉之后我们才开始干活!Bootstrap,来自Twitter,... 查看详情
bootstrap插件
Bootstrap插件概览站点引用Bootstrap插件的方式有两种:单独引用:使用Bootstrap的个别的*.js文件。一些插件和CSS组件依赖于其他插件。如果您单独引用插件,请先确保弄清这些插件之间的依赖关系。编译(同时)引用:使用bootstrap.j... 查看详情
bootstrap环境安装
Bootstrap安装是非常容易的。本章将讲解如何下载并安装Bootstrap,讨论Bootstrap文件结构,并通过一个实例演示它的用法。下载Bootstrap您可以从http://getbootstrap.com/上下载Bootstrap的最新版本。当您点击这个链接时,您将看到如下所示的... 查看详情
bootstrap模板
一、bootstrap基本介绍 1、什么是bootstrap? bootstrap就是个前端快速开发的工具,该工具是个简单、直观、强悍的前端开发框架,让web开发更加迅速简单 2、bootstrap安装方法 不同的应用场景安装方式不同,请大... 查看详情
html引入bootstrap
Bootstrap的引用方法分为两种:1)将Bootstrap下载到本地引用 2)在线引用Bootstrap引用方法1)将Bootstrap下载到桌面然后解压缩(当然你可以将解压缩的Bootstrap文件放到任意位置,但是解压缩的Bootstrap文件必须和HTML在同一目录下... 查看详情
第一章bootstrap基础
1什么是Bootstrap由Twitter的设计师MarkOtto和JacobThornton合作开发,是一个CSS/HTML框架简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。2Bootstrap版本BootStrap2BootStrap3BootStrap43Bootstrap下载用于生产环境的BootstrapBootstrapLess源码Boots... 查看详情
bootstrap.css 和 bootstrap-theme.css 有啥区别?
】bootstrap.css和bootstrap-theme.css有啥区别?【英文标题】:Whatisthedifferencebetweenbootstrap.cssandbootstrap-theme.css?bootstrap.css和bootstrap-theme.css有什么区别?【发布时间】:2015-02-0814:24:49【问题描述】:我们下载bootstrap时在bootstrap文件中找到... 查看详情
bootstrap使用模板
Bootstrap下载地址:-https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip-https://github.com/twbs/bootstrap/releases/download/v4.0.0-alpha.2/bootstrap-4.0.0-alpha.2-dist.zipBo 查看详情
同时使用 Bootstrap 3 和 Bootstrap 4
】同时使用Bootstrap3和Bootstrap4【英文标题】:UseBootstrap3andBootstrap4simultaneously【发布时间】:2021-08-0713:33:56【问题描述】:我有一个仍然使用Bootstrap3的单页Web应用程序,这在某些方面变得相当烦人。所以我想切换到Bootstrap4,而不... 查看详情
Bootstrap 4轮播不适用于AngularJS UI-Bootstrap
】Bootstrap4轮播不适用于AngularJSUI-Bootstrap【英文标题】:Bootstrap4carouselnotworkingwithAngularJSUI-Bootstrap【发布时间】:2019-02-2408:00:24【问题描述】:我正在尝试在我的bootstrap4网站中使用基于角度的轮播。当我使用bootstrap3(bootstrap.min.css)... 查看详情