你不得不知道的Bootstrap基础之网格布局（1）

最新推荐文章于 2023-02-26 17:12:08 发布

TomLazy

最新推荐文章于 2023-02-26 17:12:08 发布

阅读量384

点赞数

分类专栏：日常学习文章标签： bootstrap grid

本文链接：https://blog.csdn.net/qq_41071754/article/details/108778272

版权

日常学习专栏收录该内容

82 篇文章 8 订阅

订阅专栏

文章目录

Bootstrap使用方法

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

Bootstrap前端UI框架Glyphicons字体图标对照表http://www.jsons.cn/bootstrapicons/

Boostrap网格布局介绍https://getbootstrap.com/docs/3.3/examples/grid/

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

rel各个属性值配置的意思

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

Bootstrap实例1

①、代码实现**

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>重置窗口大小，查看响应式效果！</p> 
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>第一列</h3>
      <p>学的不仅是技术，更是梦想！</p>
      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
    </div>
    <div class="col-sm-4">
      <h3>第二列</h3>
      <p>学的不仅是技术，更是梦想！</p>
      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
    </div>
    <div class="col-sm-4">
      <h3>第三列</h3>        
      <p>学的不仅是技术，更是梦想！</p>
      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
    </div>
  </div>
</div>

</body>
</html>

②、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列栅格系统比；

案例说明

<!-- 混用案例说明 -->
<div class="container">
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        <!-- 说明：每row行共12列，分个3div，每个div平占4列，即3个*4列=12列 -->
    </div>
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-8">col-md-8</div>
        <!-- 说明：每row行共12列，分个2div，第1个div占4列，第2个div则占8列，即4列+8列=12列 -->
    </div>
    <div class="row">
        <div class="col-md-3">col-md-3</div>
        <div class="col-md-6">col-md-6</div>
        <div class="col-md-3">col-md-3</div>
        <!-- 说明：每row行共12列，分个3div，每1,3个div占3列，第2个div则占6列，即3列+6列+3列=12列 -->
    </div>
</div>
<!-- 单一案例说明 -->
<div class="col-xs-12 col-sm-9 col-md-6 col-lg-3">测试</div>
<!--
  当屏幕尺寸：
  小于 768px 的时候，用 col-xs-12 类对应的样式；
  在 768px 到 992px 之间的时候，用 col-sm-9 类对应的样式；
  在 992px 到 1200px 之间的时候，用 col-md-6 类对应的样式；
  大于 1200px 的时候，用 col-lg-3 类对应的样式；
-->

TomLazy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
你不得不知道的Bootstrap基础之网格布局（1）

文章目录Bootstrap使用方法link 标签中“rel=stylesheet”的作用rel各个属性值配置的意思Bootstrap实例1①、代码实现**②、bootstrap-3.3.7版本-效果图：③、bootstrap-4.5.2版本-效果图：Bootstrap栅栏布局里col-xs-*、col-sm-*、col-md-*、col-lg-*之间的区别及使用方法关键字解释案例说明Bootstrap使用方法1.创建一个html5模板2.引入bootstrap.css3.引入jquery.js
复制链接

扫一扫