前端8bootstrap：栅格系统，隔行/触摸换色，分页/导航条

Posted 2021-05-21 码农编程录

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端8bootstrap：栅格系统，隔行/触摸换色，分页/导航条相关的知识，希望对你有一定的参考价值。

文章目录

1.bootstrap基本模板：meta/title，link/script
2.两种布局容器/栅格系统：自动补
3.样式_表格/按钮/图片/表单：class属性，for属性联动
4.组件_分页/导航条：nav横着，laquo书名号《，sr-only

1.bootstrap基本模板：meta/title，link/script

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 支持IE(edge) :  -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 视图窗口 , 内容 = 设备宽度(浏览器)  初始比例1 (0.25~5) -->
    <!-- 上述3个meta标签 必须 放在最前面，任何其他内容都 必须 跟随其后！ -->
    <title>Bootstrap 101 Template</title>


    <!-- Bootstrap : html + css + js + jquery -->
    <!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">-->        
    <!--如下不需要连网-->
    <link href="../css/bootstrap.css" rel="stylesheet">        
    <!-- jQuery (Bootstrap 的所有 javascript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="../js/jquery-3.3.1.js"></script>    
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../js/bootstrap.js"></script>


    <!-- 向下兼容: 兼容IE9一下的版本 -->    
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
<!--    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>-->
    <![endif]-->
</head>

<!--111111111111111111111111111111111111111111111111111111111111111111111111111-->    
<body>
<h1>你好，世界！</h1>
</body>
</html>

如下是上面的简洁标准模板：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <link href="../css/bootstrap.css" rel="stylesheet">
    <script src="../js/jquery-3.3.1.js"></script>
    <script src="../js/bootstrap.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>

2.两种布局容器/栅格系统：自动补

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <link href="../css/bootstrap.css" rel="stylesheet">
    <script src="../js/jquery-3.3.1.js"></script>
    <script src="../js/bootstrap.js"></script>

    <style>
        div{
            border: 1px solid red;
            height: 100px;
        }
        .my{
            color: blue;
        }
        .your{
            font-size: 50px;
        }
    </style>
</head>

<!--111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
        <span class="my your">span</span>        
        <!--
             写一个网页(一个图片200px宽) : 屏幕宽1200px (写6个)  屏幕宽600px(3个)  200px(1个)   
                             
             做适配: 根据当前的屏幕宽度,改变自己的显示策略(没什么难度.工作量大，if else)
             响应式布局: 只要写一套布局, 根据不同的屏幕大小动态变化显示策略  www.jd.com       m.jd.com

            #布局容器
               1. .container-fluid : 容器-流动 (流式布局 : 100%)
               2. .container : 支持响应式布局（有固定宽度如下）
               媒体查询 : if ... else if...
                @media (min-width: 1200px)
                .container {
                    width: 1170px;
                }
               浏览器的宽度 > 1200px ,那么布局宽度=1170px    -> large   lg    大屏幕电脑
               浏览器的宽度 > 992px ,那么布局宽度=970px      -> medium  md	  中屏幕电脑
               浏览器的宽度 > 768px ,那么布局宽度=750px      -> small   sm    平板
               浏览器的宽度 < 768px ,那么布局宽度=100%       -> extra small   xs   手机

            #栅格系统
                容器 > 行 > 列
                一行12列  原理: float                                
                visible-lg : 大屏可见
                hidden-lg : 大屏不可见                
        -->
        <div class="container">   <!-- .container按tab键 -->   <!--栅格系统 --> 
            <div class="row">  <!--行-->  <!--规则: 如果不设置md如下,优先找sm,继续找xs-->
                <div class="col-xs-12  col-md-4 col-lg-3 hidden-lg">1</div>  <!--列--> 
                <div class="col-xs-12  col-md-4 col-lg-3">2</div>
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">3</div>
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">4</div>
            </div>
        </div>
</body>
</html>

如下是两种布局容器。
在这里插入图片描述

如下全是栅格系统，1行12列（每个div跨3列，最后一个div改为4了），如下数字4每个横跨4列。

先看右边984小于992为sm屏幕，所以选择sm横跨6列，所以显示2列。

如果设置数字1为visible-lg，则只有大屏显示。
在这里插入图片描述

3.样式_表格/按钮/图片/表单：class属性，for属性联动

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <link href="../css/bootstrap.css" rel="stylesheet">  <!--点进bootstrap.css可修改table-striped等参数-->
    <script src="../js/jquery-3.3.1.js"></script>
    <script src="../js/bootstrap.js"></script>
</head>

<body>
    <table class="table table-striped table-bordered table-hover"> <!--table-striped:隔行换色。table-bordered：带灰色边框。table-hover: 触摸换色-->
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>1</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>1</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>1</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>1</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>1</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>1</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>1</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>1</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <link href="../css/bootstrap.css" rel="stylesheet">
    <script src="../js/jquery-3.3.1.js"></script>
    <script src="../js/bootstrap.js"></script>
</head>

<!--1111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<hr>
<input type="button" value="按钮">
<button>按钮2</button>
<a href="#">超链接</a>  <!-- a标签的本质也是按钮-->
    <hr>

<input type="button" value="我的按钮" class="btn btn-success">  <!-- 成功颜色绿色 -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-danger">（危险）Danger</button>
<button type="button" class="btn btn-link">（链接）Link</button>
    <hr>
    <hr>
<img src="../img/banner_1.jpg" class="img-responsive img-circle" alt="Responsive image">
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport前端6jquary：页面加载，选择器，隔行换色，Dom，全选
 jqgrid 设置隔行换色
 每日一课：报表隔行换色
 使用JavaScript完成表格隔行换色
 JS——表格的隔行换色
 javascript 表格隔行换色