博客

前端路线–bootstrap（day02）

  • Post author:
  • Post category:其他

day02-01-图片

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

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

<body>
    <!-- img-rounded 图片有6px的圆角 -->
    <img src="img/1.gif" class="img-rounded" alt="">
    <!-- img-circle 圆形图片  -->
    <img src="img/1.gif" class="img-circle" alt="">
    <!-- img-thumbnail 在图片外部添加边框并设置4px的内边距 -->
    <img src="img/1.gif" class="img-thumbnail" alt="">

    <div style="width: 200px; height: 200px; background: #ff0000;">
        <img src="img/2.gif" alt="">
    </div>
    <div style="font-size: 0;">
        <img src="img/01.jpg" alt="">
    </div>

    <div>
        <!-- img-responsive 将图片变成响应式图片 -->
        <img src="img/banner.jpg" class="img-responsive" alt="">
    </div>


</body>

</html>

day02-02-栅格系统

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

<head>
    <meta charset="UTF-8">
    <!-- 
        charset="UTF-8"  国际通用编码格式 
        charset="GB2312" 中文编码格式（百度在用）
    -->
    <!-- 如果用ie浏览器打开优先使用edge浏览器内核渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 移动端项目 name="viewport" 必须写上 
        width=device-width  网页的宽度等于设备的宽度
        initial-scale=1.0   网页初始缩放比例 1:1
        maximum-scale=1  最大缩放比例
        user-scalable=no  禁止用户缩放   yes允许用户放大或者缩小网页
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>

