博客
关于我
你不得不知道的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不同官方版本对比
查看>>
MySQL与Informix数据库中的同义表创建:深入解析与比较
查看>>
mysql与mem_细说 MySQL 之 MEM_ROOT
查看>>
MySQL与Oracle的数据迁移注意事项,另附转换工具链接
查看>>
mysql丢失更新问题
查看>>
MySQL两千万数据优化&迁移
查看>>
MySql中 delimiter 详解
查看>>
MYSQL中 find_in_set() 函数用法详解
查看>>
MySQL中auto_increment有什么作用?(IT枫斗者)
查看>>
MySQL中B+Tree索引原理
查看>>
mysql中cast() 和convert()的用法讲解
查看>>
mysql中datetime与timestamp类型有什么区别
查看>>
MySQL中DQL语言的执行顺序
查看>>
mysql中floor函数的作用是什么?
查看>>
MySQL中group by 与 order by 一起使用排序问题
查看>>
mysql中having的用法
查看>>
MySQL中interactive_timeout和wait_timeout的区别
查看>>
mysql中int、bigint、smallint 和 tinyint的区别、char和varchar的区别详细介绍
查看>>
mysql中json_extract的使用方法
查看>>
mysql中json_extract的使用方法
查看>>