5-9 templates/op_snews_list.tpl

<style>
    img.cover  {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }

    .slide-img {
        width: 100%; 
        object-fit: cover;
    }
    .carousel-caption{    
        background-color: rgba(0,0,0,0.5); 
    }
    #carousel-example-generic{
        position:relative;    
        top: -22px;
    }
</style>

<div class="row">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <{foreach from=$all_focus key=i item=focus}>
                <div class="item <{if $i==0}>active<{/if}>">
                    <a href="index.php?sn=<{$focus.sn}>">
                        <img src="<{$focus.cover}>" alt="<{$focus.title}>" class="slide-img">
                    </a>
                    <div class="carousel-caption">
                        <h2><{$focus.title}></h2>
                        <{$focus.content}>
                    </div>
                </div>
            <{/foreach}>
        </div>

        <!-- Controls -->
        <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 class="container">
    <h2>文章列表</h2>
    <div class="row">
        <{foreach from=$all key=i item=snews}>
            <div class="col-sm-4">
                <a href="index.php?sn=<{$snews.sn}>">
                    <{if $snews.cover}>
                        <img src="<{$snews.cover}>" alt="<{$snews.title}>" class="cover">    
                    <{else}>
                        <img src="https://picsum.photos/400/200?image=<{$i}>" alt="<{$snews.title}>" class="cover">
                    <{/if}>
                </a>
                <{$snews.title}>
            </div>  

        <{foreachelse}>
            <div class="alert alert-danger">
                尚無內容
            </div>
        <{/foreach}>
    </div>

    <{$bar}>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $(".slide-img").css('height', $(window).height()-$('.navbar').height());
    });
    $(window).resize(function () {
        $(".slide-img").css('height', $(window).height()-$('.navbar').height());
    });
</script>