Bootstrap核心应用总结-优快云博客

Bootstrap主要应用总结

<p>

文件说明：

Bootstrap.less文件：设置全局的排版和链接显示风格，但是其中去掉Body的margin属性，使用@baseFontFamily,@baseFontStyle,@linkColor等变量来控制基本排版

布局（layout）:创建页面基础模板的布局：分为固定式布局（Fixed）和流式布局（Fluid）

排版（Typography）,t表格（Table）, 表单（Forms）,按钮（Buttons）四大内容

自定义网格系统：通过修改variabless.less的参数值来定义网格系统。参数包括：@gridColumns(列数)：默认值：12;@gridColumnWidth(每列的宽度):默认值：60px; @gridGutterWidth(列间距)：默认值20px

获得更多设备兼容：通过修改responsive.less

网格系统：默认的Bootstrap网格系统提供了一个宽940px和12列的网格分布，更好的适应各种终端设备

第一行：分为 12 ：共12个网格 940/12px,每个网格的宽度

第二行：分为宽度均为 4 的三列：共3个网格

第三行：分为宽度为 4 和宽度为 8 的两列：共2个网格

第四行：分为宽度均为 6 的两列：共两个网格

第五行：宽度为 12 的一列：共一个网格

实例：实现第三行宽度为4和宽度为8的两个div

</p>

<div class="span4">这是第三行宽度为4的div布局样式</div>

<div class="span8">这是第三行宽度为8的div布局样式</div>

</div>

<p>

Bootstrap:需要偏移时提供了offset属性来操作

实例：offset

</p>

<div class="span4">这是第三行宽度为4的div布局样式</div>

<div class="span4 offset4">这是第三行宽度为4的需要偏移的div布局样式</div>

</div>

<p>

Bootstrap：嵌套列实现页面更复杂的布局，只需要在原有的div中加入row和相应的长度的span*div

注意：嵌套的div长度之和不能大于他的父div的长度，否则会出现益处叠加，父div的长度值可以修改

实例：嵌套

</p>

<div class="span12">这是第一层是父元素

<div class="span6">这是在嵌套中的两个长度均为6的div</div>

<divclass="span6">这是在嵌套中的两个长度均为6的div</div>

</div>

<p>

Bootstrap：流式格网系统（Fluid grid system）

注意：流式格网系统使用的‘%’而不是固定的‘px’来确定页面要素的宽度，只需要简单的将row改为row-fluid 就可以将fixed 行改为流式（fluid）

嵌套的流式网格和固定的网格不同，不需要匹配父元素的宽度，子元素要用100%来表示占满父元素的页面宽度

实例：流式格网系统

</p>

<div class="span4">这是不同宽度为4的流式格网系统</div>

<div class="span8">这是不同宽度为8的流式格网系统</div>

</div>

<p>

Bootstrap：固定布局（fixed）和流式布局（Fluid）

实例：固定布局和流式布局

</p>

这是固定是布局

</div>

这是左边导航栏内容流式布局

</div>

这是右边内容流式布局

</div>

<p>

排版（Typography）包括：标题（Headings）,段落（paragraphs）,列表（lists）以及其他内联元素，通过修改variables.less的两个变量：@baseFontSize和@baseLineHeight

注意：'<strong>和<em>两个标签：都是强调文本，缩写：<abbr>。引用文字：<blockquote>:引用的文字内容和<small>是可选的元素'

实例：

</p>

<p>凌冬将至. 我是黑暗中的利剑，长城上的守卫，抵御寒冷的烈焰，破晓时分的光线，唤醒眠者的号角，守护王国的坚盾。

</p> 守夜人军团总司令.<small>蒙奇.D.<cite title="">张三</cite></small>

</blockquote>

</div>

<p>凌冬将至. 我是黑暗中的利剑，长城上的守卫，抵御寒冷的烈焰，破晓时分的光线，唤醒眠者的号角，守护王国的坚盾。

</p> 守夜人军团总司令.<small>蒙奇.D.<cite title="">张三</cite></small>

</blockquote>

</div>

<p>

列表（Lists）：提供了三种标签来表现不同类型的列表。"<ul>":表示无需列表，<ulcalss="unstyled">表示无样式的无需列表，<ol>：表示有序列表M<dl>表示描述列表

<dl class="dl-horizontal">:表示竖排描述列表

