bootstrap使用说明

作者: 麦壳儿UIandFE2 | 来源:发表于2017-01-09 23:17 被阅读399次

简称:bs.集html、css、js框架于一身,功能更强更全。也就是说结构按照基准模板搭建,类名不要随意删改,对应的js交互控制自然都有了。后台人员较为喜欢使用,因为几乎不用书写css样式,自带的就基本让你满意。前端人建议工作中不要过于依赖,否则呵呵了。

框架的分类:

html、css、js

应用

1 移动端开发;(pc端也可以使用,支持不太好)

2 响应式布局;

依赖

jQuery;
这么一个功能强大完善的代码库,几乎不会选择从原始js层级开发,代码量可想而知,就像我们要做一盘菜就没必要还要掌握菜和配料等是怎么种出来的,只需要到菜市场买回来直接进行就ok了。所以它选择了在jQuery的基础上进行框架的搭建。

其他相关介绍:

  • 下载

1、用于生产环境的 Bootstrap

2、Bootstrap 源码

第一个是常规开发,大部分人会选择这个下载,下载后把里边不需要的文件删除,免得影响开发时多余文件干扰。只保留如下即可:

bootstrap/
├── css/
│ 
│   ├── bootstrap<span class="hljs-class">.min</span><span class="hljs-class">.css</span>
│   ├── 
│   └── bootstrap-theme<span class="hljs-class">.min</span><span class="hljs-class">.css</span><span class="hljs-comment">//是自带的一些主题皮肤</span>
├── js/
│   ├── 
│   └── bootstrap<span class="hljs-class">.min</span><span class="hljs-class">.js</span>
└── fonts<span class="hljs-comment">///和iconfont使用类似</span>
    ├── glyphicons-halflings-regular<span class="hljs-class">.eot</span>
    ├── glyphicons-halflings-regular<span class="hljs-class">.svg</span>
    ├── glyphicons-halflings-regular<span class="hljs-class">.ttf</span>
    └── glyphicons-halflings-regular.woff
