bootstrap表格大小.docx

bootstrap表格大小.docx

《bootstrap表格大小.docx》由会员分享，可在线阅读，更多相关《bootstrap表格大小.docx（10页珍藏版）》请在冰豆网上搜索。

bootstrap表格大小

竭诚为您提供优质文档/双击可除

bootstrap表格大小

　　篇一：

bootstrap知识简单归纳

　　bootstrap响应式实用工具---目前只适用于块和表切换

　　bootstrap字形图标（glyphicons）

　　什么是字形图标（glyphicons）？

　　字形图标（glyphicons）是在web项目中使用的图标字体。

　　字形图标（glyphicons）列表

　　用法

　　如需使用图标，只需要简单地使用下面的代码即可。

请在图标和文本之间保留适当的空间。

　　在线定制字形图标（glyphicons）

　　插入符

　　使用插入符表示下拉功能和方向。

使用带有classcaret的元素得到该功能。

关闭图标

　　使用通用的关闭图标来关闭模态框和警告框。

使用classclose得到关闭图标。

　　快速浮动

　　您可以分别使用classpull-left或pull-right来把元素向左或向右浮动。

下面的实例演示了这点。

　　如需对齐导航栏中的组件，请使用.navbar-left或.navbar-right代替。

请查看bootstrap导航栏。

　　居中内容块

　　使用classcenter-block来居中元素。

　　清除浮动

　　如需清除元素的浮动，请使用.clearfixclass。

　　显示和隐藏内容

　　您可以通过使用class.show和.hidden来强行设置元素显示或隐藏（包括屏幕阅读器）。

屏幕阅读器

　　您可以通过使用class.sr-only来把元素对所有设备隐藏，除了屏幕阅读器。

　　bootstrap下拉菜单（dropdowns）

　　对齐

　　通过向.dropdown-menu添加class.pull-right来向右对齐下拉菜单class="dropdown-menupull-right"

　　标题

　　您可以使用classdropdown-header向下拉菜单的标签区域添加标题

　　bootstrap按钮组

　　按钮组允许多个按钮被堆叠在同一行上。

当你想要把按钮对齐在一起时，这就显得非常有用。

您可以通过bootstrap按钮（button）插件添加可选的javascript单选框和复选框样式行为

　　bootstrap按钮下拉菜单

　　本章将讲解如何使用bootstrapclass向按钮添加下拉菜单。

如需向按钮添加下拉菜单，只需要简单地在在一个.btn-group中放置按钮和下拉菜单即可。

您也可以使用来指示按钮作为下拉菜单。

　　　　data-toggle="dropdown">

　　原始

　　功能

　　另一个功能

　　其他

　　分离的链接

　　分割的按钮下拉菜单

　　原始

　　　　data-toggle="dropdown">

　　切换下拉菜单

　　功能

　　另一个功能

　　其他

　　分离的链接

　　按钮下拉菜单的大小

　　您可以使用带有各种大小按钮的下拉菜单：

.btn-large、.btn-sm或.btn-xs

　　按钮上拉菜单

　　菜单也可以往上拉伸的，只需要简单地向父.btn-group容器添加.dropup即可。

class="btn-groupdropup"

　　bootstrap输入框组

　　本章将讲解bootstrap支持的另一个特性，输入框组。

输入框组扩展自表单控件。

使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。

　　通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。

例如，您可以添加美元符号，或者在twitter用户名前添加@，或者应用程序接口所需要的其他公共的元素。

　　向.form-control添加前缀或后缀元素的步骤如下：

　　把前缀后后缀元素放在一个带有class.input-group的中。

　　接着，在相同的内，在class为.input-group-addon的内放置额外的内容。

把该放置在元素的前面或者后面。

　　为了保持跨浏览器的兼容性，请避免使用元素，因为它们在webkit浏览器中不能完全渲染出效果。

也不要直接向表单组应用输入框组的class，输入框组是一个孤立的组件。

　　$

　　.00

　　输入框组的大小

　　您可以通过向.input-group添加相对表单大小的class（比如.input-group-lg、input-group-sm、input-group-xs）来改变输入框组的大小。

输入框中的内容会自动调整大小。

复选框和单选插件

　　您可以把复选框和单选插件作为输入框组的前缀或者后缀元素，如下面的实例所示：

　　按钮插件

　　您也可以把按钮作为输入框组的前缀或者后缀元素，这个时候您就不是添加.input-group-addonclass，您需要使用class.input-group-btn来包裹按钮。

