值得分享的最全面Bootstrap快速人门案例

前端之家收集整理的这篇文章主要介绍了值得分享的最全面Bootstrap快速人门案例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

今天,我给小白们分享一下比较流行的Bootstrap框架,它在工作中得到许多公司的青睐,因此对于升职和加薪很重要。同时,我们可以快速完成开发任务,减少发开周期,有不对的地方望大家指正。

如果你想走的更远,那么请勤劳一点,多看看代码,多多练习代码,如果你仔细研究代码,自己也可以写出一部分的css比较好的插件

一、Bootstrap简介

详见官网:

1.练习准备资源准备:

下载bootstrap资源:

http:www.bootstrap.com

新建项目:bootstrap/code

在code下复制下载的dist目录下的所有文件,并且在js文件夹中引入jquery的js文件,如:jquery-1.11.3.min.js最后新建文件bt.html

2.快速开发实现:

注意在开发过程中如果修改css效果一定要在引入bootsrtap中的css文件,再重新添加类,本次开发案例原网站如下:

3.相关概念

3.1栅格系统

网页栅格从平面栅格系统中发展而来,它以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。栅格系统使得网页开发更加灵活与规范。

Bootstrap采用12栅格系统,把网页的总宽度平分为12份,开发人员可以自由按份组合。

3.2结构:

实现栅格,需要借助固定的结构---布局容器+行+列

3.2.1布局容器(.container 、.container-fluid)1)固定布局

.container

固定宽度并支持响应式(1170px、970px、750px)这里可以使用媒体查询@media

2)流式布局

.container-fluid

100%宽度,占据全部视口的容器

3.2.2行(.row)

有了容器布局我们才可以使用栅格系统,需要再写一个div.row来作为列的父级元素

3.2.3列(.col-md-*)

这里的*可以取值2-12

1)列偏移:

在一般情况下列是默认从做到右对齐的,在实际开发中,我们不需要左边对齐

.col-mod-* .col-md-offset-12-* 可以通过后面的整个类来实现。

2)列嵌套

和表格相比:在表格中,可以在td中再嵌套table

这里嵌套时,不需要再加.container,只需要加.row 再加.col-md-*即可

3)列排序

改变左右浮动,col-md-push-* 和 col-md-pull-* 注意push 和pull之和为12;

4.删除网格系统

通过下表可以详细查看bootstrap的栅格系统在各大屏幕设备的工作

二、全局CSS样式

5.列表

有序列表

无序列表

自定义列表

6.按钮

1)预定义样式

.btn-default .btn-primary .btn-success .btn-info .btn-warnint .btn-danger

Button .btn .btn-default

2)尺寸.btn-lg .btn-sm .btn-xs3)块级按钮.btn-block7.表单(1).垂直排列表单

在表单中,通常是 提示信息 和 表单元素 共同构成一组。

在bs中,提供.form-group 用来表示组的。

针对具体的那一个表单元素,可以使用.form-control(包括input、select、textarea)

效果如下:

PS:关于这个父元素,带有.form-group的元素,并不是必须是div。是块状元素就可以,比如li。

(2).水平排列

在form上,添加.form-horizontal,然后结合栅格系统。(此处,不需要使用.row,直接使用栅格列即可)

(3).内联表单

表单都放在一行

借助.form-inline

为form元素添加.form-inline

效果如下:

(4).文本域

Textarea,也是通过.form-control来控制的,宽度就不要再设置cols了。

但是他的高度 还是要使用rows来设置

效果如下:

(5).单选和多选

单选和多选,结构需要做变化,如下:

效果如下:

在默认情况下,它是垂直排列的。

在大多数场景下,需要水平排列的。

需要使用.radio-inline,如下:

也可以使用手册上的结构:

关于checkbox和radio,总是有一点对不齐,所有浏览器都有这么一个毛病。

Bs封装的这个用法,解决这样的问题。

(6).辅助文本

