bootstrap入门--栅格

来源：互联网发布：version mac 破解版编辑：程序博客网时间：2024/05/16 04:46

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表示边框宽度，第三个表示阴影深度。效果图如下：
大尺寸屏幕效果
这里写图片描述

0 0