Bootstrap 3 学习

http://getbootstrap.com/
1.meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width属性控制设备宽度，将它设置为device-width确保正确呈现在不同设备上
initial-scale确保网页加载时1:1呈现，不会缩放
在移动设备浏览器上，user-scalable=no 可以禁用其缩放（zooming）功能，通常maximum-scale=1.0 与 user-scalable=no 一起使用
2.响应式图片

<img src="..." class="img-responsive" alt="响应式图像">

.img-responsive {display: block;height: auto;max-width: 100%;
}

让图像按比例缩放，不超过其父元素的尺寸
需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center
补充：
height:auto，是指根据块内内容自动调节高度。
height:100%，是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度。
3.容器

<div class="container">...
</div>

.container {padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;
}

把 container 的左右外边距（margin-right、margin-left）交由浏览器决定。
补充：
auto 浏览器设置。
4.网格系统
Bootstrap 3 移动设备优先策略
内容：
决定什么是最重要的。
布局：
优先设计更小的宽度。
基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。
渐进增强：
随着屏幕大小的增加而添加元素。
响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
工作原理：
行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
内容应该放置在列内，且唯有列可以是行的直接子元素。
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。
5.媒体查询
别致的"有条件的 CSS 规则"。
Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。

/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 *//* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

有时候也会在媒体查询代码中包含 max-width，从而将 CSS 的影响限制在更小范围的屏幕大小之内。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

媒体查询有两个部分，先是一个设备规范，然后是一个大小规则。

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

对于所有带有 min-width: @screen-sm-min 的设备，如果屏幕的宽度小于 @screen-sm-max，则会进行一些处理。

Bootstrap 网格的基本结构：

<div class="container"><div class="row"><div class="col-*-*"></div><div class="col-*-*"></div>      </div><div class="row">...</div>
</div>
<div class="container">....

响应式的列重置
以下实例包含了4个网格，但是我们在小设备浏览时无法确定网格显示的位置。
为了解决这个问题，可以使用 .clearfix class和响应式实用工具来解决，如下面实例所示：

<div class="container"><div class="row" ><div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
            box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div><div class="col-xs-6 col-sm-3" style="background-color: #dedef8;box-shadow:
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut. </p></div><div class="clearfix visible-xs"></div><div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
        box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></div><div class="col-xs-6 col-sm-3" style="background-color: #dedef8;box-shadow:
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim </p></div></div>
</div>

偏移列
在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11

<div class="container"><h1>Hello, world!</h1><div class="row" ><div class="col-md-6 col-md-offset-3" style="background-color: #dedef8;box-shadow:
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div></div>
</div>

嵌套列

<div class="container"><h1>Hello, world!</h1><div class="row"><div class="col-md-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><h4>第一列</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div><div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><h4>第二列 - 分为四个盒子</h4><div class="row"><div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p>Consectetur art party Tonx culpa semiotics. Pinterest assumenda minim organic quis.</p></div><div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div></div><div class="row"><div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div><div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.</p></div></div></div></div>
</div>

列排序
您可以很容易地以一种顺序编写列，然后以另一种顺序显示列
您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。

<div class="container"><h1>Hello, world!</h1><div class="row"><p>排序前</p><div class="col-md-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">我在左边</div><div class="col-md-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">我在右边</div></div><br><div class="row"><p>排序后</p><div class="col-md-4 col-md-push-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">我在左边</div><div class="col-md-8 col-md-pull-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">我在右边</div></div>
</div>

6.排版
向任何标题添加一个内联子标题，只需要简单地在元素两旁添加，或者添加 .small class，这样子您就能得到一个字号更小的颜色更浅的文本

<h1>我是标题1 h1. <small>我是副标题1.1 h1<small>我是副标题1.1.1 h1</small></small></h1>
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>

强调
给段落添加强调文本，则可以添加 class=“lead”，这将得到更大更粗、行高更高的文本

<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内，并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>

