bootstrap3框架

最新推荐文章于 2024-04-24 15:41:29 发布

aiwujiangjie_job

最新推荐文章于 2024-04-24 15:41:29 发布

阅读量413

点赞数

分类专栏： java集成

java集成专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1、bootstrap自力更生的

2、来自Twitter，是目前最受欢迎的前端框架。Bootstrap是基于html、css、javascript的，它简洁灵活，使得web开发更加快捷。

3、.col-xs-*——栅格列，适用于手机（<768px）;

.col-sm-*——栅格列，适用于平板（≥768px）;

.col-md-*——栅格列，适用于桌面显示器 (≥992px)；

.col-lg-*——栅格列，适用于大桌面显示器(≥1200px)；

.col-md-offset-*——向右偏移列；

.col-md-push-*、.col-md-pull-*——改变列的排序；

4、

[html] view plain copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>CSS全局样式_栅格系统</title>
<link rel="stylesheet" href="bootstrap.min.css" type="text/css">
<style type="text/css">
.row{
margin-bottom: 20px;
}
.row .row{
margin-top:10px;
margin-bottom: 0;
}
[class*="col-"]{
padding-top: 15px;
padding-bottom: 15px;
background-color: rgba(86,61,124,0.15);
border: 1px solid rgba(86,61,124,0.2);
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-1">.col-md-3</div>
</div>
<div class="row">
<div class="col-sm-9">
one
<div class="row">
<div class="col-xs-8">
first
</div>
<div class="col-xs-4">
second
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-9 col-md-push-3">col-md-9</div>
<div class="col-md-3 col-md-pull-9">col-md-3</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
</div>
</body>
</html>