bootstrap页面排版和栅格处理

如何在InDesign中设置页面网格以提高排版效率？ #生活技巧# #数码产品使用技巧# #设计软件使用技巧#

1.下载编译后的bootstrap导入css和js，导入jQuery要在bootstrap.min.js上；

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge">

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

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

<script src="src/js/jquery-1.11.1.min.js"></script>

<script src="bootstrap/js/bootstrap.min.js"></script>

2.导航条自作；

<nav class="navbar navbar-default">

<ul class="nav navbar-nav">

<li class="active"><a href="#">python</a></li>

<li><a href="#">java</a></li>

</ul>

</nav>

3.点击导航条出下拉列表；

role="navigation"有助于增加可访问性，class="caret"下角标

<a class="navbar-brand" href="#"><img src="src/img/logo.png"/></a>

<b class="caret"></b>

<nav class="navbar navbar-default">

<ul class="nav navbar-nav">

<li class="active"><a href="#">iOS</a></li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">SVN <b class="caret"></b></a>

<ul class="dropdown-menu">

<li>next</li>

</ul>

</li>

</ul>

</nav>

4.container和container-fluid区别，在不同屏幕大小中观察变化，container-fluid大小永远都是父元素的100%，container会随着屏幕大小变化；

<div class="container-fluid">container-fluid</div>

<div class="container">container</div>

5.在栅格中进行排版

首先在外面div中写class=‘row’，表示要将父级宽度分成12分，col-sm-4:平板尺寸、col-md-4:电脑尺寸、col-xs-4:手机尺寸、col-lg-2:超大尺寸；

移动：col-md-push-2: 右移动2列、col-md-pull-2:左移动2列；col-md-offset-3:向右偏移3列；

<div class="row">

<div class="col-sm-4 col-md-4 col-xs-6 col-lg-2">

内容1

</div>

<div class="col-sm-8 col-md-8 col-xs-6 col-lg-10">

内容2

</div>

</div>

6.class="clearfix"：清除浮动； class="thumbnail"：缩略图 ; class="hidden-lg":在超大设备中隐藏；

<div class="clearfix"></div>

<a href="#" class="thumbnail"><img src="src/img/ydyl_logo.png" alt="通用的占位符缩略图"></a>

<div class="hidden-lg hidden-xs hidden-md"></div>

7.分页

<ul class="pagination">

<li><a href="#">&laquo;</a></li>

<li><a href="#">1</a></li>

<li><a href="#">2</a></li>

<li><a href="#">3</a></li>

<li><a href="#">4</a></li>

<li><a href="#">5</a></li>

<li><a href="#">&raquo;</a></li>

</ul>

8.show-xs:在低于786像素设备中显示、hidden-md:大于992像素中隐藏；

<ul class="hid_ul show-xs hidden-md hidden-sm hidden-lg">

<li><a href="#">GIS平台</a></li>

<li><a href="#">数据产品</a></li>

<li><a href="#">软件产品</a></li>

<li><a href="#">硬件产品</a></li>

</ul>

9.缩略图制作；

<div class="row">

<div class="col-sm-3 col-md-3 col-xs-4 col-lg-3">

<a href="#" class="thumbnail prodect">

<img src="src/img/product2.png"/>

</a>

</div>

<div class="col-sm-9 col-md-9 col-xs-8 col-lg-9">

<h4>生物多样性</h4>

</div>

</div>

10.媒体查询；

@media only screen and (max-width: 991px){

body{background:red;}

}

@media screen and (max-width: 1024px) {

ul li {float:right;}

}

注：这些都是本人实际中使用过的；勤奋是你生命的密码，能译出你一部分壮丽的史诗；

网址：bootstrap页面排版和栅格处理 https://www.yuejiaxmz.com/news/view/414150

相关内容

使用Bootstrap和媒体查询构建响应式网页实践
沥青格栅
格栅上装饰什么好？格栅装饰指南
Bootstrap的一些笔记——modal
Fences 4 新版来袭，栅栏式桌面整理快速搞定，从此桌面不再乱糟糟[Windows]
『上海三维复合排水网』生产厂家=《沥青路面土工格栅》批发价
『通什植草格』生产厂家=《PP焊接土工格栅》使用方法
生活咨询网开发
桌面整理助手，有没有能自动整理桌面的桌面软件
『衡水硅晶网』生产厂家=《钢塑土工格栅》品牌

随便看看