码迷,mamicode.com
首页 > 其他好文 > 详细

初识bootstrap框架栅格系统

时间:2019-09-30 12:35:02      阅读:110      评论:0      收藏:0      [点我收藏+]

标签:meta   container   play   boot   width   移动   定义   ice   outline   

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,user-scalable=no,
initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"/>
<!--meta标签的加入是适配移动端的设置,标签中具体的含义查-->
<link rel="stylesheet" href="bootstrap.min.css"/>
<!-- 引入bootstrap的css-->
<style>
body{
margin-top: 30px;
}
div{
outline: 1px solid red;
}
</style>
<!-- 这里的样式将覆盖掉bootstrap的css里面的样式,位置必须放在bootstrap的引入后面-->
<title></title>
</head>
<body>
<div class="container"><!-- 栅格系统的固定写法,将其他的都放在这个容器里面-->
<div class="row"><!-- 定义行row-->
<div class="col-md-1">col-md-1</div><!--col代表列共12列 md代表中屏,-1代表占12份中的一份-->
</div>
</div>
<script src="jquery-1.10.2.min.js"></script>
<!-- 引入jquery的js-->
<script src="bootstrap.min.js"></script>
<!--引入bootstrap框架js-->
</body>
</html>

浏览器运行后可查看其源代码
技术图片

初识bootstrap框架栅格系统

标签:meta   container   play   boot   width   移动   定义   ice   outline   

原文地址:https://www.cnblogs.com/pere/p/11612072.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!