</p>

<p>

表格（Table）:<table><tr><th><td>等标签来表现表格，主要提供了四个css的类来控制表格的边和结构。参数如下：

名字类名描述

Default :None :没有样式，只有行和列

Basic table 只有在行间有竖线

Bordered table-bordered 圆角和添加外边框

Zebra-stripe table-striped 为奇数行添加灰色的背景色

Condensed table-condensed 将横向的padding对切

实例：表格制作

注意：.control-group:控制表单输入，错误等状态

</p>

<labelclass="control-label" for="focusedInput" >FocusedInput</label>

<inputclass="input-xlarge focused" id="focusedInput"type="text" value="This is focused"/>

</div>

<label class="control-label"for="selectError">Select with success</label>

<divclass="controls">

<selectid="selectError">

</select>

<spanclass="help-inline">Woohoo!</span>

</div>

<buttontype="submit" class="btn btn-primary">Savechange</button>

<buttonclass="btn">Cancel</button>

</div>

</fieldset>

</form>

</div>

<p>

表单（Forms）:

名字类名描述

Vertical .form-vertical 堆放式，可控制的左对齐标签

Inline .form-inline 左对齐标签和简约的内联控制块

Search .form-search 方大圆角

Horizontal .form-horizontal 左漂浮，右对齐标签

</p>

<p>

按钮（Buttons）:样式包括多种形式：btn,btn-primary,btn-info,btn-success等不同颜色的按钮，也可以通过.btn-large .btn-mini等css的class 控制按钮的大小

能够同时用在标签：a,button, input 上

</p>

<p>

Bootstrap:内建大量的组件，包括：按钮（buttons）导航（Navigation）,标签（Labels）,徽章（Badges）,排版（Typography）,缩略图（thumbnails）,提醒（Alert）

进度条（progressbar）,杂项（Miscellaneous）

按钮组（buttongroup）:只需要使用：btn-group类和一系列的<a>或者一系列的<button>标签可以生成一个按钮或者按钮工具条

实例：按钮式下拉菜单

</p>

<button class="btn btn-largeben-primary">Middle</button>

<button class="btn btn-largeben-primary">Right</button>

</div>

<h2>按钮工具条</h2>

<button class="btn">11这是第一组</button>

</div>

<button class="btn">1这是第二组</button>

</div>

<h3>按钮下拉菜单</h3>

<p></p>

<button class="btn btn-primary dropdown-toggle"data-toggle="dropdown">Action<spanclass="caret"></span></button>

<li><ahref="#">Active</a></li>

<li><ahref="#">Another</a></li>

<li><ahref="#">Something else here</a></li>

<liclass="divider"></li>

<li><ahref="#">Separated link</a></li>

</ul>

</div>

</div>

<p>

轻量单行（Nav,tab,and pills):所有的导航组件包括tabs,pills,lists等标签，都必须使用 .nav的类实现基础的导航标签。还可以利用.nav-stacked类来实现堆叠式---就是竖式导航条

实例：四种导航条形式

</p>

<h2>基础tabs导航条(横排)</h2>

<li><a href="#">Profile</a></li>

<li><a href="#">Messages</a></li>

</ul>

</div>

<h3>基础pills导航条(横排)</h3>

<<li><a href="#">Profile</a></li>

<li><a href="#">Messages</a></li>

</ul>

</div>

<h3>竖排tabs导航条(竖排)</h3>

<liclass="active"><ahref="#">Home</a></li>

<<li><a href="#">Profile</a></li>

<li><ahref="#">Messages</a></li>

</ul>

</div>

<h3>竖排pills导航条(竖排)</h3>

<liclass="active"><ahref="#">Home</a></li>

<<li><ahref="#">Profile</a></li>

<li><ahref="#">Messages</a></li>

</ul>

</div>

<p>

导航的下拉列表：就是列表与导航双向组合：

实例：导航下拉列表

</p>

<h2>基础Nav List</h2>

<li class="nav-header">List header</li>

<li><a href="#">Library</a></li>

<li><a href="#">Application</a></li>

<li class="nav-header">Another list header</li>

<li><a href="#">Setting</a></li>

</ul>

</div>

<h2>图标List</h2>

<li class="nav-header">List header</li>

<li><a href="#"><iclass="icon-book"></i>Library</a></li>

