前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >BootStrap框架总结

BootStrap框架总结

作者头像
海仔
发布2019-08-06 11:03:47
3.3K0
发布2019-08-06 11:03:47
举报
文章被收录于专栏:海仔技术驿站

BootStrap框架总结:

概述:

Bootstrap是最受欢迎的HTML,CSS和JS框架,用于开发响应式布局,移动设备优先的WEB项目.

作用:

开发响应式的页面.

"响应式:就是一个网站能够兼容多个终端";

节约开发成本,提高开发效率.

入门:

下载BootStrap

www.bootcss.com官网地址

模板:

1.导入BootStrap的css.

2.导入jquery的js(1.8+)

3.导入BootStrap的js

4.设置视口(支持移动设备)

"<mata name="viewport" content="width=dievice-width,initial-scale=1">"

5.添加一个布局容器

通过div设置一个class

方式1:class="container" 固定宽度

方式2:class="container-fluid" 类似于100%

核心:

全局CSS:

"设置全局CSS样式:基本的HTML元素均可以通过class设置样式并得到增强效果;还有先进的栅格系统."

媒体查询(了解)

:默认有一些分辨率零界点的阀值""

- 分辨率 屏幕大小 - 分辨率>=1200px 超大屏幕 - 992<=分辨率<1200 中等屏幕 - 768<=分辨率<992 小屏幕 - 分辨率<768 超小屏幕

格栅系统:

"在不同分辨率的屏幕下展示不同的效果,根据不同的上网设备,栅格系统将屏幕分层一系列的行(row)和列(column),由行和列来创建页面布局,注意栅格系统必须放在布局容器内使用"

行:

"通过class = "row" 来设置一个行"

列(最多将视口分为12列)

"通过class属性来设置在不同屏幕时所占的列 n表示每格占的份数"

col-lg-n 大屏

col-md-n 中屏

col-sm-n 小屏

col-xs-n 超小屏

响应式工具:

显示:

visible-xs 超小屏可见

visible-sm 小屏可见

visible-md 中等屏幕可见

visible-lg 大屏幕可见

隐藏:

hidden-xs 嘲笑屏时隐藏

hidden-sm 小屏幕时隐藏

hidden-md 中等屏幕时隐藏

hidden-lg 大屏幕时隐藏

标题:

h1 -- h6

对其方式:(文本)

text-left 左对齐

text-center 居中

text-right 右对齐

列表:

list0unstyled : 移除默认的列表样式

list-inline : 将所有列表项放置同一行

表格:

bootstrap给表格添加了默认样式

tble 普通表格

table-striped 条纹表格(IE8不支持)

table-bordered 边框表格

tabl-hover 带有鼠标悬停的表格

table-condensed 紧缩表格

表单:

垂直表单:

内联表单:(将所有内容放在同一行)

水平表单:

按钮:

btn: 为按钮添加基本样式

btn-default : 默认/标准按钮

btn-primary : 原始按钮样式(未必操作)

btn-success : 表示成功的动作

btn-info : 该样式可用于要弹出信息的按钮

图片:

img-rounded 为图片添加圆角(IE8 不支持)

img-circle 将图片变为图形 (IE8 不支持)

img-responsive ; 图片响应式

class="small":表示最小的

list-unstyled:去掉列表中的原点或者方块

list-inline:把列表横着排列

组件:

"无数可复用的组件,包括字体图标,下拉菜单,导航,警告框,弹出框等更多功能"

下拉选:

导航条:

javaScript 插件:

"jQuery 插件为Bootstrap 的组件赋予了"生命".可以简单的一次性引入所有插件,或者逐个引入到你的页面中."

图片轮播

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017年07月21日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档