这是必需的，因为默认的浏览器样式不会被重写

　　go!

　　带有下拉菜单的按钮

　　　　dropdown-toggle"data-toggle="dropdown">

　　下拉菜单

　　功能

　　另一个功能

　　其他

　　分离的链接

　　bootstrap导航元素--它们使用相同的标记和基类.nav。

　　表格导航或标签

　　创建一个标签式的导航菜单：

　　以一个带有class.nav的无序列表开始。

　　添加class.nav-tabs。

　　胶囊式的导航菜单

　　基本的胶囊式导航菜单

　　如果需要把标签改成胶囊的样式，只需要使用class.nav-pills代替.nav-tabs即可，

　　垂直的胶囊式导航菜单

　　您可以在使用class.nav、.nav-pills的同时使用class.nav-stacked，让胶囊垂直堆叠。

　　两端对齐的导航

　　您可以在屏幕宽度大于768px时，通过在分别使用.nav、.nav-tabs或.nav、.nav-pills的同时使用class.nav-justified，让标签式或胶囊式导航菜单与父元素等宽。

在更小的屏幕上，导航链接会堆叠。

　　禁用链接

　　对每个.navclass，如果添加了.disabledclass，则会创建一个灰色的链接，同时禁用了该链接的:

hover状态

　　注意：

该class只会改变的外观，不会改变它的功能。

在这里，您需要使用自定义的javascript来禁用链接$（function（）{$（"a"）.bind（"click",function（）{returnfalse;}）;}）;

　　导航下拉菜单

　　带有下拉菜单的标签

　　向标签添加下拉菜单的步骤如下：

　　以一个带有class.nav的无序列表开始。

　　添加class.nav-tabs。

　　添加带有.dropdown-menuclass的无序列表。

　　java

　　swing

　　jmeter

　　ejb

　　分离的链接

　　篇二：

bootstrap学习总结

　　bootstrap学习笔记

　　$1.0强调内容

　　在实际项目中，对于一些重要的文本，希望突出强调的部分都会做另外的样式处理。

bootstrap同样对这部分做了一些轻量级的处理。

　　如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。

用法如下：

　　效果查看最右侧结果窗口。

　　“.lead”对应的样式如下：

　　/*源码查看bootstrap.css文件第470行~480行*/

　　除此之外，

　　bootstrap还通过元素标签:

、、和给文本做突出样式处理。

/*源码查看bootstrap.css文件第55行~第58行*/

　　/*源码查看bootstrap.css文件第481行~第484行*/

　　/*源码查看bootstrap.css第485行~第487行*/

　　$1.1.粗体

　　粗体就是给文本加粗，在普通的元素中我们一般通过font-weight设置为bold关键词给文本加粗。

在bootstrap中，可以使用和标签让文本直接加粗。

　　/*源码查看bootstrap.css文件第55行~第58行*/

　　例如，下面的代码使用标签定义了强调文本：

　　$1.2斜体

　　在排版中，除了用加粗来强调突出的文本之外，还可以使用斜体。

斜体类似于加粗一样，除了可以给元素设置样式font-style值为italic实现之外，在bootstrap中还可以通过使用标签或来实现。

例如，下面的代码使用了和标签定义了强调文本：

　　$1.3强调相关的类

　　在bootstrap中除了使用标签、等说明正文某些字词、句子的重要性，bootstrap还定义了一套类名，这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过颜色来表示强调，具本说明如下：

　　.text-muted：

提示，使用浅灰色（#999）.text-primary：

主要，使用蓝色（#428bca）.text-success：

成功，使用浅绿色（#3c763d）

　　.text-info：

通知信息，使用浅蓝色（#31708f）.text-warning：

警告，使用黄色（#8a6d3b）.text-danger：

危险，使用褐色（#a94442）

　　具本源码查看bootstrap.css文件第500行~第532行：

　　$1.4文本对齐风格

　　在排版中离不开文本的对齐方式。

在css中常常使用text-align来实现文本的对齐风格的设置。

其中主要有四种风格：

　　左对齐，取值left

　　居中对齐，取值center

　　右对齐，取值right

　　两端对齐，取值justify

　　为了简化操作，方便使用，bootstrap通过定义四个类名来控制文本的对齐风格：

　　.text-left：

左对齐

　　.text-center：

居中对齐

　　.text-right：

右对齐

　　.text-justify：

两端对齐

　　具体源码查看bootstrap.css文件第488行~第499行：