`</pre>

第二个是用于少数人想进行二次开发的,这个都是开源的嘛,你想帮忙随时欢迎的。
  • 版本选择上

    官网提供3个版本。

  1. Bootstrap2中文文档--用于兼容比较老的浏览器,或是公司里的老项目使用。
  2. Bootstrap3中文文档--稳定的最新版
  3. Bootstrap 4.0 预览--待测试的最新版,不建议使用
  • 文件引入方式
    本地引入肯定是最稳当的了,但是bs官网提供了CSDN加速服务,也就是你引用线上的速度依然很快,理解秒加载吧,这种加速会优先选择离你最近的节点(服务器)去拿资源。

    ps:CSDN加速服务;把文件放在各处的服务器上,访问时会优先加载离你最近的服务器。不够专业,自行Google。呵呵;所以网站要是想加速处理压缩代码图片还可以采用csdn加速的方式哟。

  • 官网其他资源

    这里还提供了其他的技术的API使用说明,相关文档等。

  1. Less 教程

  2. jQuery API

  3. 网站实例

  4. 收录的牛逼框架---基本都是托管在github上的开源项目;bs都提供免费的 CDN 服务(收录了 2722 个开源项目)

    拿去,不谢!
    http://www.bootcdn.cn/

  • bs相关资源

    在百度谷歌里搜索bootstrap关键字能出现千万条的资源,可见其成熟度,丰富度,其实就是公认的强大,你值得拥有。

    介绍摘要

    接下来从以下几个方面进行:

  • html----bs的基本结构

  • css----bs的样式部分

  • 布局组件----bs的js

  • 插件----bs的扩展功能

    也就是官网上对应的:
    起步、
    全局CSS样式、
    组件、
    JavaScript 插件

    HTML:最基本的bs骨架

    <pre>`<span class="hljs-doctype"><!DOCTYPE html></span>
    <span class="hljs-tag"><<span class="hljs-title">html</span> <span class="hljs-attribute">lang</span>=<span class="hljs-value">"zh-CN"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"X-UA-Compatible"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"IE=edge"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"viewport"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"width=device-width, initial-scale=1"</span>></span>
    <span class="hljs-comment"></span>
    <span class="hljs-tag"><<span class="hljs-title">title</span>></span>麦壳<span class="hljs-tag"></<span class="hljs-title">title</span>></span>

    <span class="hljs-comment"><!-- Bootstrap --></span>
    <span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"css/bootstrap.min.css"</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span>></span>
    

    <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">body</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">h1</span>></span>你好,世界!<span class="hljs-tag"></<span class="hljs-title">h1</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"js/jquery-3.1.1.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"js/bootstrap.min.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
    

    <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">html</span>></span>
    `</pre>

    这里对官网的做了略微的删改;要对上边解释两点:

    1.这句代码的意思是运行在IE浏览器上时优先用最高模式进行解析渲染,而不会出现跳转到怪异模式下运行而产生的视觉误差。

    <pre><meta <span class="hljs-variable">http-equiv=</span><span class="hljs-string">"X-UA-Compatible"</span> <span class="hljs-variable">content=</span><span class="hljs-string">"IE=edge"</span>></pre>

    2.这句代码的意思是约束视口的,bs是主打移动端的肯定要对视口进行处理下,当然PC端没有这个概念,你要是用在pc端,这句话毫无影响的。体现了Bootstrap 是移动设备优先的

    <pre><meta <span class="hljs-variable">name=</span><span class="hljs-string">"viewport"</span> <span class="hljs-variable">content=</span><span class="hljs-string">"width=device-width, initial-scale=1"</span>></pre>

    深入了解 Bootstrap html结构的关键部分,会让 web 开发变得如鱼得水

    CSS

    设置全局 CSS 样式; HTML 元素通过加对应的class 得到增强效果;配合栅格系统会有响应式的布局。你马上可以无敌了。

    先越过较难的bs的栅格系统,从简单常用实用的几处bs组件讲起。

1. 表格

  • 最基本的表格
    <table class="table">
  • 条纹表格--隔行变色
    <table class="table table-striped">
  • 带边框的表格
    <table class="table table-bordered">
  • 鼠标悬停
    通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
    <table class="table table-hover">

通过给相应类名得到对应的默认样式(少量的内补(padding)和水平方向的分隔线),一般都不太难看,不符合你的设计,可以单独起个类名进行层叠掉。;这么多类名要想用好用的溜必须记点,知道大概,当然都还是有些规律的,一般有基础类,角色属性加上这两个外出基本样式就出来了,然后加对应的样式类,颜色显隐一些小细节加辅助类;查找官方文档就ok了,编译器里安装bs代码提示插件,这样就不要老去查阅了,浪费时间。

表格有关的状态类

.active 表示给表格添加一个灰色的背景颜色

.success 成功 浅绿色背景

.Info 信息 浅蓝色背景

.warning 警告 浅黄色背景

.danger 危险 浅红色背景

2. 表单

所有设置了 .form-control 类的 表单元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和表单元素包裹在 .form-group 中可以获得最好的排列。
ps:表单元素:<input>、<textarea> 和 <select>

<form role="form">
 <div class="form-group">
 <label for="userEmail">请输入邮箱地址</label>
 <input type="email" class="form-control"id="userEmail" >
 </div>
</form>

注意必须给form 加属性:role="form";表单块写在form-group里;每个表单元素加上.form-control表单控制类,这样就会使用bs自动去- 推算的样式。

在表单身上加一些类名得到相应样式表单:

.form-inline 内联表单(让表单中的元素变成行内块 inline-block)

.form-block表单中默认的类型是块级元素

.form-horizontal 需要配合栅格系统进行使用。

.checkbox 复选框

.radio单选框

.checkbox-inline /

.radio-inline 复选框 / 单选框一行排列

表单有关的状态类、辅助类--颜色、显隐

.has-success 文本和边框颜色变成绿色

.has-warning 深黄色

.has-error 深红色

.sr-only 隐藏

3. 按钮

基类:btn

按钮有关的辅助类--颜色、显隐

.btn-default 透明背景,灰色边框

.btn-primary 蓝色背景

.btn-success

.btn-info

.btn-warning

.btn-danger

.btn-link 只是外观和a标签很相似而已,但是不具备链接跳转的功能

按钮尺寸类

.btn-lg

.btn-sm

.btn-xs (xiao small)

.btn-block 块级按钮(移动端常用的通栏按钮)

.disabled 禁用

例子:

<button type="button" class="btn btn-primary btn-lg">Large button</button>

4. 图片

bs对图片的做个两方面的接口处理,1是响应式即按设备大小缩放图片;2是图片的样式即圆角,边框等。另外还有为开发者提供了占位图,开发初期你完全可以用这种方式先占位。挺好的功能。

响应式图片类

.img-responsive

图片样式类

.img-rounded -- -圆角

.img-circle -----border-radius 50%

.img-thumbnail --边框

.center-block ---水平居中

占位图:

地址之后写上你要占位的大小 宽和高之间用x区分

5. 文本相关----排版

排版:

.text-left 水平左对齐

.text-center 水平居中对齐

.text-right 水平右对齐

.text-justify 自动换行,两端对齐(系统默认)

.text-nowrap 不换行

大小写:

.text-lowercase 小写

.text-uppercase 大写

.text-capitalize 单词首字母大写

列表处理:

.list-inline 列表行内块显示

.list-unstyled 清除默认样式

文本有关的辅助类--颜色、显隐

text-muted 淡灰色

.text-primary

.text-success

.text-info

.text-warning

.text-danger

6. bs辅助类:基本大家都能用

背景

.bg-primary

.bg-success

.bg-info

.bg-warning

.bg-danger

快速浮动(慎用)

.pull-left

.pull-right

.clearfix 清除浮动

.sr-only 隐藏(一般和输入框配合)
.text-hide 隐藏文本
.close 关闭按钮
.caret 箭头(朝下)
.center-block 居中
.show 显示
.hidden 隐藏

栅格系统

栅格:就是把页面划分为不同的行和列;是bs里的特色菜系。用来做响应式处理或是单端布局都是不错的选择,内部自带一些内外边距的算法,所以使用后基本复原你的设计稿;另外网页布局主要是考虑宽度上的适配,所以重点掌握行布局的使用即.row。

最基本的栅格系统布局:

```
<div class="container-fluid">
    <div class="row">
