bootstrap入门--栅格

最新推荐文章于 2024-10-12 17:14:38 发布

原创最新推荐文章于 2024-10-12 17:14:38 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

学习笔记专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使用Bootstrap快速搭建带有基本样式的网页，并详细解释了Bootstrap栅格系统的使用方法，包括不同设备尺寸下的响应式布局调整。

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

1.Helloword
仍然从伟大的helloword开始，想要实现bootstrap样式的helloword：
1、导入核心库bootstrap.css,或其压缩版bootstrap.min.css。
2、bootstrap基于jQuery因此在引入bootstrap.js之前先要引入jquery。如此环境配置完毕。源代码如下：

<!DOCTYPE html> 
<html> 
<head> 
<title>helloword</title> 
    <meta charset="utf-8"/> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <script src="js/bootstrap.min.js"></script>
 </head> 
 <body>
  <h1>Hello, world!</h1> 
  </body> 
 </html>

2、栅格
bootstrap将每行分为12个栅格，这样div的定义变得更为规范方便，我们不需要自己计算div的大小，只需要决
定给它几个栅格的位置即可。源代码如下：

<div class="container">
     <div class="row"> 
         <div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 10px #444, inset -1px 1px 1px #444;">
          <p>第一列</p> 
          </div> 
          <div class="col-md-6 col-lg-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
          <p>第二列 </p>
           </div>
           </div>
</div>

首先，bootstrap所有的组件都在容器内工作，因此，代码第一行的container是必须声明的。class=”row”表明我要创建行，而我在行里设置了两列，列用class=”col-md-6 col-lg-4”来声明，其中md是设备的大小共有四级：
- xs:超小型设备（移动设备）
- sm:小型设备
- md:中型设备
- lg:大型设备
如此声明实现跨浏览器显示，即兼容不通大小的设备，当我使用的是中型设备那么行被分为6：6的两列，当使用大型设备时行分为4：8的两列。
3、栅格shandow
*box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;”*div阴影设置，inset顾名思义即使插入、使页面有沉入感，两个inset分别对方格左、下，右、上进行设置。前两个px表示边框宽度，第三个表示阴影深度。效果图如下：
大尺寸屏幕效果
这里写图片描述