01bootstrap_基本结构和布局
01bootstrap_基本结构
学习bootstrap需要下载必要的文件:www.bootcss.com
基本结构
container page-header
布局
1.响应式布局:container-fluid
2.媒体查询:
/*手机屏幕
body {
background-color:#fff;
color: pink;
}
/*平板电脑、小屏幕 >=768*/
@media (min-width:768px) {body {
background-color:#09F;
font-size: 20px;
}}
/*电脑屏幕 >=992*/
@media (min-width:992px) {body {
background-color:#FC0;
font-size: 40px;
}}
/*大屏幕 >=1200*/
@media (min-width:1200px) {body {
background-color:#000;
font-size: 60px;
}}
3.栅格系统:
1大的容器->>container 行控制 row 在bootstrap中有12个列可以分割,col-md-x ,col-sm-x,还可以流式布局container-fluid
列排序:col-md-9 col-md-push-3(从左向右移动的格),col-md-3 col-md-pull-3(从右向左移动的格)
列偏移:col-md-4,col-md-4 col-md-offset-1(距离浏览器左边移动的距离)
嵌套布局 逻辑与原来一样
手机、平板、桌面(col-xs-6 col-sm-4)
移动设备和桌面屏幕(col-xs-6 col-md-4)
4.禁止响应式布局:col-xs-4
01bootstrap_基本结构和布局的更多相关文章
- CSS3新特性应用之结构与布局
一.自适应内部元素 利用width的新特性min-content实现 width新特性值介绍: fill-available,自动填充盒子模型中剩余的宽度,包含margin.padding.borde ...
- 如何用vs查看结构体布局
今天遇到一个问题: 假设在每个系统的structA 结构不同,我们在windbg看了以后直接拿来用,自己定义成结构体,如何来验证这个结构体内存布局是否和windbg一致. 当然笨办法是自己一个个成员数 ...
- CSS技巧 (1) · 结构和布局
前言 这一篇主要是总结关于结构和布局的一些技巧,不管什么,一个网页上来,最重要的是先确定他的结构和布局,实现基本的布局之后,我们再进行局部的优化和交互特效. 这一篇主要讲 关于 自适应内部元素 的内 ...
- C#结构内存布局介绍
转载:http://www.csharpwin.com/csharpspace/10455r2800.shtml 本来打算写一篇文章,详细地讨论一下结构的内存布局,但是想了下,跟路西菲尔的这篇文章也差 ...
- C#-StructLayoutAttribute(结构体布局)
struct实例字段的内存布局(Layout)和大小(Size) 在C/C++中,struct类型中的成员的一旦声明,则实例中成员在内存中的布局(Layout)顺序就定下来了,即与成员声明的顺序相同, ...
- android项目的结构和布局
一.res文件夹 1.res文件夹用于存放Android的资源.包括:动画.静态图片.字符串.菜单.布局.视频.文件等. 1.drawable-ldpi:低分辨率图形(120像素/英寸) 2.draw ...
- python模块结构和布局
用模块来合理的组织你的python代码是简单又自然的方法.下面介绍一种非常合理的布局: #(1)起始行(Unix) #(2)模块文档 #(3)模块导入 #(4)变量定义 #(5)类定义 #(6)函数定 ...
- 小程序UI设计(7)-布局分解-左-上下结构
FlexBox布局中的变幻方式很多,我们继续了解一个左-上下结构的布局分解 左边结构树中WViewRow下面有两个WViewColumn.WViewRow是横向排列,WViewColumn是纵向排列 ...
- HTML结构化
目的:为开发页面时有一套明确的页面结构化实施方案,提高开发效率: HTML结构化指的其实就是使用HTML语义化标签根据web标准书写具有明确结构逻辑的HTML代码的一种思路: 说白了重点就是:页面实际 ...
随机推荐
- Bugku-CTF之变量1
Day9 变量1 http://123.206.87.240:8004/index1.php
- PLSQL远程连接数据库(亲测可试)
一.准备工具: ORALCE数据库.PLSQL连接工具.确认网络正常 (我是在局域网中的,如果不是局域网,需要去ORACLE安装目录下找到sqlnet.ora 在里面找到 SQLNET.AUTHENT ...
- Unicode编码问题 如:\u529e\u7406\u9996\u6c7d\u52a0\u6cb9
python 遇到\u529e\u7406\u9996\u6c7d\u52a0\u6cb9 解决方法: a = "\u529e\u7406\u9996\u6c7d\u52a0" b ...
- Python3 tkinter基础 OptionMenu 点击按钮,出现单选的下拉列表
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- P5205 【模板】多项式开根
思路 按如下式子计算即可 \[ B(x)=\frac{A(x)+B'^2(x)}{2B'(x)} \] 代码 // luogu-judger-enable-o2 #include <cstdio ...
- centos 7 已经开启 22 端口但无法连接
已经开启 22 端口但无法连接 刚买的 vps ,默认 ssh 端口是 29488, 使用以下方式连接ssh -p 29488 root@x.x.x.x觉得加端口有点麻烦, 希望使用默认的 22 端口 ...
- [codechef]SnackDown 2017 Online Elimination Round Prefix XOR
预处理后主席树维护 首先得出最后的答案为 \(\sum_{i=l}^{r}{min(right[i],r)-i+1}\) \(ri[i]\)表示i最远的上升序列(即代码中的f[i]) step1 那么 ...
- Pandas 基础(9) - 组合方法 merge
首先, 还是以天气为例, 准备如下数据: df1 = pd.DataFrame({ 'city': ['newyork', 'chicago', 'orlando'], 'temperature': ...
- 使用java命令运行class文件提示“错误:找不到或无法加载主类“的问题分析
有时候我们需要直接用jdk提供的java命令来执行class文件让软件运行起来,特别是很多初学者,但经常会发现如下提示: 用eclipse或用ant则没有问题. 其实原因很简单,我们忽略了2个细节. ...
- spring-cloud-config——Quick Start
参考资料: https://cloud.spring.io/spring-cloud-static/spring-cloud-config/1.4.0.RELEASE/single/spring-cl ...