<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="iconfont/iconfont.css">
<style>
.iconfangdajing{margin-right: 4px; font-size:20px; position: relative; top: 4px;}
.box200-220{ width:200px; height:220px; background:gray;}
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-between align-items-center pt-2 px-3">
<div class="clo-auto">
<a href="" class="text-muted"> Subscribe</a>
</div>
<div class="clo-auto">
<a href="" class="text-dark text-decoration-none"><h2>Large</h2></a>
</div>
<div class="clo-auto">
<a href="" class="text-muted text-decoration-none">
<i class="iconfont iconfangdajing "></i></a>
<a href="" class="text-muted btn btn-sm btn-outline-secondary">Sign up</a>
</div>
</div>
<div class="border-bottom mt-2"></div>
<div class="d-flex justify-content-between py-1 mb-2 overflow-auto">
<a href="#" class="text-muted p-2">World</a>
<a href="#" class="text-muted p-2">U.S.</a>
<a href="#" class="text-muted p-2">Technology</a>
<a href="#" class="text-muted p-2">Culture</a>
<a href="#" class="text-muted p-2">Business</a>
<a href="#" class="text-muted p-2">Politics</a>
<a href="#" class="text-muted p-2">Opinion</a>
<a href="#" class="text-muted p-2">Science</a>
<a href="#" class="text-muted p-2">Health</a>
<a href="#" class="text-muted p-2">Style</a>
<a href="#" class="text-muted p-2">Travel</a>
</div>
<div class="jumbotron bg-dark text-white p-2">
<div class="col-md-6 m-3">
<h1 class="display-4 font-italic ">Title of a longer featured blog post</h1>
<p class="lead">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
<a href="#" class="text-white font-weight-bold">Continue reading...</a>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div class="row border shadow-sm rounded overflow-hidden no-gutters">
<div class="col p-3">
<strong class=" d-inline-block mb-2 text-primary">World</strong>
<h3 class="mb-0">Featured post</h3>
<div class="mb-1 text-muted">Nov 12</div>
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="stretched-link">Continue reading</a>
</div>
<div class="col-auto d-none d-md-block">
<a href="#"><div class="box200-220"></div></a>
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="row border shadow-sm rounded no-gutters overflow-hidden">
<div class="col p-3">
<strong class="d-inline-block mb-2 text-primary">World</strong>
<h3 class="mb-0">Featured post</h3>
<div class="mb-1 text-muted">Nov 12</div>
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="stretched-link">Continue reading</a>
</div>
<div class="col-auto d-none d-md-block">
<a href="#"><div class="box200-220"></div></a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h3 class="font-italic border-bottom py-4">From the Firehose</h3>
<div class="mt-4">
<h2>Sample blog post</h2>
<p>January 1, 2014 by <a href="#">Mark</a></p>
<p class="border-bottom pb-4">This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Etiam porta <em>sem malesuada</em> magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<div class="mt-4">
<h2>Sample blog post</h2>
<p>January 1, 2014 by <a href="#">Mark</a></p>
<p class="border-bottom pb-4">This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Etiam porta <em>sem malesuada</em> magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<div class="mt-4">
<a href="#" class="btn btn-outline-primary rounded-pill">Older</a>
<a href="#" class="btn btn-outline-secondary disabled rounded-pill">Newer</a>
</div>
</div>
<div class="col-md-4">
<div class="bg-light rounded p-4 mt-4">
<h3 class="font-italic">About</h3>
<p>Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<div class="mt-4 ml-md-2">
<h3>Archives</h3>
<ol class="list-unstyled">
<li><a href="#">March 2014</a></li>
<li><a href="#">February 2014</a></li>
<li><a href="#">January 2014</a></li>
<li><a href="#">December 2014</a></li>
<li><a href="#">November 2014</a></li>
<li><a href="#">October 2014</a></li>
<li><a href="#">September 2014</a></li>
<li><a href="#">August 2014</a></li>
<li><a href="#">July 2014</a></li>
<li><a href="#">June 2014</a></li>
</ol>
</div>
<div class="mt-4 ml-md-2">
<h3>Elsewhere</h3>
<ul class="list-unstyled">
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="containder-fluid bg-light text-center p-4 mt-4 text-muted ">
<p class="my-4">Blog template built for <a href="">Bootstrap</a> by <a href="">@mdo.</a></p>
<p><a href="" class="">Back to top</a></p>
</div>
</body>
</html>
1881
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
