Bootstrap部分---环境安装及一个可视化的布局；

时间：2024-01-02 16:41:14

一：环境安装*****顺序不可变*****

<head>

如果需要可以设定，移动设备优先

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--1.引入 Bootstrap--->

<link href="../../../bootsrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<!--2.引入 jquery---><!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

<script src="../../../bootsrap/bootstrap-3.3.7-dist/js/jquery-1.11.2.min.js"></script>

<!--3.引入 js-------->

<script src="../../../bootsrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<!--4.引入以下内容，给网格改宽度-------->

<style>

@media (min-width:768px){.container{width:100%}}

@media (min-width:992px){.container{width:100%}}

@media (min-width:1200px){.container{width:100%}}

*{ margin:0px auto; padding:0px;}

</style>

</head>

总结：

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<!--1.引入 Bootstrap--->

<link href="../../../bootsrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<!--2.引入    jquery--->

<script src="../../../bootsrap/bootstrap-3.3.7-dist/js/jquery-1.11.2.min.js"></script>

<!--3.引入 js-------->

<script src="../../../bootsrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<style>

<!--4.引入以下内容，给网格改宽度-------->

@media (min-width:768px){.container{width:100%}}

@media (min-width:992px){.container{width:100%}}

@media (min-width:1200px){.container{width:100%}}

*{ margin:0px auto; padding:0px;}

</style>

</head>

可视化的一个布局：在一个div class=container中，一个大框（分别占用2,4,6）大框中间的6格框（4,4,4） 左边的4格（8,2）中间4格（6,6）右边4格（12）

Bootstrap部分---环境安装及一个可视化的布局；

 

相关文章