<body>
    <!-- container  固定宽度  默认1170 左右各15px的内边距 -->
    <div class="container">
        <img src="img/1.gif" alt="">
    </div>
    <!-- container-fluid 宽度100%  左右各15px的内边距-->
    <div class="container-fluid">
        <img src="img/1.gif" alt="">
    </div>

    <div class="container">
        <!-- row 定义行的 -->
        <div class="row">
            <!-- col 定义列---随着屏幕的大小自动分配最多12列
                col分为四种屏幕形式
                1、大屏幕    width>1200         col-lg-*   *就是数字   12/*=?   ?就代表是一行多少列  12/4=3  col-lg-4
                2、中等屏幕  1200>width>992     col-md-*   *就是数字   12/*=?   ?就代表是一行多少列  12/3=4  col-md-3
                3、小屏幕    992>width>768      col-sm-*   *就是数字   12/*=?   ?就代表是一行多少列  12/6=2  col-sm-6
                4、超小屏幕  width<768          col-xs-*   *就是数字   12/*=?   ?就代表是一行多少列  12/6=1  col-xs-6 
            -->
            <div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">1</div>
            <div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">2</div>
            <div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">3</div>
            <div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">4</div>
            <div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">5</div>
            <div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">6</div>
        </div>
    </div>
    <!-- 还可以按照比例划分 -->
    <div class="container">
        <div class="row">
            <div class="col-lg-2">左边</div>
            <div class="col-lg-10">
                <div class="row">
                    <div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">1</div>
                    <div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">2</div>
                    <div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">3</div>
                    <div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">4</div>
                    <div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">5</div>
                    <div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">6</div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

day02-03-辅助类

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

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

</head>

<body>
    <!-- 情景文本色 -->
    <p class="text-muted">柔和灰色</p>
    <p class="text-primary">主要蓝色</p>
    <p class="text-info">信息蓝色</p>
    <p class="text-success">成功绿色</p>
    <p class="text-warning">警告黄色</p>
    <p class="text-danger">危险红色</p>

    <!-- 情景背景色 -->
    <p class="bg-primary">主要蓝色</p>
    <p class="bg-info">信息蓝色</p>
    <p class="bg-success">成功绿色</p>
    <p class="bg-warning">警告黄色</p>
    <p class="bg-danger">危险红色</p>

    <!-- 关闭按钮会自动跑到盒子的右边 -->
    <div class="container">
        <button type="button" class="close">x</button>
    </div>

    <!-- bootstrap中的三角符号和自定义的三角符号 -->
    <span class="caret"></span>
    <style>
        .sanjiao {
            display: block;
            width: 0;
            height: 0;
            border: 20px solid #ff0000;
            border-left-color: transparent;
            border-right-color: transparent;
            border-top-color: transparent;
            border-top: 0;
        }
    </style>
    <span class="sanjiao"></span>

    <!-- 快速浮动 -->
    <div class="pull-left">左浮动</div>
    <div class="pull-right">右浮动</div>

    <!-- 清除浮动 -->
    <div class="clearfix"></div>
    <!-- 块级居中 -->
    <div class="center-block text-center" style="width:200px;background:#ff0000">块级居中</div>

    <!-- 显示和隐藏 -->
    <div class="hidden">隐藏</div>
    <div class="hide">隐藏</div>

    <!-- show 显示  display:block !important  将css优先级提到最高，高过了行内样式-->
    <div style="display: none;" class="show">显示</div>

    <!-- 辅助工具 -->
    <!-- hidden-xs 在超小屏幕上隐藏 display: none !important;-->
    <div class="hidden-xs">能不能看到我呢?</div>

    <!-- .visible-xs-block 在超小屏幕显示 display: block !important;-->
    <div style="display:none" class="visible-xs-block">在吗？</div>
</body>

</html>

day02-04-图标菜单

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

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

<body>
    <i class="glyphicon glyphicon-star-empty text-primary"></i>
    <i class="glyphicon glyphicon-upload text-danger"></i>
    <button class="btn btn-default">
        上传
        <i class="glyphicon glyphicon-upload"></i>
    </button>
    <button class="btn btn-primary">
        上传
        <i class="glyphicon glyphicon-upload"></i>
    </button>
    <button class="btn btn-danger">
        上传
        <i class="glyphicon glyphicon-upload"></i>
    </button>
</body>

</html>

day02-05-下拉菜单

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

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

<body>
    <!-- 点击一个元素或者按钮，将隐藏的列表显示处理
        需要触发行为的时候要引入jq和bootstrap.js
        jq的版本在1.9以上
    -->
    <div class="dropdown">
        <button class="btn btn-primary" data-toggle="dropdown">
            下拉菜单
            <!-- caret 三角符号 -->
            <span class="caret"></span>
        </button>

        <!-- dropdown-menu-right  菜单靠右对齐
             dropdown-menu-left   默认左对齐
        -->
        <ul class="dropdown-menu dropdown-menu-right">
            <!-- dropdown-header 设置标题 -->
            <li class="dropdown-header">
                标题
            </li>
            <!-- divider 设置菜单的分割线 -->
            <li class="divider"></li>
            <li>
                <a href="">首页</a>
            </li>
            <li class="divider"></li>
            <li>
                <a href="">分类页</a>
            </li>
            <li class="divider"></li>
            <li>
                <a href="">新闻页</a>
            </li>
        </ul>
    </div>

    <div class="dropup">
        <button class="btn btn-primary" data-toggle="dropdown">
            下拉菜单
            <!-- caret 三角符号 -->
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li>
                <a href="">首页</a>
            </li>
            <li>
                <a href="">分类页</a>
            </li>
            <li>
                <a href="">新闻页</a>
            </li>
        </ul>
    </div>

    <!-- open 打开隐藏的菜单 -->
    <div class="dropdown open">
        <button class="btn btn-primary" data-toggle="dropdown">
            下拉菜单
            <!-- caret 三角符号 -->
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <!-- disabled 表示禁用 -->
            <li class="disabled">
                <a href="">首页</a>
            </li>
            <li>
                <a href="">分类页</a>
            </li>
            <li>
                <a href="">新闻页</a>
            </li>
        </ul>
    </div>
</body>

</html>

day02-06-按钮组组件

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

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

<body>
    <!-- 按钮组组件 -->
    <div class="btn-group">
        <button class="btn btn-default">上一页</button>
        <button class="btn btn-default">1</button>
        <button class="btn btn-default">2</button>
        <button class="btn btn-default">3</button>
        <button class="btn btn-default">下一页</button>
    </div>
    <!-- 将多个按钮组组合在一起 -->
    <div class="btn-toolbar">
        <div class="btn-group">
            <button class="btn btn-default">上一页</button>
            <button class="btn btn-default">1</button>
            <button class="btn btn-default">2</button>
            <button class="btn btn-default">3</button>
            <button class="btn btn-default">下一页</button>
        </div>
        <div class="btn-group">
            <button class="btn btn-default">上一页</button>
            <button class="btn btn-default">1</button>
            <button class="btn btn-default">2</button>
            <button class="btn btn-default">3</button>
            <button class="btn btn-default">下一页</button>
        </div>
    </div>
    <!-- btn-group-lg 大的 -->
    <div class="btn-group btn-group-lg">
        <button class="btn btn-default">上一页</button>
        <button class="btn btn-default">1</button>
        <button class="btn btn-default">2</button>
        <button class="btn btn-default">3</button>
        <button class="btn btn-default">下一页</button>
    </div>
    <div class="btn-group">
        <button class="btn btn-default">上一页</button>
        <button class="btn btn-default">1</button>
        <button class="btn btn-default">2</button>
        <button class="btn btn-default">3</button>
        <button class="btn btn-default">下一页</button>
    </div>
    <!-- btn-group-sm 小的 -->
    <div class="btn-group btn-group-sm">
        <button class="btn btn-default">上一页</button>
        <button class="btn btn-default">1</button>
        <button class="btn btn-default">2</button>
        <button class="btn btn-default">3</button>
        <button class="btn btn-default">下一页</button>
    </div>
    <!-- btn-group-xs 超小的 -->
    <div class="btn-group btn-group-xs">
        <button class="btn btn-default">上一页</button>
        <button class="btn btn-default">1</button>
        <button class="btn btn-default">2</button>
        <button class="btn btn-default">3</button>
        <button class="btn btn-default">下一页</button>
    </div>


    <div class="btn-group btn-group">
        <button class="btn btn-default">上一页</button>
        <button class="btn btn-default">1</button>
        <button class="btn btn-default">2</button>
        <button class="btn btn-default">3</button>
        <button class="btn btn-default">下一页</button>
        <div class="btn-group">
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                跳转到
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="">首页</a></li>
                <li><a href="">第10页</a></li>
                <li><a href="">尾页</a></li>
            </ul>
        </div>
    </div>

    <!-- btn-group-vertical 设置按钮组垂直排列 -->
    <div class="btn-group-vertical">
        <button class="btn btn-default">上一页</button>
        <button class="btn btn-default">1</button>
        <button class="btn btn-default">2</button>
        <button class="btn btn-default">3</button>
        <button class="btn btn-default">下一页</button>
    </div>
    <!-- btn-group-justified 按钮组两端对齐 -->
    <div class="btn-group-justified">
        <div class="btn-group">
            <button class="btn btn-default">上一页</button>
        </div>
        <div class="btn-group">
            <button class="btn btn-default">1</button>
        </div>
        <div class="btn-group">
            <button class="btn btn-default">尾页</button>
        </div>
    </div>
    <!-- 群组按钮下拉菜单 -->
    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            下拉菜单
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li>首页</li>
            <li>资讯</li>
            <li>产品</li>
            <li>关于</li>
        </ul>

    </div>
    <!-- 分裂式按钮下拉菜单 -->
    <div class="btn-group">
        <button class="btn btn-default">下拉菜单</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li>首页</li>
            <li>资讯</li>
            <li>产品</li>
            <li>关于</li>
        </ul>

    </div>
</body>

</html>

day02-07-输入框组件

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

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

<body>
    <!-- input-group-lg 大的 -->
    <div class="input-group input-group-lg">
        <span class="input-group-addon">￥</span>
        <input type="text" class="form-control">
        <span class="input-group-addon">元</span>
    </div>
    <!-- 正常的 -->
    <div class="input-group">
        <span class="input-group-addon">￥</span>
        <input type="text" class="form-control">
        <span class="input-group-addon">元</span>
    </div>
    <!-- input-group-sm 小的 -->
    <div class="input-group input-group-sm">
        <span class="input-group-addon">￥</span>
        <input type="text" class="form-control">
        <span class="input-group-addon">元</span>
    </div>
    <!-- 左侧使用复选框和单选框 -->
    <div class="input-group">
        <span class="input-group-addon">
            <input type="checkbox">
        </span>
        <input type="text" class="form-control">
    </div>

    <div class="input-group">
        <span class="input-group-addon">
            <input type="radio">
        </span>
        <input type="text" class="form-control">
    </div>

    <div class="input-group">
        <span class="input-group-btn">
            <button class="btn btn-default">按钮</button>
        </span>
        <input type="text" class="form-control">
    </div>

    <div class="input-group">
        <span class="input-group-btn">
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                下拉菜单
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li class="dropdown-header">网站导航</li>
                <li><a href="#">首页</a></li>
                <li><a href="#">资讯</a></li>
                <li class="divider"><a href="#">产品</a></li>
                <li class="disabled"><a href="#">关于</a></li>
            </ul>
        </span>
        <input type="text" class="form-control">
    </div>
</body>

</html>

day02-08-导航组件

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

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

<body>
    <!-- 基础导航组件 -->
    <!-- li里的a标签必须加 -->
    <ul class="nav nav-tabs">
        <li><a href="">首页</a></li>
        <li class="active"><a href="">分类</a></li>
        <li><a href="">购物车</a></li>
        <li><a href="">我的</a></li>
    </ul>
    <!-- 胶囊式导航 -->
    <ul class="nav nav-pills">
        <li><a href="">首页</a></li>
        <li class="active"><a href="">分类</a></li>
        <li><a href="">购物车</a></li>
        <li><a href="">我的</a></li>
    </ul>
    <!-- 垂直胶囊导航 -->
    <ul class="nav nav-pills nav-stacked">
        <li><a href="">首页</a></li>
        <li class="active"><a href="">分类</a></li>
        <li><a href="">购物车</a></li>
        <li><a href="">我的</a></li>
    </ul>
    <!-- 两端对齐的胶囊导航 -->
    <ul class="nav nav-pills nav-justified">
        <li><a href="">首页</a></li>
        <li class="active"><a href="">分类</a></li>
        <li><a href="">购物车</a></li>
        <li><a href="">我的</a></li>
    </ul>

    <ul class="nav nav-tabs nav-justified">
        <li class="disabled"><a href="">首页</a></li>
        <li class="active"><a href="">分类</a></li>
        <li><a href="">购物车</a></li>
        <li><a href="">我的</a></li>
    </ul>
    <!-- 带有下拉菜单的导航 -->
    <ul class="nav nav-tabs">
        <li><a href="">首页</a></li>
        <li class="dropdown">
            <a href="" class="dropdown-toggle" data-toggle="dropdown">
                分类
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="">男装女装</a></li>
                <li><a href="">家用电器</a></li>
                <li><a href="">其他</a></li>
            </ul>
        </li>
        <li><a href="">购物车</a></li>
        <li><a href="">我的</a></li>
    </ul>
</body>

</html>

day02-09-导航条组件

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

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

<body>
    <!-- nav 导航  bar条  navbar 导航条 -->
    <!-- navbar-default 默认样式 -->
    <!-- navbar-fixed-bottom 将导航条固定在底部 -->
    <!-- navbar-fixed-top 将导航条固定在顶部 -->
    <nav class="navbar navbar-default navbar-fixed-bottom">
        <!-- container是一个容器  width=1170  padding-left=15 padding-right=15 -->
        <div class="container">
            <!-- navbar-header 设置导航条的标题 -->
            <div class="navbar-header">
                <!-- navbar-brand 设置一个小的品牌logo -->
                <a href="" class="navbar-brand">LOGO</a>
            </div>
            <!-- navbar-right 导航条列表靠右对齐 
                 navbar-left  默认左对齐
            -->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="">首页</a></li>
                <!-- active选中 -->
                <li class="active"><a href="">首页</a></li>
                <li><a href="">首页</a></li>
                <li><a href="">首页</a></li>
                <li>
                    <form action="" class="navbar-form navbar-left">
                        <div class="input-group">
                            <input type="text" class="form-control">
                            <span class="input-group-btn">
                                <button type="submit" class="btn btn-default">提交</button>
                            </span>
                        </div>
                    </form>
                </li>
            </ul>

        </div>
    </nav>

    <!-- navbar-inverse反色 -->
    <!-- navbar-static-top 静态导航，和页面等宽的导航条，去掉了圆角 -->
    <nav class="navbar navbar-inverse navbar-static-top"> </nav>
</body>

</html>
版权声明：本文为Yan9_9原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。