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">
<i class="fa fa-search"></i>
</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.bfw.wiki/bfwrepo/image/5efe9ad509232.png">
</div>
<br>
<div class="box video-meta">
<div class="video-title">
A video title would go here
</div>
<br>
<article class="media">
<div class="media-left">
<figure class="image is-64x64">
<img src="http://repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_128,h_128,/quality,q_90" />
</figure>
</div>
<div class="media-content">
<div class="content">
<div class="columns">
<div class="column is-6">
<p>
<strong>jsmith</strong>
<br>
<a href="#" class="button is-danger">Subscribe</a>
</p>
</div>
<div class="column is-6">
<nav class="nav">
<div class="container">
<div class="nav-right">
<a class="nav-item is-tab is-active">
<span class="title is-4">124 304 views</span>
</a>
</div>
</div>
</nav>
</div>
</div>
<nav class="level">
<p class="level-item has-text-left">
<a class="button is-default">
<span class="icon"><i class="fa fa-plus"></i></span> <span>Add to</span>
</a>
<a class="button is-default">
<span class="icon"><i class="fa fa-share"></i></span> <span>Share</span>
</a>
<a class="button is-default">
<span class="icon"><i class="fa fa-ellipsis-h"></i></span> <span>More</span>
</a>
</p>
<p class="level-item has-text-right">
<a class="button is-default"><i class="fa fa-thumbs-up"></i> 5254</a>
<a class="button is-default"><i class="fa fa-thumbs-down"></i> 1</a>
</p>
</nav>
</div>
</div>
</article>
</div>
<div class="box video-description">
<p>
<strong>Uploaded on August 1, 2016</strong>
</p>
<p>
Lorum ipsum and friends at MTV unplugged playing Long May You Run.
</p>
<hr>
<p class="has-text-centered has-text-muted video-description-more">
Show More
</p>
</div>
<div class="box">
<article class="media">
<figure class="media-left">
<p class="image is-64x64">
<img src="http://repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_128,h_128,/quality,q_90" />
</p>
</figure>
<div class="media-content">
<p class="control">
<textarea class="textarea" placeholder="Add a comment..."></textarea>
</p>
<nav class="level">
<div class="level-left">
<div class="level-item">
<a class="button is-info">Post comment</a>
</div>
</div>
<div class="level-right">
<div class="level-item">
<label class="checkbox">
<input type="checkbox"> Press enter to submit
</label>
</div>
</div>
</nav>
</div>
</article>
<hr>
<article class="media">
<figure class="media-left">
<p class="image is-64x64">
<img src="http://repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_128,h_128,/quality,q_90" />
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>Barbara Middleton</strong> <small> · 3 hrs</small>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros lacus, nec ultricies elit blandit non. Suspendisse pellentesque mauris sit amet dolor blandit rutrum. Nunc in tempus turpis.
<br>
<small><a>Like</a> · <a>Reply</a></small>
</p>
</div>
</div>
</article>
<div class="spacer"></div>
<article class="media">
<figure class="media-left">
<p class="image is-64x64">
<img src="http://repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_128,h_128,/quality,q_90" />
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0