开发者社区> program_黑> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

BootStrap样式

简介: Bootstrap简介 来自Twitter,是目前最流行的前端框架 是基于HTML、CSS、Javascript的一个简洁、灵活的开源框架,便于开发人员随时上手 目前版本V3 Bootstrap受欢迎的原因 快速制作响应式的网页来适配各种终端 开发简...
+关注继续查看

Bootstrap简介

来自Twitter,是目前最流行的前端框架

是基于HTML、CSS、Javascript的一个简洁、灵活的开源框架,便于开发人员随时上手

目前版本V3

Bootstrap受欢迎的原因

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

开发简单、方便

移动先行

代码开源

代码有良好的规范

Bootstrap的使用场景

响应式页面

移动端页面

后台页面

带有交互效果的页面

浏览器对Bootstrap的支持

img_db14e6b4477121d47b65e750f14e3586.jpe
Bootstrap的支持

支持Internet Explorer 8-11

新手入门

开发环境(webstorm)

引入Bootstrap框架文件

压缩处理文件bootstrap.min.css,bootstrap.min.js

使用Bootstrap中文网提供的免费CDN加速服务

基本模板特色

V3.x和V2.x版本相对,有一个很大亮点

img_6612d8ccf0002f146b67668072c6b9ea.jpe
基本模板特色

Bootstrap从V3版本开始全面支持移动平台,并贯穿移动先行的宗旨

Bootstrap架构

img_5220bfc4ddd124441cf8fc981f5c4a91.jpe
Bootstrap架构

栅格系统

栅格系统是通过一系列的行与列的组合来创建页面的布局,设置的内容就可以放在这些创建好的布局中

实现原理:

通过定义容器的大小,平分为12份

调整内外边距

结合媒体查询

栅格系统工作原理

一行数据必须包含在.contrainer中,以便为其赋予合适的对齐方式和内边距

使用行在水平方面创建一组列

具体内容放在列内,列可以作为行的直接元素

内置的一大堆样式,可以使用col-xs-4(占4行宽度)的样式来快速创建栅格

通过设置padding从而创建列之间的间隔,让后面第一列和最后一列设置赋值margin来抵消掉padding的影响

栅格系统中指定1到12的值来标识其跨越的范围

浏览器可视区域:

img_fe25ea266d6e80834a46cea63e7973ca.jpe
浏览器可视区域

栅格系统的使用

列组合

列偏移

列嵌套

列排序

列组合:

img_5b27a08af6e34098518dc950be8e5196.jpe
列组合

列偏移

img_65ea292483bf3f871efb943a1519efa7.jpe
列偏移

列嵌套

img_e978fbf1777089ab28f626d52833c802.jpe
列嵌套

列排序

img_07b8ac4035e59c225ba4f204bc3b2f64.jpe
列排序

响应式栅格

img_3a6fef4e06032985cd5e9e11715d2963.jpe
响应式栅格

CSS全局样式

又称为CSS布局

是Bootstrap三大核心内容的基础,即基础的布局语法

包括

基础排版(Typography)

表单(Forms)

按钮(Buttons)

图片(Images)

基础排版

标题

页面主体

强调文本

列表

标题

Bootstrap为传统的标题h1-h6重新定义了标准的样式,使得在所有浏览器下显示效果都一样

img_74faacec32055d808bde34cb2f798c4a.jpe
标题

页面主体

BootStrap为段落标签设置了全局的字体大小为12px,行间距line-height为字体大小的1.428倍(即20px)

特别强调的段落标签

<p class="lead"></p>

经验:

如果Bootstrap提供的字体大小样式不符合实际开发需求,可以在引用的bootstrap.css文件后面重新设置样式以覆盖框架定义好的默认样式

强调文本

文本强调元素:small、strong、em

对齐方式:

img_d08ad9c1f3683fafc40aade8a2980491.jpe
对齐方式

列表

内联列表

img_0cc174e7e9fe52fb6ce103bb4d09eaa3.jpe
内联列表

水平定义列表

img_de19e6ab65dd97569a08d451223413fc.jpe
水平定义列表
img_aa84e6e8a39c1ceac4c2dfa050bd99a2.jpe
演示

表单

内联表单

横向表单

验证提示状态

控件大小

内联表单

img_9e785b087ce084554d8e077c4b7bc422.jpe
内联表单

横向表单

img_c6b76e2f1ae47ad9d333c4f40f9732e7.jpe
横向表单

验证提示状态

.has-warning 警告(黄色)

.has-error  错误(红色)

.has-success 成功(绿色)

控件大小

大型输入框

小型输入框

img_24632313481d977ab12b8e365aaaa39b.jpe
输入框

按钮

按钮样式

img_5c46b8a4fad58b3bd4b955e414013523.jpe
按钮

按钮大小

img_5e216f952c873193735d8c915b3d4849.jpe
按钮大小

图片

响应式图片

img_1cdf77c4c30ed3d8ff2a72ff969e1d45.jpe
响应式图片

图片形状

img_c125c2c2c0d0327df838924986f44deb.jpe
图片形状

参考资料:

Bootstrap官网文档:https://v4.bootcss.com/docs/4.0/getting-started/introduction/

友情链接:https://www.jikedaquan.com/

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
简单易上手的Bootstrap
简单易上手的Bootstrap
50 0
Bootstrap的用法
一、介绍 Bootstrap,来自 Twitter,是目前比较受欢迎的前端框框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。
1420 0
Boostrap全局CSS样式
Boostrap全局CSS样式
982 0
bootstrap自定义样式-bootstrap侧边导航栏的实现
前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单,参考了很多官网的侧滑,实现方法各有不同,优缺点也十分明显,有的官网首页为了仅仅实现一个侧滑的效果,用了owl.carousel滑屏的插件,个人觉得小题大做了。
3312 0
Bootstrap
网格系统 什么是网格(Grid)? 摘自维基百科: 在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的、水平的)组成的结构(通常是二维的)。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中,它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。
1048 0
自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏
有人说前端发展太快,框架太多,各有所需,各有所长。看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个。 发展再快,框架再多。还是得回到原点,不就是Html+Css+JavaScript吗,使用任何牛逼的框架之前你也得把这些东西玩熟练了。
1824 0
+关注
program_黑
熟练使用Eclipse、MyEclipse、Idea等开发工具 熟练的使用Java语言进行面向对象程序设计,掌握常用的设计模式,有良好的编程习惯 熟悉基于JSP和Servlet的JavaWeb开发,熟悉三层架构 熟练掌握HTML+CSS+JavaScript+jquery+Aja
文章
问答
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载