bootstrap2文档的学习
- 移除了body的
margin
- 设置
body
的背景颜色为background-color: white;
- 使用
@baseFontFamily
,@baseFontSize
, 和@baseLineHeight
属性作为我们排版的基础 - 通过
@linkColor
设置全局链的接颜色, 并适用于:hover
情况下的下划线
对于一个简单的两列布局, 创建一个.row
和添加带有(合适)数字的.span*
作为列. 因为这是一个12列的网格, 所以每一个 .span*
都是这12个数字, 并且每行的列(span)的数字相加必须等于12 (或者等于该父级).
- <div class="row">
- <div class="span4">...</div>
- <div class="span8">...</div>
- </div>
在这个例子, 我们用了 .span4
和 .span8
, 一共是12列, 这就形成一个完整的行
.span*
内添加一个新的 .row
并加入 .span*
. 嵌套在内的列数总和要等于父级列.,当然也可以不相同。<div class="container-fluid">
—这非常适合应用于程序和文档类的网站.(但是经过测试,如果分成两栏,但是内容还是会有重叠)- <div class="container-fluid">
- <div class="row-fluid">
- <div class="span2">
- <!--Sidebar content-->
- </div>
- <div class="span10">
- <!--Body content-->
- </div>
- </div>
- </div>
在你项目文件中的<head>
里, 添加一个如例子所示的meta标签和一个响应式样式表来开始使用响应式. 如果已经在自定义页面编译好一个Bootstrap, 那么只需添加一个meta标签.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
注意! Bootstrap在默认情况下是没有使用响应式功能的, 因为不是任何情况都需要使用到. 我们并不是让开发者移除此功能, 而是最好在需要使用的时候才使用它.
- <address>
- <strong>Twitter, Inc.</strong><br>
- 795 Folsom Ave, Suite 600<br>
- San Francisco, CA 94107<br>
- <abbr title="Phone">P:</abbr> (123) 456-7890
- </address>
- <blockquote>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
- <small>Someone famous <cite title="Source Title">Source Title</cite></small>
- </blockquote>
- <form>
- <fieldset>
- <legend>Legend</legend>
- <label>Label name</label>
- <input type="text" placeholder="Type something…">
- <span class="help-block">Example block-level help text here.</span>
- <label class="checkbox">
- <input type="checkbox"> Check me out
- </label>
- <button type="submit" class="btn">Submit</button>
- </fieldset>
- </form>
- <img src="..." class="img-rounded">
- <img src="..." class="img-circle">
- <img src="..." class="img-polaroid">
所有图标都需要一个独特、前缀带 icon-
属性的<i>
标签. 如需使用时, 可直接将以下代码使用在任何地方:
- <i class="icon-search"></i>
也可以使用风格相反(白色)的图标, 这里准备了一个额外的属性. 我们将具体展示这些属性在导航条和下拉菜单中悬停和活动时候的状态效果.
- <i class="icon-search icon-white"></i>
注意! 当在旁边使用文本, 按钮或导航链接, 为了有一个适当的间距, 请一定要在<i>
后面留一个空格位置.
bootstrap2文档的学习的更多相关文章
- webpack搭建vue项目开发环境【文档向学习】
为何有这篇文章 各个社区已经有无数篇帖子介绍如何使用webpack搭建前端项目,但无论是出于学习webpack的目的还是为了解决工作实际需要都面临着一个现实问题,那就是版本更新.别人的帖子可能刚写好版 ...
- Unity shader 官网文档全方位学习(一)
转载:https://my.oschina.net/u/138823/blog/181131 摘要: 这篇文章主要介绍Surface Shaders基础及Examples详尽解析 What?? Sha ...
- C# 动态生成word文档 [C#学习笔记3]关于Main(string[ ] args)中args命令行参数 实现DataTables搜索框查询结果高亮显示 二维码神器QRCoder Asp.net MVC 中 CodeFirst 开发模式实例
C# 动态生成word文档 本文以一个简单的小例子,简述利用C#语言开发word表格相关的知识,仅供学习分享使用,如有不足之处,还请指正. 在工程中引用word的动态库 在项目中,点击项目名称右键-- ...
- bash帮助文档简单学习;bash手册翻译
关于bash的四种工作方式的不同,可以参考:http://feihu.me/blog/2014/env-problem-when-ssh-executing-command-on-remote/,但是 ...
- Unity shader 官网文档全方位学习(二)
摘要: 这篇文章主要介绍Lighting model及自定义Lighting model 上文咱们学了surface shader.这玩意在开始的时候啊,在定义哪个函数处理surface时用一定要指定 ...
- 学习Java爬虫文档的学习顺序整理
1.认识正则表达式(Java语言基础) https://www.toutiao.com/i6796233686455943693/ 2.正则表达式学习之简单手机号和邮箱练习 https://www.t ...
- MapReduce和Hive学习文档链接学习顺序
1.<CentOS6.5下安装Hadoop-2.7.3(图解教程)> https://www.toutiao.com/i6627365258090512909/ 2.<CentOS6 ...
- 两年前实习时的文档——Platform学习总结
1 概述 驱动程序实际上是硬件与应用程序之间的中间层.在Linux操作系统中,设备驱动程序对各种不同的设备提供了一致的訪问接口,把设备映射成一个特殊的设备文件,用户程序能够像其它文件一样对设备文件进 ...
- 两年前实习时的文档——MMC学习总结
1概述 驱动程序实际上是硬件与应用程序之间的中间层.在Linux操作系统中,设备驱动程序对各种不同的设备提供了一致的訪问接口,把设备映射成一个特殊的设备文件,用户程序能够像其它文件一样对设备文件进行操 ...
随机推荐
- Tomcat底层通过全类名创建对象的实现
示例: //com.neuedu.baier.entity.User为User类的全类名 //要求JVM查找并加载指定的类,也就是说JVM会执行该类的静态代码段 Class<?> user ...
- Gson本地和服务器环境不同遇到的Date转换问题 Failed to parse date []: Invalid time zone indicator
GoogleGson在处理Date格式时有个小陷阱,在不同环境中部署时可能会遇到问题. Gson默认处理Date对象的序列化/反序列化是通过一个SimpleDateFormat对象来实现的,通过下面的 ...
- 记录在APIO2019前
2019-05-07 嗯, 只报名参加了APIO. 今天是五月七号,距离前往帝都参加我的退役之战, 还有八天(5.15) 然后没什么可说的, 就是记录一下这几天吧. 今天下午去学了虚树(其实没什么的) ...
- VMware Workstation 安装以及Linux虚拟机安装 指北
最近有挺多小伙伴跟我说起虚拟机这个东西,所以,今天就给大家写一篇虚拟机安装使用指北吧. 虚拟机(英语:virtual machine),在计算机科学中的体系结构里,是指一种特殊的软件,可以在计算机平台 ...
- JMeter - 实时结果 - InfluxDB和Grafana - 第1部分 - 基本设置
概述: 在本文中,我将解释如何使用JMeter + InfluxDB + Grafana获得实时性能测试结果. 请注意,此主题太大,无法涵盖一篇文章中的所有内容.所以,我试图提供与TestAutoma ...
- codeforces round 472(DIV2)D Riverside Curio题解(思维题)
题目传送门:http://codeforces.com/contest/957/problem/D 题意大致是这样的:有一个水池,每天都有一个水位(一个整数).每天都会在这一天的水位上划线(如果这个水 ...
- P2062 分队问题(贪心orDP)
题目描述 给定n个选手,将他们分成若干只队伍.其中第i个选手要求自己所属的队伍的人数大等于a[i]人. 在满足所有选手的要求的前提下,最大化队伍的总数. 注:每个选手属于且仅属于一支队伍. 输入输出格 ...
- ffmpeg文件生成m3u8文件及ts切片程序(一)
ffmpeg文件生成m3u8文件及ts切片程序(一) 实现目标:输入本地文件,实现m3u8切片,功能点请看注释,注意:注释很重要. 参考: http://www.cnblogs.com/mystory ...
- LeetCode 046 Permutations 全排列
Given a collection of distinct numbers, return all possible permutations.For example,[1,2,3] have th ...
- ELK(ElasticSearch, Logstash, Kibana) v5.3.2 分布式日志收集分析最佳解决方案 基于CentOS 7 ( 一 )
[root@localhost temp]# .tar.gz -C /usr/local/ [root@localhost temp]# vim logstatsh_test.conf ======= ...