bootstrap第一天,响应式布局，栅格系统运用

最新推荐文章于 2020-04-19 23:03:06 发布
转载 最新推荐文章于 2020-04-19 23:03:06 发布 · 83 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/yzg1/p/4444849.html

本文介绍如何使用Bootstrap快速搭建一个响应式的个人网站，包括导航栏、主体内容布局及侧边栏的设计。通过简单的HTML和CSS代码实现了良好的用户体验，并且能够适应不同设备的屏幕尺寸。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>HelloWorld</title>

<!-- Bootstrap -->
<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

 

</head>
<body>
<nav class="navbar navbar-inverse">
<div class='container'>
<!-- <div class="container-fluid"> -->
<!-- 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">
<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</a>
</div>
<!-- Collect the nav links -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
<!-- </div> --><!-- /.container-fluid -->
</div>
</nav>

<div class='container'>
<div class='row'>

<div class='col-sm-9'>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
</div>
<div class='row'>
<div class='col-6 col-sm-6 col-lg-4'>
<h2>headline</h2>
<p>Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.Use rows to create horizontal groups of columns.</p>
<a href="#" class='btn btn-default'>view details</a>
</div>
<div class='col-6 col-sm-6 col-lg-4'>
<h2>headline</h2>
<p>Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.Use rows to create horizontal groups of columns.</p>
<a href="#" class='btn btn-default'>view details</a>
</div>
<div class='col-6 col-sm-6 col-lg-4'>
<h2>headline</h2>
<p>Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.Use rows to create horizontal groups of columns.</p>
<a href="#" class='btn btn-default'>view details</a>
</div>
<div class='col-6 col-sm-6 col-lg-4'>
<h2>headline</h2>
<p>Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.Use rows to create horizontal groups of columns.</p>
<a href="#" class='btn btn-default'>view details</a>
</div>
<div class='col-6 col-sm-6 col-lg-4'>
<h2>headline</h2>
<p>Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.Use rows to create horizontal groups of columns.</p>
<a href="#" class='btn btn-default'>view details</a>
</div>
<div class='col-6 col-sm-6 col-lg-4'>
<h2>headline</h2>
<p>Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.Use rows to create horizontal groups of columns.</p>
<a href="#" class='btn btn-default'>view details</a>
</div>

</div>
</div>

 

<div class='col-sm-3'>
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
</div>

</body>
</html>

转载于:https://www.cnblogs.com/yzg1/p/4444849.html

如何用BootStrap栅格系统实现响应式布局
weixin_42867975的博客
07-22 2261
BootStrap栅格系统 文章目录 一、什么是响应式布局？ 二、如何实现响应式布局 三、实现步骤 四、实例 一、什么是响应式布局？ 同一套页面可以兼容不同分辨率的设备。如在电脑上访问苹果的网站：https:/...
使用bootstrap中的栅格系统轻松实现网站响应式布局
caiyyu的博客
03-02 1298
网站分为主体和底部两大部分，使用bootstrap中的栅格系统实现网站响应式布局： .html文件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
深入理解BootStrap Item7 -- 栅格系统（布局）
小平果的欢乐谷
11-14 7212
1、栅格系统（布局） Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。 我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理：
Bootstrap栅格系统详解,响应式布局
weixin_33909059的博客
04-22 436
Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。但在较复杂的页面上出现问题，间隔，内外边距常困扰开发人员，需要深入源码和文档理解栅格系统...
Bootstrap进行响应式页面的布局一
web分享客的博客
11-09 1356
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的。 优点： 优先面对移动设备进行适配和开发； 所有的主流浏览器对支持它； 简单易上手； 响应式设计风格，符合现代web网页开发趋势； 响应式图像： 通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对...
第七天的作业-响应式布局
11-05
网格系统为布局提供了一种结构化的解决方案，如使用Bootstrap框架提供的栅格系统，能够快速实现响应式布局。 在本例中的文件名称列表中，包含了不同命名的HTML文件，如"01_响应式布局01.html"到"05_响应式布局05....
《响应式网页开发实战》教学教案—第14章 Bootstrap样式.pdf
06-23
1. **Bootstrap框架的通用样式**：Bootstrap的通用样式包括全局CSS样式，如字体、颜色、间距等，以及栅格系统，用于构建响应式的布局。 2. **文本排版设置**：学习如何使用Bootstrap的类来调整文本的大小、颜色、...
创新实训——基于Bootstrap的网站响应式布局设计
qq_38530808的博客
04-15 4671
  前言：在以往的web前端开发过程中，网页的最终运行环境一般是普通的PC，也就是最为常见的中型电脑屏幕，但在众多移动设备快速发展的今天，特别是智能手机的普及使得开发人员在前端开发过程中不得不考虑网页在不同分辨率，不同形状的显示屏下运行的兼容性，这就引入了web开发领域中的一个重要词汇——响应式。  响应式布局可以帮助我们实现网站布局随屏幕大小自动调整的需求，实现不同屏幕分辨率的终端上浏览网页的不...
