bootstrap样式

简介: bootstrap样式

一、目前比较主流的前端框架有:

1.layui

2.vue.js

3.bootstrap

4.jquery ui

二、bootstrap:

1.来自Twitter,目前最流行的前端框架之一

2.是基于HTML、CSS和JavaScript的一个简洁、灵活的开源框架。

3.目前版本是V3

三、bootstrap的优势:

1.快速制作响应式的网页来适配各种终端

2.开发简单、方便

3.移动先行

4.代码开源

5.代码有良好的规范

四、使用bootstrap的步骤:

1.在head里面写:

2.在title下面引入css文件:


3.在上面引入js文件,注意顺序,先引入jquery的js,在引入bootstrap的js。


五、bootstrap架构:

1.响应式设计

2.CSS组件

3.JavaScript插件

4.基础布局组件

5.12栅格系统

6.jQuery1.10+

六、12栅格系统:

1.概念:就把网页的总宽度分为12等分。

2.实现原理:

(1)通过定义容器的大小,平分为12份。

(2)调整内外边距

(3)结合媒体查询

七、列组合:

1.语法:



6等分


6等分




八、列偏移:

1.语法:

向右偏移2等分


九、列嵌套:

语法:



6等分




十、列排序:

语法:

9等分


3等分


十一、响应式栅格:

1.小屏幕(手机):<768px (xs)

2.小屏幕(平板):>=768px (sm)

3.中屏幕(桌面显示器):>=992px (md)

4.大屏幕(大桌面显示器):>=1200px (lg)

eg:既要支持小屏幕,也需要支持大屏幕:


十二、CSS全局样式:

1.标题样式:

.h1~.h6

2.页面主体:

默认页面中的字体都是12px,如果要突出显示字体的话需要加class样式lead

3.突出字体:

突出

4.强调文本:

左对齐:text-left

右对齐:text-right

居中:text-center

两端对齐:text-justify

5.列表:

class=“list-inline”

6.表单:

语法:


姓名:



7.控件大小:

(1).大型输入框:

(2).小型输入框:

8.按钮:

1.灰色:btn btn-default

2.深蓝色:btn btn-primary

3.绿色:btn btn-success

4.天蓝色:btn btn-info

5.黄色:btn btn-warning

6.红色:btn btn-danger

7.链接:btn btn-link

9.按钮大小:

(1)大型:btn-lg

(2)小型:btn-sm

(3)超小型:btn-sx

10.图片:

(1)响应式:img-responsive

(2)圆角:img-rounded

(3)圆形:img-circle

(4)圆角边框:img-thumbnails

目录
相关文章
|
13天前
|
前端开发
【Bootstrap】<前端框架>Bootstrap常用样式 - 排版
【1月更文挑战第17天】【Bootstrap】<前端框架>Bootstrap常用样式 - 排版
|
6月前
|
前端开发 程序员 Android开发
Bootstrap+jQuery实现卡片标签样式的分页
Bootstrap+jQuery实现卡片标签样式的分页
40 0
|
7月前
|
前端开发
|
7月前
|
前端开发
|
8月前
|
前端开发 JavaScript 数据安全/隐私保护
Bootstrap 表单样式-水平排列
Bootstrap 表单样式-水平排列
46 0
|
13天前
|
前端开发
bootstrap样式代码案例
bootstrap样式代码案例
12 0
|
13天前
|
前端开发
uni-app中基于bootstrap的css样式
uni-app中基于bootstrap的css样式
40 0
|
7月前
|
前端开发
|
13天前
|
前端开发 JavaScript 容器
BootStrap 组件和样式
BootStrap 组件和样式
42 0

热门文章

最新文章