Bootstrap框架

最新推荐文章于 2024-05-30 15:01:09 发布

chang _an

最新推荐文章于 2024-05-30 15:01:09 发布

阅读量562

点赞数

本文链接：https://blog.csdn.net/weixin_50613702/article/details/110170959

版权

Bootstrap框架

一、Bootstrap简介

Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JavaScript的。

二．Bootstrap 特点

(1)**跨设备、跨浏览器：**可以兼容所有现代浏览器，包括比较诟病的IE7、8。

(2)**响应式布局：**不但可以支持PC端的各种分辨率的显示，还支持移动端PAD、手机等屏幕的响应式切换显示。

(3)**提供的全面的组件：**Bootstrap提供了实用性很强的组件，包括：导航、标签、工具条、按钮等一系列组件，方便开发者调用。

(4)**内置 jQuery：**插件Bootstrap提供了很多实用性的jquery插件，这些插件方便开发者实现Web中各种常规特效。

(5)**支持 HTML5、CSS3：**HTML5语义化标签和CSS3属性，都得到很好的支持。

(6)**支持 LESS 动态样式：**LESS使用变量、嵌套、操作混合编码，编写更快、更灵活的CSS。它和Bootstrap能很好的配合开发。

三、栅格系统

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

参数 Bootstrap3

	超小屏幕(<768px)	小屏幕(>=768px)	中等屏幕(>=992px)	超大屏幕(>=1200px)
列数	12	12	12	12
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
最大宽度	None(自动)	750px	970px	1170px

参数 Bootstrap4

	超小屏幕(<576px)	小屏幕(>=576px)	中等屏幕(>=768px)	大屏幕(>=992px)	超大屏幕(>=1200px)
列数	12	12	12	12	12
类前缀	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
最大宽度	None(自动)	540px	720px	960px	1140px

123

类	超小屏幕(<768px)	小屏幕(>=768px)	中等屏幕(>=992px)	超大屏幕(>=1200px)
.visible-xs-	可见	隐藏	隐藏	隐藏
.visible-sm-	隐藏	可见	隐藏	隐藏
.visible-md-	隐藏	隐藏	可见	隐藏
.visible-lg-	隐藏	隐藏	隐藏	可见
.hidden=xs	隐藏	可见	可见	可见
.hidden-sm-	可见	隐藏	可见	可见
.hidden-md-	可见	可见	隐藏	可见
.hidden-lg-	可见	可见	可见	隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap-3.3.7/dist/css/bootstrap.css">
    <style>
        .row{
    
            background-color: yellow;
            text-align: center;
        }
        .row div{
    
            border: 1px solid black;
        }

    </style>
</head>
<body>
    <div class="container">
        <!-- bootstrap 将1行分成12列 -->
        <div class="row">
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
        </div>
        <div class="row">
            <div class="col-md-6">6</div>
            <div class="col-md-6">6</div>
        </div>
        <div class="row">
            <div class="col-md-12">12</div>

最低0.47元/天解锁文章

chang _an

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Bootstrap框架

Bootstrap框架一、Bootstrap简介Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JavaScript的。二．Bootstrap 特点(1)**跨设备、跨浏览器：**可以兼容所有现代浏览器，包括比较诟病的IE7、8。(2)**响应式布局：**不但可以支持PC端的各种分辨率的显示，还支持移动端PAD、手机等屏幕的响应式切换显示。(3)**提供的全面的组件：**Bootstrap提供了实用性很强的组件，包括：导航、标签、工具
复制链接

扫一扫