bootstrap自适应视频播放详情页内容页效果-html代码-BFW代码库

bootstrap自适应视频播放详情页内容页效果

代码语言：html

代码描述：bootstrap自适应视频播放详情页内容页效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/bulma-0.3.1.css">
    <style>
        body {
            font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
        }

        .has-text-muted {
            color: #95A5A6;
        }

        .spacer {
            height: 20px;
        }

        .nav-left .searchbox {
            margin-top: 10px;
        }

        .avatar-photo {
            border-radius: 50px;
        }

        .video-title {
            font-size: 1.5em;
            font-weight: 500;
        }

        .box.video-description {
            padding: 20px 20px 5px 20px;
        }

        .video-description-more {
            font-size: 12px;
            font-weight: bold;
            text-transform: uppercase;
            margin-top: -15px;
        }

        .related-card .video-title {
            display: block;
            font-size: 13px;
            font-weight: 500;
        }

        .related-card .video-account, .related-card .video-views {
            display: block;
            font-size: 11px;
            color: #95A5A6;
        }

        .related-card img {
            height: 68px;
        }

        .related-card.media .media, .related-card.media + .media {
            border-top: none;
        }

        .related-list .autoplay {
            padding-bottom: 10px;
        }

        .related-list .autoplay .autoplay-title {
            font-weight: bold;
        }

        .related-list .autoplay .autoplay-toggle {
            float: right;
        }

        .related-list .autoplay .autoplay-toggle .fa {
            font-size: 13px;
            padding: 5px 10px;
        }
    </style>

</head>
<body translate="no">

    <nav class="nav has-shadow" id="top">
        <div class="container">
            <div class="nav-left">
                <a class="nav-item" href="/">
                    <img src="http://repo.bfw.wiki/bfwrepo/icon/5d834ea6be5b9.png" alt="Description">
                </a>
                <p class="control has-addons searchbox">
                    <input class="input" type="text" placeholder="Search videotube...">
                    <a class="button is-dark">
                        &nbsp; <i class="fa fa-search"></i> &nbsp;
                    </a>
                </p>
            </div>
            <span class="nav-toggle">
                <span></span>
                <span></span>
                <span></span>
            </span>
            <div class="nav-right nav-menu">
                <span class="nav-item">
                    <a class="button is-default is-bold">
                        Upload
                    </a>
                </span>
                <a class="nav-item is-tab">
                    <i class="fa fa-bell-o"></i>
                </a>
                <a class="nav-item is-tab">
                    <img src="https://placehold.it/64x64" class="avatar-photo">
                </a>
            </div>
        </div>
    </nav>
    <div class="spacer"></div>
    <div class="container">
        <div class="columns">
            <div class="column is-8">
                <div class="image">
                    <img src="http://repo.b.........完整代码请登录后点击上方下载按钮下载查看