缩写
定义元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 title 属性添加了文本）。为了得到一个更小字体的文本，请添加 .initialism 到

<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>

7.显示代码
第一种是 <code> 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。
第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre> 标签。
8.表格
9.表单
向父 <form> 元素添加 role=“form”。
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class =“form-control” 。

一个简单排版
<form role="form"><div class="row"><div class="form-group col-sm-12"><div class="col-sm-4"><label for="firstname" class="col-sm-2 control-label">名字</label><input type="text" class="form-control" id="firstname" placeholder="请输入名字"></div><div class="col-sm-4"><label for="firstname" class="col-sm-2 control-label">名字</label><input type="text" class="form-control" id="firstname" placeholder="请输入名字"></div><div class="col-sm-4"><label for="firstname" class="col-sm-2 control-label">名字</label><input type="text" class="form-control" id="firstname" placeholder="请输入名字"></div></div></div></form>

静态控件
当您需要在一个水平表单内的表单标签后放置纯文本时，请在 <p> 上使用 class .form-control-static。

<div class="form-group"><label class="col-sm-2 control-label">Email</label><div class="col-sm-10"><p class="form-control-static">email@example.com</p></div></div>

10.按钮
11.图片
12.辅助类
13.响应式实用工具

Bootstrap 3 学习相关推荐

bootstrap基础学习【菜单、按钮、导航】（四）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>boo ...
Bootstrap的学习分享
大家好,这里是demo软件园,今天为大家分享的是Bootstrap的学习分享. 众所周知Bootstrap是一款简洁.直观.强悍的前端开发框架,让web开发更迅速.简单. 流体布局容器容器的widt ...
Bootstrap 框架学习目录
Bootstrap 框架学习目录转载于:https://www.cnblogs.com/ydchw/p/3708259.html
bootstrap框架学习笔记
bootstrap框架学习笔记 1.Bootstrap简介 2.基本使用 3.容器 4.设备划分 5.栅格系统 6.展示与隐藏 7.其他类前缀 8.组件直接参考开发文档 1.Bootstrap简介 B ...
bootstrap 导航学习
参考网站:www.bootcss.com 学习内容:小的导航栏学习,主要通过bootstrap的js以及jquery来学习. 实现效果: 实例代码: 1 <!DOCTYPE html> 2 ...
通过bootstrap来学习less
很早之前就听说过less了,但是一直拖着没去学习.最近抽空看了less,其实语法很简单,看一遍基本就知道怎么用了.平时自己写页面用less的话,感觉是方便了些,但是难道less的好处就只是这样? 刚好 ...
快速构建网站或移动端页面：关于Bootstrap的学习笔记
最近在设计官网,并进行一些项目的原型设计和开发,寻找了很久,想找到一个更简单.快速的方式,基于一些已有的模板或框架进行快速建设,结果发现很多时间都是徒劳,走过的路分享给大家,以防再度踩坑: 网上搜索原 ...
Bootstrap的学习笔记
1 前言今天开始学习Bootstrap啦~ 2 布局--container 2.1 container的左右两侧会有空白--px-0 container的两侧可能会出现空白,(如果设置了背景色,就会 ...
Vue Bootstrap 结合学习笔记（一）
本文是不才在学习Vue和Bootstrap过程中遇到问题解决的一些思路,主要描述了项目搭建,组件封装.获取.编辑.更新的一步步实现,一些解决方案也没找到正确的官方API,还请大拿们多多提点. 项目介绍 ...
粤嵌打卡第51天（小白带你进入bootstrap的学习（包含常用的页面插件源码供大家ctr+v））
今天我们来学习下在做项目的过程中如何使用Bootstrap来引入比较美观的样式,学完了这篇博客,大家就可以尽情的使用模板了呀! bootstrap官网:https://v3.bootcss.com/g ...

Bootstrap 3 学习

Bootstrap 3 学习相关推荐

最新文章

热门文章