bootstrap 3.x笔记

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意,由于 padding等属性的原因,这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

Copy

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

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

Copy

<div class="container-fluid">
  ...
</div>
时间: 2024-10-01 07:37:53

bootstrap 3.x笔记的相关文章

Bootstrap快速学习笔记(2)表单系列之二

欢迎收看大奥编写的Bootstrap快速学习笔记(2)表单系列之二 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: 表单控件大小 表单控件状态 按钮 图像 详细介绍 表单控件大小表单控件大小可以通过给表单控件添加class类来实现,如果想要比较大,则添加input-lg类,如果想要比较小, 则添加input-sm类,但这仅是对高度进行了处理,如果要对宽度进行处理,需要在每个input控件外围添加div容器并带有col-xs-4类,并 且要在这组控件的外围

Bootstrap快速学习笔记(1)排版系列之二

欢迎收看大奥编写的Bootstrap快速学习笔记(1)排版系列之二 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: 表格 表格行的类 详细介绍 表格表格是Bootstrap的基础组件之一,有一个基础样式和四个附加样式以及一个响应式样式,全部通过class类来实 现,.table:基础表格,这是无论哪种类型的表格都必不可少的类:.table-striped:斑马线表格,更具可读性:.table- bordered:带边框的表格:.table-hover:鼠

Bootstrap快速学习笔记(1)排版系列之一

欢迎收看大奥编写的Bootstrap快速学习笔记(1)排版系列之一 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: 标题 段落 强调内容 粗体和斜体 强调相关的类 文本对齐风格 列表 代码展示 详细介绍 标题 Bootstrap重写了h1-h6标题的样式属性并自定义了.h1-.h6类,并用small标签来显示副标题 段落 Bootstrap重写了p标签的样式属性 强调内容 .lead类改变文本样式 粗体和斜体 粗体<strong><b>斜体

Bootstrap快速学习笔记(2)表单系列之一

欢迎收看大奥编写的Bootstrap快速学习笔记(2)表单系列之一 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: .form-control类 水平表单 内联表单 详细介绍 form-control类把该类直接添加到控件上: 1.宽度变成了100%:2.设置了一个浅灰色(#ccc)的边框:3.具有4px的圆角:4.设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化:5.设置了placeholder的颜色为#999 水平表单最外层form标签要

Bootstrap CSS 3 笔记

<!-- 面包屑导航 HOME / LIBRARY / DATA --> <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data&l

bootstrap 新手学习笔记 代码整理

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 滚动监听(Scrollspy)插件方法</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jqu

《深入理解bootstrap》读书笔记:第二章 整体架构

一.  整体架构 1. CSS-12栅格系统 把网页宽度均分为12等分(保留15位精度)——这是bootstrap的核心功能. 2.基础布局组件 包括排版.按钮.表格.布局.表单等等. 3.jQuery bootstrap插件的基础 4.响应式设计 兼容多个终端.这是bootstrap的终极理念. 5.css插件 提供丰富的样式. 6.js插件 二. 栅格系统 1.基本实现过程 定义容器的大小——跳转边距——媒询 有以下要求: (1)一行(row)数据必须包含在.container中. .con

18. bootstrap例子-dashboard 笔记

html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic

Bootstrap(基础)学习笔记1

Bootstrap到底是什么? 欢迎来到Bootstrap课堂,加入高端大气上档次的web前端开发团队.上一小节Bootstrap做了简单的介绍,下面我们再来了解一下Bootstrap的前世今缘,在右侧是用Bootstrap预设的组件样式,包括按钮.表格.标签.导航等,感兴趣的小伙伴可以先睹为快,后面的章节我们会对这些组件做详细讲解. 2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootSt