博客
关于我
你不得不知道的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 order by多个字段排序
查看>>
MySQL Order By实现原理分析和Filesort优化
查看>>
mysql problems
查看>>
mysql replace first,MySQL中处理各种重复的一些方法
查看>>
MySQL replace函数替换字符串语句的用法(mysql字符串替换)
查看>>
Mysql Row_Format 参数讲解
查看>>
mysql select, from ,join ,on ,where groupby,having ,order by limit的执行顺序和书写顺序
查看>>
MySQL Server 5.5安装记录
查看>>
mysql slave 停了_slave 停止。求解决方法
查看>>
MySQL SQL 优化指南:主键、ORDER BY、GROUP BY 和 UPDATE 优化详解
查看>>
mysql sum 没返回,如果没有找到任何值,我如何在MySQL中获得SUM函数以返回'0'?
查看>>
mysql Timestamp时间隔了8小时
查看>>
Mysql tinyint(1)与tinyint(4)的区别
查看>>
mysql union orderby 无效
查看>>
mysql where中如何判断不为空
查看>>
mysql workbench6.3.5_MySQL Workbench
查看>>
MySQL Workbench安装教程以及菜单汉化
查看>>
MySQL Xtrabackup 安装、备份、恢复
查看>>
mysql [Err] 1436 - Thread stack overrun: 129464 bytes used of a 286720 byte stack, and 160000 bytes
查看>>
MySQL _ MySQL常用操作
查看>>