在文本框的下方有一些提示信息,其实就是辅助文本。

只需要添加一个span.help-block

效果如下:

1.表格

基本样式

.table,应用在table标签上

条纹状表格

.table-striped

带边框的表格

.table-bordered

鼠标悬停

.table-hover

紧缩表格

.table-condensed

主要是指 每一行的行高,变得更小一点

状态类

.active .success .info .warning .danger 应用在tr/td上

2.辅助类

l背景颜色

l三角符号

箭头

直接使用 .caret类,如下:

Ps:通常要结合 button 来使用,表示下拉菜单。

l关闭按钮

X.

效果如下:

l快速浮动

.pull-left和.pull-right

l清除浮动

.clearfix

l块状居中

.center-block

l显示和隐藏

直接使用 .hidden 和 .show即可。

3.响应式工具

前面用来响应式栅格。

在响应式设计中,还有如下的一个需求:

在大屏幕下,所有的信息都会显示。

但是在小屏幕小,有针对性的隐藏某些信息。

针对这个需求,bs提供了一个响应式的工具,可以设置根据不同的屏幕,可以隐藏或显示 指定的内容。

上述代码,当页面缩小到 小于 992px以下,都会隐藏侧栏。

二.组件

1.well

例如,新浪微博的发布框

2.页头

.page-header来显示,如bootstrap的官网:

3.巨幕

很多网站,都有一个类似baner的地方,显示一些比较重要的信息。尤其是国外的网站,非常的常见,各种教程的网站。

比如bootstrap的官网:

使用如下:

结果如下:

4.label和badge

label,就是标签

典型的应用场景:

使用如下:

badge,就是徽章

典型场景,如微博的未读消息,邮箱、微信、qq等消息

通常需要结合其他元素来使用

效果如下:

5.警告框

通常是在后台操作的时候,会用到。

主要是在某个操作完成之后,进行的一种提示,删除成功,更新失败等。

基类

.alert

修饰类

.alert-success .alert-info .alert-warning .alert-danger

可关闭的警告框

添加.alert-dismissible

在内部添加一个关闭按钮 button,并且使用data-dismisss=“alert”启动关闭功能

警告框中的超链接

使用.alert-link

显示效果如下:

6.分页

用到的是列表,ul

基本使用,只需要给ul添加.pagination

当前页,可以加.active

如果要禁用某一页,需要加上 .disabled

使用如下:

当面默认的是中等大小,还可以更改分页的大小。

尺寸

.pagination-lg .pagination-sm

7.路径导航

路径导航,又称为面包屑导航。

在大多数网站中,都会有的一个结构。给用户一个明确的指示,还知道自己在哪儿,不至于迷路了。

典型的应用:

列表结构,在ol或者ul上添加 .breadcrumb

8.进度条

相对来说,出现的少一些。

典型应用场景 ---- 文件上传(图片)

基本使用

进度条,通常是由父元素和子元素共同构成的,

.progress(父) + .progress-bar(子)

进度条的颜色

.progress-bar-success .progress-bar-info .progress-bar-warning .progress-bar-danger

条纹效果

.progress-bar-striped

动画效果

.active

效果如下:

9.按钮组

前面,我们已经会单个的按钮,在web开发中,经常需要将按钮使用组的形式来呈现。

只需要将button放在 一个容器(如div)中,给容器加一个 .btn-group

也可以更改按钮组的尺寸,

.btn-group-lg .btn-group-sm .btn-group-xs

三、返回顶部的按钮效果实现

注意引入字体文件css

代码如下:

四、代码分享

bt.html

<div class="jb51code">
<pre class="brush:xhtml;">
<!DOCTYPE html>
<html lang="en">

<Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width,initial-scale = 1"> Bootstrap<a href="https://www.jb51.cc/tag/zhongwen/" target="_blank" class="keywords">中文</a>网 .jumbotron{ position: relative; padding: 40px 0; color: #fff; text-align: center; text-shadow: 0 1px 3px rgba(0,.4),0 0 30px rgba(0,.075); background: #020031; background: -moz-linear-gradient(45deg,#020031 0,#6d3353 100%); background: -webkit-gradient(linear,left bottom,right top,color-stop(0%,#020031),color-stop(100%,#6d3353)); background: -webkit-linear-gradient(45deg,#6d3353 100%); background: -o-linear-gradient(45deg,#6d3353 100%); background: -ms-linear-gradient(45deg,#6d3353 100%); background: linear-gradient(45deg,#6d3353 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#020031',endColorstr='#6d3353',GradientType=1); -webkit-Box-shadow: inset 0 3px 7px rgba(0,.2),inset 0 -3px 7px rgba(0,.2); -moz-Box-shadow: inset 0 3px 7px rgba(0,.2); Box-shadow: inset 0 3px 7px rgba(0,.2); } .jumbotron a{ color:rgba(255,255,.5) -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; transition:all .2s ease-in-out; } .jumbotron a:hover{ color:#fff; } .jumbotron a.btn{ color:#fff; } .thumbnail{height:330px;} .footer{ padding:30px 0; border-top:1px solid #e5e5e5; margin-top: 70px; } .footer a{color:#777;} .footer .about>div h4{ color:#563d7c; font-size: 16px; } #scrollUp{ background-color:#777; font-size: 40px; line-height: 1; text-align:center; text-decoration:none; position:fixed; right:20px; bottom:20px; overflow:hidden; width: 46px; height: 46px; border:none; opacity:.8; display:none; } .fa-angle-up:before{ content:"\f106"; }
Bootstrap相关优质项目推荐

这些项目或者是对Bootstrap进行了有益的补充,或者是基于Bootstrap开发的

Bootstrap编码规范
by @mdo

Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。

jQuery API
中文手册

根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册

Bootstrap编码规范
by @mdo

Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。

w3schools
原版国内镜像

w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!

Bootstrap编码规范
by @mdo

Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。

jQuery API
中文手册

根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册

Bootstrap编码规范
by @mdo

Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。

w3schools
原版国内镜像

w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!

Bootstrap编码规范
by @mdo

Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。

jQuery API
中文手册

根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册

Bootstrap编码规范
by @mdo

Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。

w3schools
原版国内镜像

w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!

Bootstrap编码规范
by @mdo

Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。

jQuery API
中文手册

根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册

Bootstrap编码规范
by @mdo

Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。

w3schools
原版国内镜像

w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!

Bootstrap编码规范
by @mdo

Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。

jQuery API
中文手册

根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册

Bootstrap编码规范
by @mdo

Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。

w3schools
原版国内镜像

w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!

Bootstrap编码规范
by @mdo

Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。

jQuery API
中文手册

根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册

Bootstrap编码规范
by @mdo

Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。

w3schools
原版国内镜像

w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!

Bootstrap编码规范
by @mdo

Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。

jQuery API
中文手册

根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册

Bootstrap编码规范
by @mdo

Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。

w3schools
原版国内镜像

w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!

Bootstrap编码规范
by @mdo

Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。

jQuery API
中文手册

根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册

Bootstrap编码规范
by @mdo

Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。

w3schools
原版国内镜像

w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!

Bootstrap编码规范
by @mdo

Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。

jQuery API
中文手册

根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册

Bootstrap编码规范
by @mdo

Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。

w3schools
原版国内镜像

w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!

Bootstrap编码规范
by @mdo

Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。

jQuery API
中文手册

根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册

Bootstrap编码规范
by @mdo

Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。

w3schools
原版国内镜像

w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!

Bootstrap编码规范
by @mdo

Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。

jQuery API
中文手册

根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册

Bootstrap编码规范
by @mdo

Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。

w3schools
原版国内镜像

w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/bootstrap/43578.html
Bootstrap入门教程Bootstrap快速人门Bootstrap快速人门案例

猜你在找的Bootstrap相关文章