　　例如下面的四行代码，分别定义文本的四种不同的对齐风格：

　　特别声明：

目前两端对齐在各浏览器下解析各有不同，特别是应用于中文文本的时候。

所以项目中慎用。

$1.5列表--去点列表

　　小伙伴们可以看到，在bootstrap中默认情况下无序列表和有序列表是带有项目符号的，但在实际工作中很多时候，我们的列表是不需要这个编号的，比如说用无序列表做导航的时候。

bootstrap为众多开发者考虑的非常周道，通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。

/*源码请查看bootstrap.css文件第580行~第583行*/

　　从示例中可以看出，除了项目编号之外，还将列表默认的左边内距也清０了。

　　$1.6列表--内联列表

　　bootstrap像去点列表一样，通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。

也可以说内联列表就是为制作水平导航而生。

/*源码查看bootstrap.css文件第584行~第593行*/

　　$1.7列表--定义列表

　　对于定义列表而言，bootstrap并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果。

/*源码请查看bootstrap.css文件第594行~第607行*/

　　篇三：

bootstrap中css的学习

　　bootstrap学习资料整理

　　如何使用bootstrap

　　任何疑问都可以咨询本人：

148334733

　　bootstraptemplate

　　hello,world!

　　meta/viewport用来告诉移动客户端，在显示网页的时候仍然显示原大小。

（禁止缩放）bootstrap.min.css是压缩版的css样式

　　bootstrap.min.js是压缩版的js样式

　　jquery.min.js是压缩版的jq样式

　　这就构成了一个最为简单最为常见的一个bootstrap结构和所需要的东西。

　　实现居中用.container包裹页面上的内容即可实现居中对齐。

在不同的媒体查询阈值范围内都为container设置了width，用以匹配栅格系统。

　　注意，由于设置了padding和固定宽度，.container不能嵌套。

　　...

　　栅格系统“行（row）”必须包含在.container中，以便为其赋予合适的排列（aligment）

　　和内补（padding）。

　　使用“行（row）”在水平方向创建一组“列（column）”。

　　你的内容应当放置于“列（column）”内，而且，只有“列（column）”可以作为行（row）”的直接子元素。

　　类似predefinedgridclasseslike.rowand.col-xs-4这些预定义的栅格class可以用来快速创建栅格布局。

bootstrap源码中定义的mixin也可以用来创建语义化的布局。

　　通过设置padding从而创建“列（column）”

　　之间的间隔（gutter）。

然后通过为第

　　一和最后一样设置负值的margin从而抵消掉padding的影响。

　　栅格系统中的列是通过指定1到12的值来表示其跨越的范围。

例如，三个等宽的列可以使用三个.col-xs-4来创建。

　　通过研究案例，可以将这些原理应用到你的代码中。

　　列偏移

　　使用.col-md-offset-*可以将列偏移到右侧。

这些class通过使用*选择器将所有列增加了列的左侧margin。

例如，.col-md-offset-4将.col-md-4向右移动了4个列的宽度。

记住：

永远是12份。

　　为了使用内置的栅格将内容嵌套，通过添加一个新的.row和一系列.col-md-*列到已经存在的.col-md-*列内即可实现。

嵌套row所包含的列加起来应该等于12。

level1:

.col-md-9

　　level2:

.col-md-6

　　level2:

.col-md-6

　　level1:

.col-md-9

　　level2:

.col-md-6

　　level2:

.col-md-6

　　列排序

　　通过使用.col-md-push-*和.col-md-pull-*就可以很容易的改变列的顺序。

.col-md-9.col-md-push-3把九份内容放到三份去

　　.　　

col-md-3.col-md-pull-9把三份的内容放到九份去

　　.col-md-9.col-md-push-3.col-md-3.col-md-pull-9

　　html中的所有标题标签，从到均可用。

另外，还提供了.h1到.h6class，为的是给inline属性的文本赋予标题的样式。

在标题内还可以包含标签或.small元素，可以用来标记副标题。

　　页面主体bootstrap将全局font-size设置为14px，line-height为1.428。

这些属性直接赋给和所有段落元素。

另外，　　（段落）还被设置了等于1/2行高的底部外边距（margin）（即10px）。

　　通过添加.lead可以让段落突出显示。

小号文本

　　对于不需要强调的inline或block类型的文本，使用标签包裹，其内的文本将被设置为父容器字体大小的85%。

标题元素中嵌套的元素被设置不同的font-size。

　　你还可以为行内元素赋予.small以代替任何标签。

　　对齐class