博客
关于我
你不得不知道的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分库分表中间件简书_MySQL分库分表
查看>>
MySQL分库分表会带来哪些问题?分库分表问题
查看>>
MySQL分组函数
查看>>
MySQL分组查询
查看>>
Mysql分表后同结构不同名称表之间复制数据以及Update语句只更新日期加减不更改时间
查看>>
mySql分页Iimit优化
查看>>
MySQL分页查询
查看>>
mysql列转行函数是什么
查看>>
mysql创建函数报错_mysql在创建存储函数时报错
查看>>
mysql创建数据库和用户 并授权
查看>>
mysql创建数据库指定字符集
查看>>
MySql创建数据表
查看>>
MySQL创建新用户以及ERROR 1396 (HY000)问题解决
查看>>
MySQL创建用户与授权
查看>>
MySQL创建用户报错:ERROR 1396 (HY000): Operation CREATE USER failed for 'slave'@'%'
查看>>
MySQL创建索引时提示“Specified key was too long; max key length is 767 bytes”
查看>>
mysql初始密码错误问题
查看>>
mysql判断某一张表是否存在的sql语句以及方法
查看>>
mysql加入安装策略_一键安装mysql5.7及密码策略修改方法
查看>>