博客
关于我
你不得不知道的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优化配置详解
查看>>
Mysql优化高级篇(全)
查看>>
mysql会员求积分_MySql-统计所有会员的最高前10次的积分和
查看>>
mysql会对联合索性排序优化_MySQL索引优化实战
查看>>
MySQL作为服务端的配置过程与实际案例
查看>>
Mysql使用命令行备份数据
查看>>
MySQL保姆级教程(SQL语法基础篇)从小白到高手的进阶指南,收藏这一篇就够了
查看>>
MySQL修改root密码的多种方法
查看>>
MySQL修改密码报错ERROR 1396 (HY000): Operation ALTER USER failed for ‘root‘@‘localhost‘
查看>>
Mysql全局优化参数
查看>>
MySQL全文索引实现简单版搜索引擎
查看>>
MySQL全面瓦解:安装部署与准备
查看>>
mysql共享锁与排他锁
查看>>
MySQL内存表使用技巧
查看>>
MySQL再叙(体系结构、存储引擎、索引、SQL执行过程)
查看>>