博客
关于我
你不得不知道的Bootstrap基础之网格布局(1)
阅读量:192 次
发布时间:2019-02-28

本文共 1607 字,大约阅读时间需要 5 分钟。

文章目录


Bootstrap使用方法

  • 1.创建一个html5模板
  • 2.引入bootstrap.css
  • 3.引入jquery.js
  • 4.引入bootstrap.js

Bootstrap前端UI框架Glyphicons字体图标对照表

Boostrap网格布局介绍

link 标签中“rel=stylesheet”的作用

rel各个属性值配置的意思

  • Alternate – 定义交替出现的链接
  • Stylesheet – 定义一个外部加载的样式表
  • Start – 通知搜索引擎,文档的开始
  • Next – 记录文档的下一页.(浏览器可以提前加载此页)
  • Prev – 记录文档的上一页.(定义浏览器的后退键)
  • Contents - 文档的目录
  • Index – 当前文档的索引
  • Glossary – 词汇
  • Copyright – 当前文档的版权
  • Chapter – 当前文档的章节
  • Section – 作为文档的一部分
  • Subsection – 作为文档的一小部分
  • Appendix – 定义文档的附加信息
  • Help – 链接帮助信息
  • Bookmark – 书签

Bootstrap实例1

①、代码实现**

  Bootstrap 实例  

我的第一个 Bootstrap 页面

重置窗口大小,查看响应式效果!

第一列

学的不仅是技术,更是梦想!

再牛逼的梦想,也抵不住你傻逼似的坚持!

第二列

学的不仅是技术,更是梦想!

再牛逼的梦想,也抵不住你傻逼似的坚持!

第三列

学的不仅是技术,更是梦想!

再牛逼的梦想,也抵不住你傻逼似的坚持!

②、bootstrap-3.3.7版本-效果图:

图片

③、bootstrap-4.5.2版本-效果图:

图片

Bootstrap栅栏布局里col-xs-、col-sm-、col-md-*、col-lg-*之间的区别及使用方法

  • .col-xs-* 超小屏幕 手机 (<768px)
  • .col-sm-* 小屏幕 平板 (≥768px)
  • .col-md-* 中等屏幕 桌面显示器 (≥992px)
  • .col-lg-* 大屏幕 大桌面显示器 (≥1200px)

关键字解释

  • 1、col-column:列;
  • 2、xs-maxsmall:超小; sm-small:小; md-medium:中等; lg-large:大;
  • 3、-*表示占列,即占自动每行row分12列栅格系统比;

案例说明

col-md-4
col-md-4
col-md-4
col-md-4
col-md-8
col-md-3
col-md-6
col-md-3
测试

转载地址:http://hqoi.baihongyu.com/

你可能感兴趣的文章
mysql 使用sql文件恢复数据库
查看>>
mysql 修改默认字符集为utf8
查看>>
Mysql 共享锁
查看>>
MySQL 内核深度优化
查看>>
mysql 内连接、自然连接、外连接的区别
查看>>
mysql 写入慢优化
查看>>
mysql 分组统计SQL语句
查看>>
Mysql 分页
查看>>
Mysql 分页语句 Limit原理
查看>>
MySql 创建函数 Error Code : 1418
查看>>
MySQL 创建新用户及授予权限的完整流程
查看>>
mysql 创建表,不能包含关键字values 以及 表id自增问题
查看>>
mysql 删除日志文件详解
查看>>
mysql 判断表字段是否存在,然后修改
查看>>
MySQL 到底能不能放到 Docker 里跑?
查看>>
mysql 前缀索引 命令_11 | Mysql怎么给字符串字段加索引?
查看>>
MySQL 加锁处理分析
查看>>
mysql 协议的退出命令包及解析
查看>>
mysql 参数 innodb_flush_log_at_trx_commit
查看>>
mysql 取表中分组之后最新一条数据 分组最新数据 分组取最新数据 分组数据 获取每个分类的最新数据
查看>>