Bootstrap基本格式和栅格系统

最新推荐文章于 2021-06-07 18:58:26 发布

何迟

最新推荐文章于 2021-06-07 18:58:26 发布

阅读量262

点赞数

分类专栏： Bootstrap 前端开发也蛮有意思的

本文链接：https://blog.csdn.net/qq_42036616/article/details/82588300

版权

前端开发也蛮有意思的同时被 2 个专栏收录

82 篇文章 5 订阅

订阅专栏

Bootstrap

2 篇文章 1 订阅

订阅专栏

提一句：

如果引入任何框架的库文件，下载后本地引入可以有代码提示，如果在线引入则不会有，Bootstrap也是基于Jquery开发的，所以要后引入。

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">
    <!--X-UA-Compatible是自从IE8新加的一个设置，对于IE8以下的浏览器是不识别的。 通过在meta中设置X-UA-Compatible的值，可以指定网页的兼容性模式设置。-->
    <!--这里的chrome=1不是说IE的技术增强了可以模拟Chrome浏览器，而是与谷歌开发的Google Chrome Frame(谷歌内嵌浏览器框架GCF)有关。-->
    <!--这个插件可以让用户的IE浏览器外观不变，但用户在浏览网页时实际上使用的是Chrome的内核，并且支持Windows XP及以上系统的IE6/7/8。-->
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!--获得移动设备的视口，将可以适配移动设备-->
    
    <title>基础</title>
    
    <link href="bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <!--为了支持IE8以下版本-->
    
    <style>
        [class*="col-"]{
            /*类的模糊选择器，可以通配各种选择器*/
            padding-top: 15px;
            padding-bottom: 15px;
            background-color: #66afe9;
            border: 2px solid firebrick;
        }
    </style>
</head>
<body>
       <div class="container">
           <!--这里的类名container是框架已经规定好了的，如果定义为这个类名，引入特有的样式，还有一个可以看网站-->
           <div class="row">
               <div class="col-md-1">中等屏幕</div>
               <!--栅格系统，最多12行-->
               <div class="col-md-1">中等屏幕</div>
               <div class="col-md-1">中等屏幕</div>
               <div class="col-md-1">中等屏幕</div>
               <div class="col-md-1">中等屏幕</div>
               <div class="col-md-1">中等屏幕</div>
               <div class="col-md-1">中等屏幕</div>
               <div class="col-md-1">中等屏幕</div>
               <div class="col-md-1">中等屏幕</div>
               <div class="col-md-1">中等屏幕</div>
               <div class="col-md-1">中等屏幕</div>
               <div class="col-md-1">中等屏幕</div>
               <div class="col-md-1">中等屏幕</div>
           </div>
           
           <div class="row">
               <div class="col-lg-4 col-xs-8">和为12</div>
               <div class="col-lg-8 col-xs-4">和为12</div>
               <!--lg电脑屏幕，手机端为xs只要和为12即可，可以同时定义-->
           </div>
           
           <div class="row">
               <!--偏移-->
               <div class="col-lg-4 col-xs-8 col-lg-offset-3 col-xs-offset-3">和为12</div>
           </div>
           
           <div class="row">
               <!--嵌套使用也可以偏移-->
               <div class="col-lg-8">9
                   <div class="col-lg-5 col-lg-offset-3">5</div>
               </div>
           </div>

           <div class="row">
               <!--改变顺序，一个为push属性，一个为pull属性，push在前，pull在后-->
               <div class="col-lg-4 col-lg-push-8">和为12</div>
               <div class="col-lg-8 col-lg-pull-4">和为12</div>
           </div>
           
       </div>

       <script src="jquery-3.3.1.js"></script>
       <script src="bootstrap.min.css"></script>
       
</body>
</html>

在笔记本上运行效果：