Bootstrap前端开发框架

最新推荐文章于 2022-05-03 21:05:38 发布

前端笨鸟

最新推荐文章于 2022-05-03 21:05:38 发布

阅读量156

点赞数

分类专栏： html学习笔记文章标签： Bootstrap

本文链接：https://blog.csdn.net/qq_41670147/article/details/103007200

版权

html学习笔记专栏收录该内容

28 篇文章 0 订阅

订阅专栏

Bootstrap 使用
Bootstrap使用四部曲：
1、创建文件夹结构
2、创建html骨架结构
3、引入相关样式文件
4、书写内容
创建html骨架结构

<!--要求当前网页使用IE浏览器最高版本的内核来渲染-->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

引入相关样式文件

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

栅格系统
栅格系统，是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
Bootstrap里面的container宽度是固定的，但是不同屏幕下，container的宽度不同，在把container划分为12等份
栅格选项参数
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，内容可以放入创建好的布局中。

	超小屏幕（手机）>768px	小屏设备（平板）>=768px	中等屏幕（桌面显示器）>=992px	宽屏设备（大桌面显示器）>=1200px
.container最大宽度	自动（100%）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-

● 行（row）必须放到container布局容器里面
● 实现列的平均划分，需要给列添加类前缀
● xs-extra small ：超小；sm-small：小；md-medium：中等；lg-large：大；
● 列（column）大于12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
● 每一列默认有左右15像素的padding
● 可以同时为一列指定多个设备的类名，以便划分不同分数例如：class="col-md-4 col-sm-6"

 
  <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--要求当前网页使用IE浏览器最高版本的内核来渲染-->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"
    <title>Document</title>
</head>
<body>
    <div class="container">
        <!-- 每个div占三份 -->
        <div class="row">
            <div class="col-lg-3"></div>
            <div class="col-lg-3"></div>
            <div class="col-lg-3"></div>
            <div class="col-lg-3"></div>
        </div>
        <!-- 第一个div占6份,其他的各占2份 -->
        <div class="row">
            <div class="col-lg-6"></div>
            <div class="col-lg-2"></div>
            <div class="col-lg-2"></div>
            <div class="col-lg-2"></div>
        </div>
        <!-- 如果分数相加小于12,则占不满整个container的宽度会有空白 -->
        <div class="row">
            <div class="col-lg-6"></div>
            <div class="col-lg-2"></div>
            <div class="col-lg-2"></div>
            <div class="col-lg-1"></div>
        </div>
        <!-- 如果分数相加大于12,多余一行会另起一行显示 -->
        <div class="row">
            <div class="col-lg-6"></div>
            <div class="col-lg-2"></div>
            <div class="col-lg-2"></div>
            <div class="col-lg-1"></div>
        </div>
    </div>
</body>
</html>

列嵌套
栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" <title>Document</title>
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-lg-3">
             <!-- 将盒子再次划分为12等份，每份占6列 -->
                <div class="row">
                    <div class="col-lg-6">a</div>
                    <div class="col-lg-6">b</div>
                </div>
            </div>
            <div class="col-lg-3"></div>
            <div class="col-lg-3"></div>
            <div class="col-lg-3"></div>
        </div>
    </div>
</body>
</html>

列偏移
使用.col-md-offset-类可以将列向右侧偏移。这些类实际是通过使用选择器为当前元素增加了左侧的边距（margin）

<!--列偏移-->
<div class="row">
	<div class="col-lg-4">1</div>
	<div class="col-lg-4 col-lg-offset-4">2</div>
</div>

列排序
通过使用.col-md-push-*类可以很容易的改变列（column）的顺序

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

响应式工具
为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容

类名	超小屏	小屏	中屏	大屏
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

与之相反的，是visible-xs visible-md visible-lg是显示某个页面内容

前端笨鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap前端开发框架

Bootstrap 使用Bootstrap使用四部曲：1、创建文件夹结构2、创建html骨架结构3、引入相关样式文件4、书写内容创建html骨架结构 <meta http-equiv="X-UA-Compatible" content="ie=edge">引入相关样式文件<link...
复制链接

扫一扫