前端开发5分钟学会bootstrap

黑马前端开发视频教程
html5前端开发视频教程下载
零基础web前端开发视频教程下载

Bootstrap 是最受欢迎的 htmlcssjs 框架,用于开发响应式布局、移动设备优先web 项目。

刚开始学这个框架的时候,排版,表单,按钮,表格,栅格,图片…

看了一大堆,可是,真的有必要吗?

Bootstrap有两个作用,
一是 用于给不是专业从事代码的站长快速建站;
二是 用于前端响应式布局,配适各种分辨率的屏幕。

既然如此,作为专业的前端,所有皮肤,间距,大小,样式自己写,只是借用其响应式的栅格系统不是正好。

bootstrap,其实只是记住以下红色字体,就ok了。

[color=#00b0f0]一.基础:

1.表格: .table .table-bordered .table-hover

2.图片: .img-responsive

3.显隐: .visible-md-block .visible-md-inline-block .visible-md-inline .hidden-md

4.栅格: .container .row .col-xs-12 .col-sm-12 .col-md-12 .col-lg-12

5.断点: 786 990 1200 这三个,为响应式变化的节点,用的是min-width 向上兼容。

6.代码:
.code 通过 <code> 标签包裹内联样式的代码片段。

.kbd 通过 <kbd> 标签标记用户通过键盘输入的内容。

多行代码可以使用 <pre> 标签。为了正确的展示代码,注意将尖括号做转义处理。

二.注意:

行(row)必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中。

通过行(row)在水平方向创建一组列(column)。你的内容应当放置于列内,并且,只有列可以作为行的直接子元素。

通过为列设置 padding 属性,从而创建列与列之间的间隔。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为行所包含的列抵消掉了padding。

如果一行中包含了的列大于 12,多余的列所在的元素将被作为一个整体另起一行排列。

使用单一的一组 .col-md-* 栅格类,就可以创建一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一起的(超小屏幕到小屏幕这一范围),
在桌面(中等)屏幕设备上变为水平排列,由浮动变为块级元素。所有列必须放在 .row 内。

三.组件、插件以及定制

组件,插件没什么用,因为都是用自己的,了解一下就可以。

web前端开发案例教程 pdf
web前端开发教程腾讯
前端开发免费视频教程
» 本文来自:前端开发者 » 《前端开发5分钟学会bootstrap》
» 本文链接地址:https://www.rokub.com/6946.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!