开发布局之-----Bootstrap(技术重点)

最新推荐文章于 2024-06-23 20:25:44 发布

别动我代码儿

最新推荐文章于 2024-06-23 20:25:44 发布

阅读量2.5k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_45176415/article/details/103213508

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.重点(栅格系统,响应式工具,预制类)

2. 资源

Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端响应式框架。
网址：
- 中文网：http://www.bootcss.com/
- 官网：http://getbootstrap.com/
框架:顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。(版本2.xx,3.XX,4.XX)

2. 使用过程

index.html 初始化：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <!-- 要求 当前网页 使用 IE浏览器 最高版本的内核 来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <!-- 视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
      
    <title>Bootstrap Template</title>

    <!-- Bootstrap 的文件引入 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
    <!-- 条件注释:小于IE9的版本 -->
    <!--[if lt IE 9]>
	  <!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      
      <!--解决ie9以下浏览器对 css3 Media Query  的不识别 -->
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>
  </body>
</html>

3. 布局容器

版心设置：Bootstrap 需要为页面内容包裹一个 .container 或者.container-fluid 容器，它提供了两个作此用处的类。
container：设置不同档位下的版心的宽度；
- 超小屏（xs : extra small）：手机； w<=767px ；版心宽度为100%
- 小屏（sm : small）：平板； 768px<=w ；版心宽度定为 750px
- 中屏（md: medium）：桌面；992px<=w ；版心宽度定为 970px
- 大屏（lg: large）：大桌面；1200px<=w ；版心宽度定为 1170px
container-fluid：百分百宽度；
特点：
- 所有元素为CSS3盒子模型；
- 布局盒子有左右padding值

4. 预制类

排版

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

<p>...</p>

按钮

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

辅助类样式

<!-- 上下文颜色 -->
<p class="text-muted">...</p>

<!-- 下拉三角 -->
<span class="caret"></span>

字体图标

<span class="glyphicon glyphicon-search" aria-hidden="true"></s

5. 栅格系统

1. 介绍

作用：设置子元素在不同档位下的布局
栅格系统，在各个档位下，控制子元素布局不同；将版心宽度均分为12份；
在这里插入图片描述

类前缀：
- 超小屏（xs : extra small）：手机；
- 小屏（sm : small）：平板；
- 中屏（md: medium）：桌面；
- 大屏（lg: large）：大桌面；
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中，控制不同的档位下，列的子元素占有几份

2. 基本使用

语法：

<!-- 中屏和以上占有6份 -->
<div class="container">
  <div class="row">
    <div class="col-md-6">.col-md-6</div>
  	<div class="col-md-6">.col-md-6</div>
  </div>
</div>

<!-- 各个档位下，按照各个档位下布局 -->
<div class="container">
  <div class="row">
    <div class="col-md-6 col-lg-4">1</div>
  	<div class="col-md-6 col-lg-8">2</div>
  </div>
</div>

特点
- 单一类前缀：各个档位下的类前缀，为包括当前且向上生效；例如：.col-md-6为中屏和以上占有6份；
- 多个类前缀：分别按照各个档位列划分生效；
- 每个子项：默认左右15px的padding；
- 行（.row）可以去除父容器左右15px的padding值：.row的左右margin为-15px；
列嵌套

<!-- 直接嵌套 -->
<div class="col-sm-4">
    <div class="col-sm-6">小列</div>
    <div class="col-sm-6">小列</div>
</div>

<!-- 使用row嵌套 -->
<div class="col-sm-4">
    <!-- 加1个行 row 这样可以取消父元素的padding值 而且高度自动和父级一样高； -->
    <div class="row">
         <div class="col-sm-6">小列</div>
         <div class="col-sm-6">小列</div>
    </div>
</div>

列偏移

<div class="row">
    <!-- 如果只有一个盒子 那么就偏移 = 12-4-4  -->
    <div class="col-lg-4">1</div>
    <div class="col-lg-4 col-lg-offset-4">2</div>
</div>

<!-- 居中-->
<div class="row">
     <!-- 如果只有一个盒子 那么就偏移 = (12 - 8) /2 -->
     <div class="col-md-8 col-md-offset-2">中间盒子</div>
</div>

列排序

<!-- 列排序 -->
<div class="row">
    <div class="col-md-4 col-lg-4 col-lg-push-8"></div>
    <div class="col-md-8 col-lg-8 col-lg-pull-4"></div>
</div>

效果如下:
在这里插入图片描述

6. 响应式工具

可以控制子元素在档位下进行显示或隐藏；
注意：和列类前缀的参数形成对比记忆，
- col-sm- 是超小屏（包含）以上的屏幕都是这个份数的划分；
- 响应式工具只是对当前档位下的类前缀类名生效；

别动我代码儿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
开发布局之-----Bootstrap(技术重点)

1.重点(栅格系统,响应式工具,预制类)2. 资源Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端响应式框架。网址：中文网：http://www.bootcss.com/官网：http://getbootstrap.com/推荐：http://bootstrap.css88.com/框架:顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，...
复制链接

扫一扫