BootStrap是一款前段开发的框架技术,简单,灵活的特性。使得成为了当下比较流行的用于搭建Web页面的HTML,CSS,JavaScript的工具集。
要使用BootStrap首先应该下载相关的组件框架,因为BootStrap中的Js插件依赖于JQuery,因此JQuery要在BootStrap之前引用。
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
刚开始学习使用的,可以去
BootStrap的官方网站复制相关的模板,可以确保使用前准备的万无一失。
还用一点要提一下,BootStrap并不支持IE8及更低的版本,所以在使用前请确保浏览器的版本不要太过陈旧,做好及时的更新。
————BootStrap基础部分。
1.标题
元素:<h1>~<h6>大小从低到高
1.1副标题
ex:<h1>主标题<small>副标题</small></h1>
2.段落
ex:<p></p>
2.1段落中的强调内容
ex:<p class="lead">强调内容</p>
3.<div>中强调
ex:<div class="text-muted">文本显示浅灰色</div>
<div class="text-primary">文本显示蓝色</div>
4.文本对齐风格
ex:<p class="text-left">居左<p>
<p class="text-right">居右</p>
<p class="text-justify">两端对齐</p>
5.列表去点
ex:<ul class="list-unstyled"></ul>
以上是我对于BootStrap与不同Html标签的区别的大致总结,肯定有不足。
6.水平表单
在BootStrap框架中要实现水平的效果,必须要满足以下两个条件。
(1)<form>元素是用的类名应该是"form-horizontal"
(2)配合BootStrap框架的网格系统
6.1表单控件(input)
<input type="email" class="form-control" placeholder="enter email">
6.2表单控件(按钮)
在BootStrap框架中的按钮都是采用<button>来实现的
<button class="btn" href="#">确定</button>
6.3表单控件的大小
input-sm:比正常的小
input-lg:比正常的大
<input class="form-control input-sm" type="text">
6.4表单控件(禁用状态)
只需要在相应的标签里添加相关的属性:disabled
<input class="form-control" disabled type="text">
6.5表单控件状态(验证状态)
1.has-warning:警告状态
2.has-error:错误状态
3.has-success:成功状态
<div class="form-group has-error"></div>
6.6图像
BootStrap对于图像的样式风格提供了以下几种
1.img-responsive:响应式图片
2.img-rounded:圆角图片
3.img-circle:圆形图片
4.img-thumbnail:缩略图片
ex:<img class="img-circle" alt="140*140">
7.图标
BootStrap框架为大家提供了近200个不同的icon图片,具体的内容可以去BootStrap官网上去看。在这里不做一一阐述。但务必要注意在使用图标icon之前应先加载相应的CSS。
ex:<span class="glyphicon glyphicon-search"></span>
8.网格系统
网格系统可以说是BootStrap整个框架系统中的核心部分,要使用框架系统必须理解工作原理
1.数据行(row)必须包含在容器(container)中,以便为其赋予合适的对齐方式
2.在行(row)中可以添加列(column),但列数之和不能超过平分的总列数,默认为12.
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8"></div>
</div></div>
BootStrapk框架的网格系统有四种基本的用法。
1.ExtraSmallDevicesPhones(<768px):col-xs-
2.SmallDevicesTablets(>=768px):col-sm-
3.MediumDevicesDesktops(>=992px);col-md-
4.LargeDevicesDesktops(>=1200px):col-lg-