06_bootstrap
关注
分享
扫一扫
记录bootstrap相关知识
l0510402015
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
302、bootstrap之 响应式布局（栅格系统）
响应式布局 #一、目的： 同一套页面可以兼容不同分辨率的设备。二、实现方式： 使用栅格系统实现：一行被分成12个格子，可以根据屏幕的大小设定一个元素占几个格子。三、步骤：第一步：定义容器。相当于之前的table*容器分类：（1）container:根据屏幕固定大小，屏幕...原创 2020-02-26 11:21:26 · 368 阅读 · 0 评论 -
301、bootstrapt简单入门介绍
技巧：如果要看引用名称是否正确，可以按住crtl，把鼠标移动到被引用对象名称上，如果鼠标变成小手，则说明没错。概念 Bootstrap：它是一个前端开发的框架，定义了一些html、css、JS框架 * 框架：一个半成品软件，开发人员可以在框架基础上再进行开发，简化编码操作。下载： www.bootstrap.com -> 下载bootstrap -...原创 2020-02-26 08:40:36 · 240 阅读 · 0 评论 -
309、bootstrap 之 Carousel（轮播图）插件
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid...原创 2020-02-27 08:07:16 · 197 阅读 · 0 评论 -
308、bootstrap 之 分页 组件
1、如果页面内容有多个，可以将页面分成多页进行显示2、可以给加入disabled类 和active类来禁止链接属性，比如说在第一时，《这个就不能有链接属性了。3、类pagination-sm、pagination、pagination-lg 可以用来设置分页字符大小，添加在列表标签<ul>中 注意：使用pagination-sm、pagination-lg类时，也...原创 2020-02-27 08:06:52 · 391 阅读 · 0 评论 -
307、bootstrap 之 导航条组件
注意：1、这里只列出导航条部分功能，具体到时候要查看手册。2、如果帮助手册中代码看不懂，可以采用“一部分删除，看什么功能消失”的方法来知道代码的功能。3、本文在帮助手册代码基础上加入了一些功能说明4、“汉堡条”概念：举例代码：<!DOCTYPE html><html lang="zh-CN"><head> <met...原创 2020-02-26 18:50:59 · 179 阅读 · 0 评论 -
306、bootstrap 之 表单样式
具体查看手册原创 2020-02-26 17:42:04 · 94 阅读 · 0 评论 -
305、bootstrap 之 表格样式
表格1、class="table "普通表格样式2、class="table table-striped" 带斑马条纹样式，也行与行之间间隔背景色3、class="table table-bordered" 带边框样式4、class="table table-hover" 速表悬停5、class="table table-condensed...原创 2020-02-26 12:41:30 · 334 阅读 · 0 评论 -
304、bootstrap 之 图片样式
图片样式1、class="img-responsiv：图片响应样式，图片可以自动缩放2、方形图片样式：class="img-rounded3、圆形图片样式：class="img-circle4、照片图片样式：class="img-thumbnail注意：可以多个样式组合使用<!DOCTYPE html><html lang...原创 2020-02-26 12:00:30 · 490 阅读 · 0 评论 -
303、bootstrap 之 按钮样式
一、按钮1、模式样式 ：class="btn btn-default">（默认样式）Default</button>2、蓝色 ：class="btn btn-primary">（首选项）Primary</button>3、绿色 ：class="btn btn-success">（成功）Success</button>...原创 2020-02-26 11:47:27 · 346 阅读 · 0 评论