BootStrap学习(二)——重写首页之topbar
1、布局容器
帮助文档:http://v3.bootcss.com/css/#overview-container
BootStrap需要为页面内容和栅栏系统包裹一个.container容器。提供的两个容器如下,注意,由于 padding
等属性的原因,这两种 容器类不能互相嵌套。
1).container类用于固定宽度并支持响应式布局的容器’
<div class="container">
...
</div>
2).container-fluid类用于 100% 宽度,占据全部视口(viewport)的容器。
<div class="container-fluid">
...
</div>
2、栅格系统
1)帮助文档:http://v3.bootcss.com/css/#grid-options
2)Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
3)特点:
a.“行(row)”必须包含在.container(固定宽度)或 .container-fluid (100% 宽度)中
b.“列(column)”可以作为行(row)的直接子元素
c.行使用的样式“.row”,列使用的样式“col-*-*”,内容应置于“列(column)”内
d.列大于12时,将另起一行排列
e.栅格类适用于与屏幕宽度大于等于分界点大小的设备,并且针对小屏幕设备覆盖栅格类。
4)栅格参数(large:lg、medium:md、small:sm、x small:xs)
3、响应式工具
帮助文档:http://v3.bootcss.com/css/#responsive-utilities
4、具体代码实现:(head部分直接参照模板)
<!--logo部分-->
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6">
<img src="../img/logo2.png"/>
</div>
<div class="col-lg-5 col-md-4 hidden-xs col-sm-6" >
<img src="../img/header.png" />
</div>
<div class="col-lg-3 col-md-4 col-sm-12" style="padding-top: 15px;">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
</div>
在谷歌浏览器内运行,效果如下(大屏幕):
中等屏幕:
小屏幕:
BootStrap学习(二)——重写首页之topbar的更多相关文章
- BootStrap学习(三)——重写首页之导航栏和轮播图
1.按钮 1)帮助文档:http://v3.bootcss.com/css/#buttons 2).btn-lg..btn-sm..btn-xs可以设置按钮的不同尺寸 3).active类设置按钮的激 ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- bootstrap学习笔记<二>(标题,段落样式)
标题.样式:class="h1"~class="h6" bootstrap中重新定义了h1~h6标签,具体差别如下: 在bootstrap中其他任何标签使用cl ...
- bootstrap学习(二)页面
响应式图片: //当图片大的时候,逐渐缩小浏览器大小,图片会显示为自适应大小 ,img-responsive <div class="container"> <d ...
- 前端框架——BootStrap学习
BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...
- python 全栈开发,Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)
昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...
- H5框架之Bootstrap(二)
H5框架之Bootstrap(二) 突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经 ...
- Bootstrap <基础二十九>面板(Panels)
Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...
- Bootstrap <基础二十二>超大屏幕(Jumbotron)
Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: ...
随机推荐
- BZOJ 4028 分块
zrt当年是怎么想到的--. 思路: 考虑把序列分块 对于每块 存xor[i] 表示从本块开头到i的前缀异或和 把它扔进set里 存gcd[i]表示从本块开头到i的前缀gcd. 如果这一块的GCD和整 ...
- 编译libvlc。。。
https://wiki.videolan.org/Win32Compile按照官网教程,安装所需工具,参考 :http://qjw.qiujinwu.com/blog/2014/12/08/cros ...
- git服务器搭建-gitosis
需求 硬件需求:一台Ubuntu或者debian电脑(虚拟机),能通过网络访问到. 软件需求:git-core, gitosis, openssh-server, openssh-client, Ap ...
- Python3之时间模块详述
Python3之时间模块 time & datetime & calendar 一. 概述 python 提供很多方式处理日期与时间,转换日期格式是一个常见的功能. 时间元组:很多p ...
- (转载)Android项目实战(二十七):数据交互(信息编辑)填写总结
Android项目实战(二十七):数据交互(信息编辑)填写总结 前言: 项目中必定用到的数据填写需求.比如修改用户名的文字编辑对话框,修改生日的日期选择对话框等等.现总结一下,方便以后使用. 注: ...
- 401 - Unauthorized: Access is denied due to invalid credentials.
solution:change application pool from ApplicationPoolIdentity to NetworkService.
- QA小课堂:一个网站或者APP开发要多少钱
经常遇到朋友问我:“开发一个京东商城需要多少钱?开发一个滴滴打车需要多少钱?”类似这样的需求,就连我这样一名伪开发者都不愿意去骗客户或者朋友,因为这种问题是很难回答出来的.为什么这么说呢?要知道类似京 ...
- CDR查找替换对象操作详解
您可以使用CorelDRAW软件中提供的查找和替换向导,在绘图中定位和编辑对象.这在设计绘图中经常用到,查找和替换中为用户提供多种搜索方法,其中包括包含对象类型及其相关属性.填充和轮廓属性.应用于对象 ...
- TensorFlow+实战Google深度学习框架学习笔记(7)-----队列与多线程
一.创建一个队列: FIFOQueue:先进先出 RandomShuffleQueue:会将队列中的元素打乱,每次出列操作得到的是从当前队列所有元素中随机选择的一个. 二.操作一个队列的函数: enq ...
- 新手须知 QT类大全
QT类大全,在行内容中罗列出来了,希望大家多看看,如果是API就更好了,但可惜不是.这些是一些大类,请多做参考. QApplication 应用程序类 QLabel 标签类 QPushButton 按 ...