<li><a href="#"><iclass="icon-pencil"></i>Application</a></li>

<li class="nav-header">Another list header</li>

<li><a href="#">Setting</a></li>

</ul>

</div>

<h3>pills式的下拉菜单</h3>

<li class="dropdown"><aclass="dropdown-toggle" data-toggle="dropdown"href="#">Dropdown<bclass="caret"></b></a>

<ulclass="dropdown-menu">

<li><ahref="#">Active</a></li>

<li><ahref="#">Another</a></li>

<li><ahref="#">Something else here</a></li>

<liclass="divider"></li>

<li><ahref="#">Separated link</a></li>

</ul>

</li>

</ul>

</div>

<p>

导航条（Navbar）：基础类是：navbar-fixed-top(置顶)或者navbar-fixed-bottom(置底)，navbar中还可以使用form要素：比如：navbar-form,还支持响应式操作，通过

.nav-collapse或者直接是.collapse类实现

实例：导航条总结：包括下拉菜单，排列，搜索框等

</p>

<spanclass="icon-bar"></span>

<spanclass="icon-bar"></span>

</a>

<a class="brand"href="#">Project name</a>

<divclass="nav-collapse">

<ulclass="nav">

<liclass="dropdown"><a href="#" class="dropdown-toggle"data-toggle="dropdown">Dropdown<bclass="caret"></b></a>

<ulclass="dropdown-menu">

<li><ahref="#">Action</a></li>

<li><ahref="#">Another</a></li>

<li><ahref="#">Anotherwww</a></li>

<liclass="divider"></li>

<liclass="nav-header"> Nav header</li>

<li><ahref="#">afadfadfa</a></li>

<li><ahref="#">argrgggg</a></li>

</ul>

</li>

</ul>

<formclass="navbar-search pull-left" action="">

<inputclass="search-query span2" type="text"placeholder="Search"/>

</form>

<liclass="divider-vertical"></li>

<liclass="dropdown"><a href="#"class="dropdown-toggle"data-toggle="dropdown">Dropdown<b class="caret"></b></a>

<ulclass="dropdown-menu">

<li><ahref="#">Active</a></li>

<li><ahref="#">Another active</a></li>

<li><ahref="#"> Something else here</a></li>

<liclass="divider"></li>

<li><ahref="#">Separated link</a></li>

</ul>

</li>

</ul>

</div>

<p>

页码（Pagination）：包括两种翻页组件，六种样式,在此只列举了四种

</p>

</ul>

<li class="active">Library</li>

</ul>

<li><a href="#">Library</a><spanclass="divider">/</span></li>

</ul>

</div>

<ul>

</ul>

</div>

<li><a href="#">Previous</a></li>

</ul>

<li class="previous"><ahref="">← Older</a></li>

<li class="next"><a href="">Newer&rarr</a></li>

</ul>

</div>

<p>

标签（Label）,徽章（Badges）, 排版（Typographic）,缩略图（Thumbnails）

参数类：.label .badge .label-success .badge-success .label-warning .label-important|info|inverse 等这几种类，组成标签和相应的徽章

实例：

</p>

<div>

</div>

<p>

排版（Typographic）:涉及到两个组件：Hero-unit,Page-header.Hero-unit是一个轻量级可扩展的组件

实例：

</p>

<divclass="container-fliud">

<h1>Hello World!</h1>

<p>简单的hero unit</p>

</div>

<h1>Hello World!<small>小蚊子</small></h1>

<div>

排版（Typographic）:涉及到两个组件：Hero-unit,Page-header.Hero-unit是一个轻量级可扩展的组件

</div>

<p>

缩略图（Thumbnails）:是作为图片，视频，文字的格网结构展示，只需要thumbnails标签可实现

缩略图包括：默认缩略图，可定制缩略图，环绕式缩略图

实例：

</p>

<h2>环绕式缩略图</h2>

</a></li>

</a></li>

</ul>

</div>

<h2>可定制缩略图</h2>

<imgsrc="http://placehold.it/260x180" alt=""/>

<divclass="caption">

<h5>saregseryw5</h5>

</div>

</li>

</ul>

</div>

<p>

提醒区域（Alerts）,进度条（ProgressingBar）

实例：

</p>

<h3>alert例子</h3>

<strong>测试</strong>这是alert info 提醒区

</div>

</div>

Bootstrap总结

相关推荐