一行内最多能排布12列,多了就滑落到下一行
    </div>
</div>
```

还是拿一个具体的案例讲解下:
假设你要在pc端(大众屏即尺寸在1200px以上)进行布局;一行里里有三个盒子;那么代码如下:

```
  <div class="container">
    <div class="row">
        <div class="col-lg-4">box1</div>
        <div class="col-lg-4">box2</div>
        <div class="col-lg-4">box3</div>
    </div>
  </div>
```

但是要想在pad端显示2个盒子,那么在盒子上再加入对应尺寸类,Bootstrap 的栅格系统检测到当前设大大于768px时则会按照你给的col-smx进行布局。
代码如下:
<div class="container"> <div class="row"> <div class="col-lg-4 col-sm-6">box1</div> <div class="col-lg-4 col-sm-6">box2</div> <div class="col-lg-4 col-sm-6">box3</div> </div> </div>
但是最后一个盒子肯定是要掉下来,根据你个需求是隐藏还是滑落显示。隐藏的话,bs在辅助类里也有对应的类名,加上即可。毕竟网页内容从pc-pad-移动端会删减掉不必要的内容和装饰。

 ```
 <div class="container">
  <div class="row">
    <div class="col-lg-4 col-sm-6 col-xs-12">box1</div>
    <div class="col-lg-4 col-sm-6 col-xs-12">box2</div>
    <div class="col-lg-4 col-sm-6 col-xs-12">box3</div>
  </div>
</div>
```

通过下上边可以看出Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。也清楚bs里的响应式是如何实现的了。其实底层也是使用媒体查询。如下:

/ 超小屏幕(手机,小于 768px
/ 没有任何媒体查询,因为这是默认的(还记得 Bootstrap 是移动设备优先的吗?)

/ 小屏幕(平板,大于等于 768px
@media (min-width: @screen-sm-min) { ... }

/ 中等屏幕(桌面显示器,大于等于 992px
@media (min-width: @screen-md-min) { ... }

/ 大屏幕(大桌面显示器,大于等于 1200px
@media (min-width: @screen-lg-min) { ... }

列嵌套

每一列的子列都会遵循12列布局原则,和父级的列规则无关,
如果要嵌套使用栅格,只需要在列(column)内直接续接行(row),然后再继续接列(column) ,不再需要container

列偏移

1.col-md-offset-* 列偏移的位置
栅格系统的宽度md-XX + offset-XX 如果超过12 会换行显示

列排序

.col-md-push-XX 列偏移的位置(向右) 推
.col-md-pull-XX 列偏移的位置(向左) 拉
注意:每一个偏移的列都是独立存在的,相互之间是不受影响的,同级元素之间不用遵循12列布局的原则,只能左右排序。会有堆叠

关于bs整个框架就说完了,具体实践后续附赠源码一份。

----------------------------------------------------喜欢就动动小手哈。------------------------------------------------------

--------------------------------------你的支持是洒家-麦壳-macrolam前进的动力--------------------------------------

相关文章

网友评论

    本文标题:bootstrap使用说明

    本文链接:https://www.haomeiwen.com/subject/vqtkbttx.html