Bootstrap⼀款超好⽤的前端框架
前⾔
jquery下载文件插件Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，⽤于开发响应式布局、移动设备优先的 WEB 项⽬。Bootstrap在JQuery的基础上进⾏了更为个性化的完善，形成⼀套⾃⼰独有的⽹站风格，并兼
容⼤部分jQuery插件。让前端开发更快速、简单。
基本结构：Bootstrap 提供了⼀个带有⽹格系统、链接样式、背景的基本结构。
oracleappCSS：Bootstrap ⾃带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及⼀个先进的⽹格系统。
组件：Bootstrap 包含了⼗⼏个可重⽤的组件，⽤于创建图像、下拉菜单、导航、警告框、弹出框等等。
JavaScript 插件：Bootstrap包含了⼗⼏个⾃定义的jQuery 插件。可以直接包含所有的插件，也可以逐个包含这些插件。
定制：可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到⾃⼰的版本。
1、Bootstrap 基本模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--让浏览器使⽤最新的IE内核进⾏渲染页⾯-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--设置视⼝宽度等于当前设备宽度，默认缩放⽐为1-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前⾯，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- 导⼊Bootstrap核⼼CSS⽂件 -->学习英语的软件哪个好
<link href="css/bootstrap.css" rel="external nofollow" 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 9]>…… <![endif]- ->这⼀对标签⽤于检测当前浏览器的版本，lt表⽰⼩于，gt表⽰⼤写。所以这句话作⽤是，当浏览器版本低于IE9执⾏。
②html5shiv：解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作⽤的问题。
③respond.min：让不⽀持css3 Media Query的浏览器包括IE6-IE8等其他浏览器⽀持查询。
-->
<!--[if lt IE 9]>
<script src="cdn.bootcss/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="cdn.bootcss/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好！</h1>
<script src="js/jquery-3.1.1.js"></script>
<!-- 导⼊BootStrap的JS插件
①如果不使⽤BootStrap提供的JS插件，则这个JS⽂件⽆需导⼊；
②BootStrap的JS插件功能依赖JQuery，因此这个JS必须在JQuery之后导⼊；
-->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
拷贝并粘贴上⾯的 HTML 代码，这就是⼀个最简单的 Bootstrap 页⾯了。⼀定要注意，Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引⼊。
2、组件
Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建⼀个漂亮、功能完备的⽹站。其中包括以下组件：
下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。
2.1字体图标
bootstrap默认提供了⼆百多个图标。我们可以通过span标签来使⽤这些图标：
<h3>图标</h3>
<span class="glyphicon glyphicon-home"></span>
<span class="glyphicon glyphicon-signal"></span>
<span class="glyphicon glyphicon-cog"></span>
<span class="glyphicon glyphicon-apple"></span>
让我们来看⼀下效果：
2.2按钮
<button></button>标签⽤于创建按钮，bootstrap提供了丰富的按钮样式。按钮除了有默认的⼤⼩外，bootstrap还提供三个参数来调整按钮的⼤⼩，分别是：btn-lg、btn-sm和btn-xs。
<h3>按钮</h3>
<button type="button" class="btn btn-default">按钮</button>
<button type="button" class="btn btn-primary">primary</button>
<button type="button" class="btn btn-success">success</button>
<button type="button" class="btn btn-info">info</button>
<button type="button" class="btn btn-warning">warning</button>
<button type="button" class="btn btn-danger">danger</button>
<h3>按钮尺⼨</h3>
<button type="button" class="btn btn-default">按钮</button>
<button type="button" class="btn btn-primary btn-lg">primary</button>
<button type="button" class="btn btn-success btn-sm">success</button>
<button type="button" class="btn btn-info btn-xs">info</button>
<h3>把图标显⽰在按钮⾥</h3>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-home"></span> ；按钮</button>
效果：
2.3下拉菜单
下拉菜单是最常见的交互之⼀，bootstrap为我们提供了漂亮的样式。
<h3>下拉菜单</h3>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="ext
ernal nofollow" rel="external nofollow" rel="external nofollow" rel="exte <li role="presentation"><a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="exte <li role="presentation"><a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="exte <li role="presentation"><a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="exte </ul>
</div>
看⼀下效果：
2.4输⼊框
通过<input></input>标签去创建输⼊框。
<h3>输⼊框</h3>
<div class="input-group">
<span class="glyphicon glyphicon-user"></span>
<input type="text" placeholder="username">
</div>
<div class="input-group">
<span class="glyphicon glyphicon-lock"></span>
<input type="password" placeholder="password">
</div>
效果图：
2.5导航栏
导航栏作为整个⽹站的指引必不可少。
<h3>导航栏</h3>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow <li><a href="#about" rel="external nofollow" >About</a></li>
<li><a href="#contact" rel="external nofollow" >Contact</a></li>
<li class="dropdown">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofo <ul class="dropdown-menu" role="menu">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external <li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external </ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
效果呢↓
2.6表单
⼈与系统之间数据的传递都需要依靠表单来完成。⽐如注册/登录信息的提交，查询条件的提交等。⽤<form></form>标签来创建表单。
<h3>表单</h3>
<form>
<div class="form-group">
<span class="glyphicon glyphicon-user"></span>
<input type="email" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<span class="glyphicon glyphicon-lock"></span>
<input type="password" id="exampleInputPassword1" placeholder="Password">
</div>
汇编语言call指令有什么作用<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
效果如下：
2.7警告框
警告框是系统向⽤户传达信息和提供指引的重要⼿段。没有针对警告框的标签，通过bootstrap所提供的样式可以瞬间制作出漂亮的警告框。
<h3>警告框</h3>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-success" role="alert">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofo </div>
<div class="alert alert-info" role="alert">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofo </div>
<div class="alert alert-warning" role="alert">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofo </div>
<div class="alert alert-danger" role="alert">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofo </div>
效果图：
2.8进度条
系统的处理过程往往需要⽤户等待，进度条可以让⽤户感知到系统的处理过程，从⽽增加容忍度。
<h3>进度条</h3>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" >
70%
</div>
</div>
3、Bootstrap栅格系统
⾸先，我们先要了解什么是栅格系统！往下看↓
Bootstrap 提供了⼀套响应式、移动设备优先的流式栅格系统，随着屏幕或视⼝（viewport）尺⼨的增加，系统会⾃动分为最多12列。它包含了易于使⽤的预定义类，还有强⼤的mixin⽤于⽣成更具语义
的布局。
栅格系统⽤于通过⼀系列的⾏（row）与列（column）的组合来创建页⾯布局，我们的内容就可以放⼊这些创建好的布局中。下⾯就介绍⼀下 Bootstrap 栅格系统的⼯作原理：
“⾏（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。
栅格系统中的列是通过指定1到12的值来表⽰其跨越的范围。例如，三个等宽的列可以使⽤三个 .col-xs-4 来创建。
如果⼀“⾏（row）”中包含了的“列（column）”⼤于 12，多余的“列（column）”所在的元素将被作为⼀个整体另起⼀⾏排列。
栅格类适⽤于与屏幕宽度⼤于或等于分界点⼤⼩的设备，并且针对⼩屏幕设备覆盖栅格类。因此，在元素上应⽤任何 .col-md-*栅格类适⽤于与屏幕宽度⼤于或等于分界点⼤⼩的设备，并且针对⼩屏幕
设备覆盖栅格类。因此，在元素上应⽤任何 .col-lg-*不存在，也影响⼤屏幕设备。
3.1媒体查询
在栅格系统中，我们在 Less ⽂件中使⽤以下媒体查询（media query）来创建关键的分界点阈值。
/* 超⼩屏幕（⼿机，⼩于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（ Bootstrap 是移动设备优先） */
/* ⼩屏幕（平板，⼤于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌⾯显⽰器，⼤于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* ⼤屏幕（⼤桌⾯显⽰器，⼤于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
3.2栅格参数
java数据库sql语句
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
makefile编译命令输⼊上⾯的代码就可以实现上图的样式，是不是已经对栅格系统有所了解了，我们继续往下看↓
3.3响应式列重置
即便有给出的栅格class，你也不免会碰到⼀些问题，例如，在某些阈值时，某些列可能会出现⽐别的列⾼的情况。为了克服这⼀问题，建议联合使⽤ .clearfix 和响应式⼯具类。
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
除了列在分界点清除响应，您可能需要重置偏移, 后推或前拉某个列。
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>
<h2 ><span style 3.4列偏移
使⽤ .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使⽤ * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽
度。
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
3.5嵌套列
为了使⽤内置的栅格系统将内容再次嵌套，可以通过添加⼀个新的 .row 元素和⼀系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的⾏（row）所包含的列（column）的个数不能超过12（其
实，没有要求你必须占满12列）。
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
3.6列排序
通过使⽤ .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
总结
以上所述是⼩编给⼤家介绍的Bootstrap⼀款超好⽤的前端框架，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论