title: 初识Bootstrap框架
abbrlink: 22186
date: 2022-03-05 11:37:22
tags:

Bootstrap框架

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

框架下载Bootstrap中文网

引用

<meta name="viewport" content="width=device-width,initial-scale=1">
<!--viewport 主要用于实现对不同屏幕分辨率的支持-->

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<!--bootstrap 基于jquery 先引用jquery  再引用js-->

简单的布局

<div class="container">
		<div class="row">
			<!--默认平分12份 自由按份组合  行row 列col-->
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
		</div>
		<!--左8 右4-->
		<div class="row">
			<div class="col-md-8">col-md-8</div>
			<div class="col-md-4">col-md-4</div>
		</div>
		<!--平分3份-->
		<div class="row">
			<div class="col-md-4">col-md-4</div>
			<div class="col-md-4">col-md-4</div>
			<div class="col-md-4">col-md-4</div>

		</div>
		<!--平分2份-->
		<div class="row">
			<div class="col-md-6">col-md-6</div>
			<div class="col-md-6">col-md-6</div>


		</div>
	</div>

标签：md,框架,菜鸟,Bootstrap,初识,col
From： https://www.cnblogs.com/maimaimai/p/17411103.html