vue结合bootstrap搭建首页

迈不过友情╰ 2021-07-25 02:57 334阅读 0赞

**目录**

一 点睛

1 Bootstrap官网

2 基本模板

二 页面设计

三 代码

四 效果

--------------------

# 一 点睛 #

## 1 Bootstrap官网 ##

[https://www.bootcss.com/][https_www.bootcss.com]

## 2 基本模板 ##

[https://v3.bootcss.com/getting-started/\#template][https_v3.bootcss.com_getting-started_template]

# 二 页面设计 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

# 三 代码 #

<!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="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
        
        
        
        <style>
            .div1{
                margin-top: 10px;
                margin-bottom: 10px;
            }
            .product{
                width: 300px;
                height: 360px;
                border: 1px solid black;
                display: inline-block;
                margin-left: 60px;
                margin-top: 20px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
    <div class="container" id="app">
        
        <div class="div1">
            <ul class="nav nav-pills">
                <li v-for="nav in navigateDate" role="presentation" class="active"><a href="#">{
       {nav}}</a> </li>
            </ul>
        </div>
        
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            </ol>
    
            
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img width="100%" line-height="0" :src="banner_img[0]" alt="...">
                    <div class="carousel-caption">
                    </div>
                </div>
                <div class="item">
                    <img width="100%" height="100%" :src="banner_img[1]" alt="...">
                    <div class="carousel-caption">
                    </div>
                </div>
            </div>
    
            
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        
        <div>
            <div>
                <div v-for="product in products" class="product">
                    <img :src="product.pimg" width="100%">
                    <br>
                    <p>商品名：{
       {product.pname}}</p>
                    <p>价格：{
       {product.price}}</p>
                </div>
    
            </div>
    
        </div>
    
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                navigateDate:[
                        '首页','最新商品','搜索','购物车','我的订单'
                ],
                banner_img:[
                    "../static/img/1.jpg",
                    "../static/img/2.jpg"
                ],
                products:[
                    {
                        pname:'华为',
                        pimg:'../static/img/huawei.jpg',
                        price:4000
                    },
                    {
                        pname:'小米',
                        pimg:'../static/img/xiaomi.jpg',
                        price:5000
                    },
                    {
                        pname:'iphone',
                        pimg:'../static/img/iphone.jpg',
                        price:5000
                    }
                ]
            }
        })
    </script>
    </body>
    </html>

# 四 效果 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

[https_www.bootcss.com]: https://www.bootcss.com/
[https_v3.bootcss.com_getting-started_template]: https://v3.bootcss.com/getting-started/#template
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/38d61131fd2444b59412654dc5778491.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/08758252839a4c12aa8794e36a107596.png