使用BootStrap进行响应式布局案例

（1）首先下载BootStrap,把bootstrap.min.css拷贝到项目中。

（2）新建style.css,实现代码如下：

.row{margin-bottom: 20px;}.row .row{margin-top: 10px;margin-bottom: 0px;}[class*="col-"]{padding-top: 15px;padding-bottom: 15px;/*background-color: #eee;*//*background-color: rgba(86,61,124,.15);*//*border: 1px solid #dddddd;*//*border: 1px solid rgba(86, 61, 214,.2);*/}

（3）新建index.html文件，实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><link href="bootstrap.min.css" type="text/css" rel="stylesheet"><link href="style.css" type="text/css" rel="stylesheet">
</head>
<!--<div>--><!--导航栏--><nav class="navbar navbar-inverse navbar-fixed-top"><div class="container"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Project name</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><form class="navbar-form navbar-right" role="search"><div class="form-group"><input type="text" class="form-control" placeholder="Email"></div><div class="form-group"><input type="text" class="form-control" placeholder="Password"></div><button type="submit" class="btn btn-success">Sign in</button></form></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav><!--巨幕--><div class="jumbotron"><div class="container"><h1>Hello, world!</h1><p>This is a template for a simple marketing or informational website. It includes a large callout called ajumbotron and three supporting pieces of content. Use it as a starting point to create something moreunique.</p><p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p></div></div><!--三列--><div class="container"><div class="row"><div class="col-md-4"><h2>Heading</h2><p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortormauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magnamollis euismod. Donec sed odio dui.</p><input class="btn btn-default" type="button" value="View details »"></div><div class="col-md-4"><h2>Heading</h2><p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortormauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magnamollis euismod. Donec sed odio dui.</p><input class="btn btn-default" type="button" value="View details  »"></div><div class="col-md-4"><h2>Heading</h2><p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortormauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magnamollis euismod. Donec sed odio dui.</p><input class="btn btn-default" type="button" value="View details  »"></div></div></div><!--页脚--><!--注意：<hr>是分割线--><div class="container"><hr><footer>© Company 2014</footer></div></body>
</html>

（4）最后的实现效果如下：这是模仿BootStrap中的某一个模板设计出来的。可见BootStrap使用起来非常方便。

。

github主页：https://github.com/chenyufeng1991 。欢迎大家访问！

使用BootStrap进行响应式布局案例相关推荐

Bootstrap响应式布局案例- -阿里百秀
文章目录 1.搭建结构 2.show.html 3.index.css 4.所需图片 1.搭建结构 2.show.html <!DOCTYPE html> <html lang=&q ...
three - 3 - 基础知识（1. three渲染结构，2.对canvas 进行响应式布局，3.让canvas 画布自适应设备分辨率）
本章节分为3点: 理解three.js 的渲染结构对canvas 进行响应式布局让canvas 画布自适应设备分辨率 canvas 画布的css尺寸和像素尺寸 1.three.js 的渲染结构接 ...
bootstrap响应式布局之阿里百秀
响应式布局移动端布局技术选型 -流式布局(百分比布局) -flex弹性布局 -rem适配布局 -响应式布局响应式就是页面布局会随着屏幕大小变化响应,做出不同的布局模式. 相应不同设备(手机,PAD ...
Bootstrap 流式布局
同理,将Bootstrap的流式栅格放到 class="container-ﬂuid" 的流式容器中,即可创建流式布局.流式布局将填满整个视口宽度.如: <div class ...
Bootstrap进行响应式页面的布局一
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JavaScript 的. 优点: 优先面对移动设备进行适配和开发: 所有的主流 ...
CSS——响应式布局案例以及点击出现下拉框实现过程
文章目录前言一.示例图二.实现过程 1.HTML结构 2.CSS样式 3.JS行为总结前言本文主要介绍有关响应式布局的案例实现过程. 一.示例图二.实现过程 1.HTML 代码如下(示例 ...
Bootstrap响应式布局以及栅格框架
一.Bootstrap简单配置简单使用Bootstrap,只需引入: <script type="text/javascript" src="js/jquery. ...
[JavaWeb-Bootstrap]Bootstrap响应式布局
响应式布局 * 同一套页面可以兼容不同分辨率的设备. * 实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子 * 步骤:1. 定义容器.相当于之前的table.* 容器分类:1. ...
Bootstrap 响应式布局辅助类
为了针对移动设备进行快速开发,在 responsive.less 文件中,Bootstrap 为响应式开发提供了一些辅助 class,它们用于针对不同设备显示和隐藏内容.可用的 class 列表及它们 ...

使用BootStrap进行响应式布局案例

使用BootStrap进行响应式布局案例相关推荐

最新文章

热门文章