BootStrap学习

最新推荐文章于 2024-07-20 15:49:14 发布

百川灌河

最新推荐文章于 2024-07-20 15:49:14 发布

阅读量364

点赞数

分类专栏： ☆ BS之旅 ------BootStrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/lcl19970203/article/details/53466411

版权

☆ BS之旅同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

------BootStrap

1 篇文章 0 订阅

订阅专栏

BootStrap：全局css样式、组件、JavaScript插件。

首先，引入事先做好的css文件、fonts文件、js文件。

【栅格系统代码库】：

在title上面写：

<!-- 根据设备宽度，调整缩放比例 -->
		<meta name="viewport" content="width=device-width, initial-scale=1">

在title下面写：

<!-- 引入BootStrap的CSS -->
		<link rel="stylesheet" href="../../css/bootstrap.min.css" />
		<link rel="stylesheet" href="../../css/bootstrap-theme.min.css" />
<!-- 引入JS-->
		<script type="text/javascript" src="../../js/jquery-1.11.3.min.js" ></script>
		<script type="text/javascript" src="../../js/bootstrap.min.js" ></script>

min版本是压缩版的。

【整体代码】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!--
        	作者：2782348490@qq.com
        	时间：2016-12-05
        	描述：根据设备宽度，调整缩放比例
        -->
		<title>栅格系统</title>
		<!--
        	作者：2782348490@qq.com
        	时间：2016-12-05
        	描述：引入Bootstrap的css
        -->
        <link rel="stylesheet" href="../css/bootstrap.min.css" />
        <link rel="stylesheet" href="../css/bootstrap-theme.min.css" />
        <!--
        	作者：2782348490@qq.com
        	时间：2016-12-05
        	描述：引入Bootstra的js文件
        -->
        <script type="text/javascript" src="../js/bootstrap.min.js" ></script>
        <script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
        <!--
        	作者：2782348490@qq.com
        	时间：2016-12-05
        	描述：div的style风格：边界一像素，灰色边框
        -->
        <style>
        	div{
        		border: 1px solid gray;
        	}
        </style>
	</head>
	<body>
		<!--
        	作者：2782348490@qq.com
        	时间：2016-12-05
        	描述：栅格系统代码,他们必须首先放在div类为container的容器中，列数为12
        -->
        <div class="container">
        	<div class="row">
				<div class="col-md-3">111</div>
				<div class="col-md-3">111</div>
				<div class="col-md-3">111</div>
				<div class="col-md-3">111</div>
			</div>
			
			<div class="col-md-8">
				<div class="row">
					<div class="col-md-3">222</div>
					<div class="col-md-3">222</div>
					<div class="col-md-3">222</div>
					<div class="col-md-3">222</div>
				</div>
			</div>
			<div class="col-md-2">111</div>
			<div class="col-md-1">111</div>
			<div class="col-md-1">111</div>
        </div>
        
        <div class="container">
        	<div class="row">
        		<div class="col-md-3 col-sm-6 col-xs-12">
        			<h1>关于我们</h1>
        			<p>秋日，收获的歌，静秋，蓝天一般的灿烂。轻轻道一声：秋日安好!远方的你亦安好如初!此刻，我仿佛听见窗外的风呢喃着心事，九月天的浪漫，正踏过我的指尖，一幅生命的静美图，在灯火阑珊的夜，温暖而璀璨地铺展开来。</p>
        		</div>
        		<div class="col-md-3 col-sm-6 col-xs-12">
        			<h1>友情链接</h1>
        			<p>秋日，收获的歌，静秋，蓝天一般的灿烂。轻轻道一声：秋日安好!远方的你亦安好如初!此刻，我仿佛听见窗外的风呢喃着心事，九月天的浪漫，正踏过我的指尖，一幅生命的静美图，在灯火阑珊的夜，温暖而璀璨地铺展开来。</p>
        		</div>
        		<div class="col-md-3 col-sm-6 col-xs-12">
        			<h1>社会动态</h1>
        			<p>秋日，收获的歌，静秋，蓝天一般的灿烂。轻轻道一声：秋日安好!远方的你亦安好如初!此刻，我仿佛听见窗外的风呢喃着心事，九月天的浪漫，正踏过我的指尖，一幅生命的静美图，在灯火阑珊的夜，温暖而璀璨地铺展开来。</p>
        		</div>
        		<div class="col-md-3 col-sm-6 col-xs-12">
        			<h1>心情札记</h1>
        			<p>秋日，收获的歌，静秋，蓝天一般的灿烂。轻轻道一声：秋日安好!远方的你亦安好如初!此刻，我仿佛听见窗外的风呢喃着心事，九月天的浪漫，正踏过我的指尖，一幅生命的静美图，在灯火阑珊的夜，温暖而璀璨地铺展开来。</p>
        		</div>
        	</div>
        </div>
        
	</body>
</html>

1、带row和不带row的区别：

<div class="container">
        	
				<div class="col-md-3">111</div>
				<div class="col-md-3">111</div>
				<div class="col-md-3">111</div>
				<div class="col-md-3">111</div>
			
			
        </div>

<div class="container">
        	<div class="row">
				<div class="col-md-3">111</div>
				<div class="col-md-3">111</div>
				<div class="col-md-3">111</div>
				<div class="col-md-3">111</div>
			</div>
			
        </div>