PHP学习Bootstrap——关于前台的各种样式设计

  • 时间:2018-09-11 22:03 作者:追寻178529084 来源:追寻178529084 阅读:146
  • 扫一扫,手机访问
摘要:Bootstrap简介:=> Bootstrap是Twitter公司开发的一款前台框架,包含HTML,CSS和JS常奏效果; 官网: http://www.bootcss.com/ 下载: https://v3.bootcss.com/getting-started/#download 目录结构:
PHP学习Bootstrap——关于前台的各种样式设计

Bootstrap

简介:=>

Bootstrap是Twitter公司开发的一款前台框架,包含HTML,CSS和JS常奏效果;

官网:

http://www.bootcss.com/

下载:

https://v3.bootcss.com/getting-started/#download

目录结构:

css:bootstrap.css 和 bootstrap.min.css

fonts:字体文件(glyphicon)

js:bootstrap.js 和 bootstrap.min.js

引入文件:

1.引入jquery.js

2.引入Bootstrap->Bootstrap.css和Bootstrap.js

组件:

按钮:

btn:定义按钮的公共样式

btn-default:默认样式

btn-danger:危险样式

btn-warning:警告样式

btn-success:成功样式

btn-info:提醒按钮

btn-primary:基础按钮

btn-lg:大按钮(lg=large)

btn-sm:小按钮(sm=small)

btn-ss:超小按钮(xs=eXtra Small)

btn-block:块级按钮(默认拉伸到父级元素100%的宽度)

代码演示:=>

Bootstrap

按钮样式


按钮的三种DOM结构

链接按钮

按钮的六种样式

按钮的五种尺寸

---------------------------

图片:

img-round:圆角效果(border-radius:6px;)

img-circle:圆形效果(border-radius:50%;)

img-thumbnail:缩略图

img-responsive:响应式(width:100% height:auto)

代码演示:=>

Bootstrap

图片样式


原始图

圆角效果

圆效果

缩略图

响应式

--------------------------------

文本:

字体颜色:

text-danger:文本危险色

text-success:文本成功色

text-warning:文本警告色

text-info:文本提醒色

text-primary:文本基础色

文本背景色:

bg-danger:文本危险色

bg-success:文本成功色

bg-warning:文本警告色

bg-info:文本提醒色

bg-primary:文本基础色

文本对其方式:

text-left:左对齐

text-right:右对齐

text-center:居中对其

text-justify:两端对其

文本转换:

text-uppercase:字母大写

text-lowercase:字母小写

text-capitalize:首字母大写

代码演示:=>

Bootstrap

文本样式


文本中的五种字体颜色

危险色

成功色

警告色

提醒色

基础色

文本中的五种背景颜色

危险色

成功色

警告色

提醒色

基础色

文本的对齐方式

左对齐

右对齐

居中对齐

两端对齐

文本转换

hello Word

hello Word

hello Word

----------------------------

格栅系统:

col-md-数字:数字范围1-12,md-中等屏幕

屏幕尺寸:

col-xs(xs/sm/md/lg)超小屏幕 手机(<768px);

col-sm(sm/md/lg)小屏幕 pad(>=768px);

col-md(md/lg)中等屏幕 电脑(>=992px)

col-lg大屏幕 大的桌面系统显示器

偏移量:

col-[尺寸]-offset-[数字]

代码演示:=>

05_gird

栅格系统的适使用性


xs(超小屏幕)的适使用性

xs-6

sm(小屏幕)的适使用性

sm-6

md(中等屏幕)的适使用性

md-6

lg(大屏幕)的适使用性

lg-6

--------------------------------

面板(panel):

panel:公共样式

panel-[default|success|info|warning|danger|primary]六种样式;

组成部分:panel-heading panel-title:面板头部

panel-body:面板主体

panel-footer:面板尾部

代码演示:=>

06_panel

面板


基本面板(三部分组成)

面板头部

面板主体

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】WEB前端学习:JS实现中文简体繁体切换(2019-08-22 12:38)
【系统环境|服务器应用】前台开发入门到实战:HTML5语义化元素你真的用的正确吗?(2019-08-22 04:16)
【系统环境|服务器应用】Vue仿微信app页面跳转动画(2019-08-22 04:16)
【系统环境|服务器应用】webstorm使用快捷键快速修正单个文件的style(2019-08-22 04:16)
【系统环境|服务器应用】程序员从学生到阿里经历的5次蜕变:海阔凭鱼跃,天高任鸟飞(2019-08-22 04:16)
【系统环境|服务器应用】var、let、const的区别(2019-08-22 04:16)
【系统环境|服务器应用】mini-ui加载框Indicator 被遮挡问题(2019-08-22 04:15)
【系统环境|服务器应用】【对讲机的那点事】玩对讲机,对于对讲机的亚音你理解吗?(2019-08-22 04:15)
【系统环境|服务器应用】前台中高级面试,内功心法(上)(2019-08-22 04:15)
【系统环境|服务器应用】17、改进轮播图之功能封装(2019-08-22 04:15)
手机二维码手机访问领取大礼包
返回顶部