8.学习html笔记-bs

最新推荐文章于 2025-05-23 14:40:52 发布

贾贝贝

最新推荐文章于 2025-05-23 14:40:52 发布

阅读量142

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/weixin_43333826/article/details/84889070

js 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍如何使用Bootstrap框架进行网页布局，包括导航、网格系统、分页和按钮等组件的使用方法，通过实例展示如何构建响应式网页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bootstrap 的简单使用

在https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip 下载开发版使用的bootstrap
使用bootstrap.js之前必须引用jQuery库

导航样式

class=“nav navbar-nav”

网格12

class=“row”
- class=“col-md-4”
- class=“col-md-4”
- class=“col-md-4”

分页

class=“pagination”

徽章

class=“badge”

jumbotron、media

按钮btn

<body>
	
<header class="container jumbotron">
	<div class="page-header"><h3>Python程序员<small> 基本信息</small></h3></div>
</header>

<nav class="container jumbotron ">
	<ul class="nav nav-pills">
		<li><a href="#">基本信息</a></li>
		<li><a href="#">经验</a></li>
		<li><a href="#">能力</a></li>
		<li><a href="#">其他</a></li>
	</ul>
</nav>

<div class="container">
	<div class="row">
	<aside class="col-md-3">
		<ul class="nav">
			<li><a href="#">python</a></li>
			<li><a href="#">web</a></li>
			<li><a href="#">jun</a></li>
			<li><a href="#">其他</a></li>
		</ul>
	</aside>
	
	<article class="col-md-9">
		<section class="jumbotron page-header" style="margin:auto 0">
			<h2>section</h2>
			<p>内容不重要啦</p>
		</section>
		<section class="jumbotron page-header" >
			<h2>section</h2>
			<p>内容不重要啦</p>
		</section>
	</article>
	</div>
</div>

<footer class="container ">
	<div class="jumbotron row">
	<div class="col-md-3">友情链接</div>
	<div class="col-md-9">网页的底部说明</div>
	</div>
</footer>
</body>

</html>