BootStrap布局案例
BootStrap布局
bootstrap 2.3版与3.0版的使用区别
http://www.weste.net/2013/8-20/93261.html
以一个博客系统的首页,来介绍如何布局
1,纸上画出你的布局草图
(1),先大致勾勒出Header , Content, Right , Footer吧, 标出它们各自的宽高比例
(2)Header里面得有Navgation, Search,Barler这些东东吧, Footer里面总要有CorpRight吧
(3)Righter应该有个NewList,简单介绍,
(4)剩下就是Content了,你要放主要的内容了
Header部分
Height:157px
Footer部分
Height:46px
Content部分
Width :1002px
Right部分
Width: 308px
1,先引用文件
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
2,自定义样式文件Customer.css,写出基本的样式
.header
.container
.footer
3,往Header部分加入东西
观察发现Header有两块组成Barner和导航menu
再看Banner = 图片(80%) + 设为首页一小块(40%)
可以用栅格栏的概念来做(1---12)
<div class="col-md-8">Banner图片</div>
<div class="col-md-4">设为首页一块</div>
注意:
2.3版本是<div class="span8"></div>
流式布局写法
注意:2.3版本是<div class="row-fluid">
3.2版本是row,将最外面的布局元素 .container 修改为 .container-fluid
设为首页部分
<div class="col-md-4">
<ul class="list-inline pull-right topbar">
<li><a href="Article.html">设为首页</a></li>
<li><a href="Article.html">加入收藏</a></li>
<li><a href="Article.html">联系我们</a></li>
<li><a href="Article.html">帮助中心</a></li>
</ul>
</div>
注意:2.3版本是inline
3.2是list-inline
知识点:pull-right右对齐
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理:
- “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
- 通过“行(row)”在水平方向创建一组“列(column)”。
- 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
<div class="menu">
<div class="row">
<div class="col-md-7">
<ul class="nav nav-tabs">
<li><a href="">首页</a></li>
<li><a href="">Web</a></li>
<li><a href="">设计</a></li>
<li><a href="">Jquery</a></li>
<li><a href="">BootStrap</a></li>
<li><a href="">Orchard</a></li>
<li><a href="">前端志</a></li>
</ul>
</div>
<div class="col-md-5"></div>
</div>
</div>
知识点:
导航
Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分。改变修饰类可以改变样式。
1、标签页
注意.nav-tabs类需要.nav基类。
2、胶囊式标签页
用相同的 HTML 标记,但要用.nav-pills代替。
底部部分
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="text-center">主题支持:<a href="http://www.58img.com" target="_blank"> www.58img.com</a> (Web前端资源网) Bootstrap交流QQ群:233808496</p>
</div>
</div>
</div>
</div>
知识点
Thumbnail
- 在图像周围添加带有 class .thumbnail 的 <a> 标签。
- 这会添加四个像素的内边距(padding)和一个灰色的边框。
- 当鼠标悬停在图像上时,会动画显示出图像的轮廓。
<div class="well">
<h3>模板说明</h3>
<p>1、此模板基于Bootstrap2.3.2构建。</p>
<p>2、此模板不兼容IE6,其他浏览器均兼容。</p>
<p>3、支持响应式</p>
</div>
知识点:
Well
默认效果
把 Well 用在元素上,能有嵌入(inset)的的简单效果。
Copy
Look, I'm in a well!
<div class="well">...</div>
可选
类
通过这两种可选修饰类,可以控制此组件的内补(padding)和圆角的设置。
Copy
Look, I'm in a large well!
<div class="well well-lg">...</div>
Copy
Look, I'm in a small well!
<div class="well well-sm">...</div>
<p class="alert alert-success">
此模板做为学习示例:利用Bootstrap快速布局简洁漂亮的网页!
</p>
知识点:
alter
创建一个简单的警告信息
使用 CSS class "alert",位于 bootstrap.css 中的行号 2123 到 2175(版本 2.0.1),您可以创建一个简单警告信息。您可以为它添加一个可选的关闭图标。
当您点击警告框中的关闭图标时,警告框关闭。要想实现这个交互效果,您必须添加两个 JavaScript 文件 jquery.js 和 alert.js。您可以把它们添加到 body 元素关闭标签前面。
参考:http://www.w3cschool.cc/bootstrap/bootstrap-v2-alerts-errors.html
<ul class="list-unstyled news">
<li><a href="Article.html">从Android的设计规则看Google的用户体验观</a></li>
<li><a href="Article.html">网易新闻跟帖为什么火爆 自娱自乐?</a></li>
<li><a href="Article.html">音美国电商为什么不自建物流:准比快更重要</a></li>
<li><a href="Article.html">马云的几个小故事:马化腾后悔未投资淘宝</a></li>
<li><a href="Article.html">狙击京东:天猫为什么发动二选一平台大战</a></li>
<li><a href="Article.html">音乐网站遭版权方催逼 5日或全面试行收费</a></li>
<li><a href="Article.html">PPTV收购案再现新主角:苏宁发收购意向书</a></li>
<li><a href="Article.html">轮椅上的风景:残疾程序员张肖敏北上寻梦记</a></li>
<li><a href="Article.html">音乐网站遭版权方催逼 5日或全面试行收费</a></li>
</ul>
知识点:
list-unstyled
bootstrap提供了专门移除子元素的列表样式(使用.list-unstyled)
<div class="text-center">
<div class="pagination">
<li><a href="#">«</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="#">»</a></li>
</div>
</div>
知识点:居中可以在外层
转载于:https://www.cnblogs.com/huaci/p/3919448.html
BootStrap布局案例相关推荐
- CSS中浮动布局float(小米布局案例、导航栏案例、overflow)
1. CSS 布局的三种机制 网页布局的核心--就是用 CSS 来摆放盒子. CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流(标准流).浮动和定位, 其中: 普通流(标准流) 块级元素会 ...
- 《Div+CSS 3.0网页布局案例精粹》扫描版[PDF]
电驴资源 下面是用户共享的文件列表,安装电驴后,您可以点击这些文件名进行下载 [Div.CSS.3.0网页布局案例精粹].王大远.扫描版.rar详情 53.7MB 全选 53.7MB 下载地址(拷贝到 ...
- MUI框架:移动端底部固定mui-bar-tab布局 - 案例篇
移动端布局:自定义MUI底部tabs选项卡(nav组件 · 底部固定mui-bar-tab) · 案例演示 效果图 html代码实例 · 如下: <!doctype html> <h ...
- MUI框架:栅格系统 + grid宫格布局 - 案例篇
MUI框架 · 自定义宫格布局 · 应用案例: 通过使用MUI框架的 栅格系统 + grid宫格布局 ,覆盖源码样式,以达到完美的页面效果. 效果图: 点击动画效果不再演示,具体效果参考源码效果! 全 ...
- html5图片列表纵向,div css图片列表实例布局案例ul li布局
DIV CSS布局图文列表布局案例 ul li图文列表 使用div css ul li布局图文列表小局部案例,学习图文列表布局实际案例. div+css图文布局案例图 本案例在DIVCSS5模板基础上 ...
- python制作网页样式与布局_清华大学出版社-图书详情-《CSS3+DIV网页样式与布局案例课堂(第2版)》...
前 言 "网站开发案例课堂"系列图书是专门为网页设计初学者量身定制的一套学习用书.整套书具有以下特点. 前沿科技 无论是网站建设.数据库设计还是HTML5.CSS3,我们都精选较为 ...
- Bootstrap布局自动拉伸改变大小
记录一下学习Bootstrap布局自动拉伸 <!doctype html> <html> <head><meta charset="utf-8&qu ...
- Bootstrap部分案例
目录 准备工作 一.案例1:首页轮播图实现 主要用于组件:轮播-Carousel 代码如下 效果如下 二.案例2:首页书籍分类实现 主要用于组件:列表组-List group 代码如下 效果如下 ...
- Bootstrap布局之移动开发基础加容器
一.视口概念 视口主要包括布局视口 .视觉视口和理想视口. 视口能将大分辨率尺寸网页缩小显示在手机浏览器上,这样保证网页在手机上看起来更像在桌面浏览器中的样子. 布局视口 布局视口是指网页的宽度,一般 ...
- FrozenUI框架 · 栅格应用:宫格布局 - 案例篇
适用frozenUI框架的栅格系统和多列布局,完成项目首页的宫格布局开发 效果图: demo 代码实例: <!DOCTYPE html> <html><head>& ...
最新文章
- 斯坦福大学机器学习第八课“神经网络的表示(Neural Networks: Representation)”
- Linux网络编程——连接和面向连接的协议之间没有区别
- OpenCV FileStorage类的数据读写操作
- [Swift]LeetCode551. 学生出勤纪录 I | Student Attendance Record I
- python时间序列分析航空旅人_python时间序列分析
- linux多台主机对比文件大小,Linux主机df和du出来的文件和磁盘大小不相同
- 途牛 “特产频道”上线 深化目的地服务网络
- (转)XP和Scrum到底有什么区别?
- MFC DoDataExchange()绑定技术
- 安卓Systrace工具使用流程
- 大气数据计算机输出形式,大气数据计算机
- Android常用工具类...
- ArcGIS_栅格数据归一化
- R 语言assign 和get 函数用法
- SVD(奇异值矩阵分解) 转载(+师兄ppt)
- 解决电脑搜不到WiFi6无线路由信号问题
- 【树莓派3B+】【HASS.IO环境下的相关配置】一、YR天气
- 微信小程序使用Less语法
- C++ boost协程技术介绍
- 【IT背包客】CIO们的徽杭古道徒步记
热门文章
- pom.xml mvn package expected START_TAG or END_TAG not TEXT
- 完成端口(IOCP)详解[1/2](转载)
- Hibernate框架 基础
- php+模版取余,PHP取余函数介绍MOD(x,y)与x%y_php技巧
- list vue 添加数据方法_在PySpark数据框中添加新列的5种方法
- m_map投影_MATLAB——m_map指南(1)
- ubuntu 串口调试工具推荐_Qt开源作品3-串口调试助手
- Java基础:List集合和Set接口
- Git:checkout命令无法切换回master
- oracle union orderby,Oracle中union 和 order by 的联用