Java Web中使用jQuery validate与Bootstrap实现表单校验与响应式布局
- **栅格系统**：Bootstrap的栅格系统是一个响应式布局框架，它使用一系列的容器、行（row）和列（column）来布局和对齐内容。 - **媒体查询**：Bootstrap内置了一系列的媒体查询，允许开发者设置不同屏幕尺寸下的...
前端移动Web第四天知识点：响应式布局（bootstrap框架）
m0_46597922的博客
04-19 432
1.响应式开发 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 1.2 响应式布局容器 1.响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。 2.原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。 平时我们的响应式尺寸划分 超小屏...
Bootstrap4响应式布局之栅格系统
K先生的博客
04-06 1万+
在Bootstrap4框架中为我提供了栅格系统来编写响应式布局。栅格系统是基于一个12列、有5种响应尺寸(对应不同的屏幕）的布局。Bootstrap4栅格系统共有五个类： .col- 针对所有设备 .col-sm- 平板 - 屏幕宽度等于或大于 576px .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px) .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 99...
Bootstrap栅格系统原理
热门推荐
奋斗的日子最甜美，在科技的海洋里，永无止境。
04-03 1万+
Bootstrap栅格系统原理 Bootstrap栅格系统布局 1、栅格系统简介 1）响应式设计 我们现实生活中所使用到的设备有手机、平板电脑、笔记本、台式机。这些设备最大的区别在于它的屏幕的大小不一样，也就是分辨率大小不一样。 响应式设计最核心的思想是就一个网站能够兼容多个终端，而不是为每个终端特定的一
如何使用bootstrap栅格布局？
weixin_41506097的博客
06-02 2764
一、背景介绍Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。今天分享的知识点：*栅格系统实现原理*container/row/col之间的关系*自定义列*用媒体查询实现响应式布局二、知识剖析（一）栅格布局实现原理“行（row）”必须包含在 .container （固定...
Bootstrap3栅格系统布局实例
歪脖先生的博客
05-02 3933
布局实例 Bootstrap3栅格系统的核心理念是移动设备优先，其实也就是小设备优先。使用这些栅格类，再结合栅格系统的规则，就可以构建出千变万化的页面布局。 先看一个简单实例，来加深对移动设备优先的理解。假设我们只使用单一的一组 .col-md-* 栅格类来创建一个栅格系统： <divclass="row"> <divclass="col-md-4"&g...
web前端响应式之栅格布局
qq_27391159的博客
01-30 4172
1..要做响应式最好不要写死宽度，用%或者栅格布局 2.栅格布局的优势在于方便，拿ant-design的Row/Col举例，不仅可以指定不同的屏幕所占栅格数，还能用type='flex'使用flex布局，但是有弊端，虽然响应式比较容易，但是24个还是不够精确，48？(其实说白了，他就是百分比，想要更加细分就用百分比代替)，需要更加细分，不然可能会空隙过大的问题，并且难以解决。   总结： ...
bootstrap 布局图片列表
mao_mu_mu的博客
12-07 9982
  pageEncoding="UTF-8"%> http://java.sun.com/jsp/jstl/core"%>  String path = request.getContextPath();     String basePath = request.getScheme() + "://"   + request.getServerName() + ":" +
巧用 BootStrap -- 栅格系统（布局）轻松搞定网页响应式布局！
weixin_30318645的博客
09-19 3205
摘要：Bootstrap 为我们提供了一套响应式、移动设备优先的流式栅格系统，合理的使用栅格系统将会使得网站页面布局变得更加简单，在设置了媒体查询之后，响应式网站也无需再单独写了。接下来我以Bootstrap的中文官网首页为模板进行展示其栅格布局的使用方法以及相关知识点。相信在看完这篇文章之后，你完全可以轻松使用栅格布局。 网站效果图如下所示： PC版： 移动版: ...
IEEE1588PTPdaemonforSTM32F4Discoveryboard.zip
最新发布
09-08
IEEE1588PTPdaemonforSTM32F4Discoveryboard.zip
前端校验与响应式布局的实践与技巧
### 前端validate校验和响应式布局知识点分析 #### 标题解析 - **前端validate校验**：通常指的是在前端页面进行数据输入校验，确保用户提交的数据符合预期格式和条件。这种校验通常包括对数据类型的校验，比如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值