欢迎来到模板无忧!织梦模板,dede模板下载,织梦cms模板,免费网站模板下载站

模板无忧

基于Bootstrap框架新手新手教程

企业模板

  1、栅格系统

  栅格系统的工作原理:

  “行(row)”需要包括在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予适合的排列(aligment)和内补(padding)。

  通过“行(row)”在水平方向创建一组“列(column)”。

  你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。

  类似 .row 和 .col-xs-4 这种预概念的类,可以用来迅速创建栅格布局。Bootstrap 网站源码中概念的 mixin 也可以用来创建语义化的布局。

  通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包括的“列(column)”抵消掉了padding。

  负值的 margin就是下面的示例为何是向外突出是什么原因。在栅格列中的内容排成一行。

  栅格系统中的列是通过指定1到12的值来表示其跨越的范围。比如,三个等宽的列可以用三个 .col-xs-4 来创建。

  假如一“行(row)”中包括了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。

  栅格类适用于与屏幕宽度大于或等于分界点大小的设施 , 并且针对小屏幕设施覆盖栅格类。 因此,在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设施 , 并且针对小屏幕设施覆盖栅格类。 因此,在元素上应用任何 .col-lg-* 没有, 也影响大屏幕设施。

  媒体查看:

  媒体查看是很别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。假如满足那些条件,则应用相应的样式。

  Bootstrap 中的媒体查看允许你基于视口大小移动、显示并隐藏内容。下面的媒体查看在 LESS 文件中用,用来创建 Bootstrap 网格系统中的重要的分界点阈值。

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

  媒体查看有两个部分,先是一个设施规范,然后是一个大小规则。在上面的案例中,设置了下列的规则:

  对于所有带有 min-width: @screen-sm-min 的设施,假如屏幕的宽度小于 @screen-sm-max,则会进行一些处置。

  栅格参数

  下表可以详细查询 Bootstrap 的栅格系统是怎么样在多种屏幕设施上工作的。

  下表概要了 Bootstrap 网格系统怎么样跨多个设施工作:

  响应式的列重置

  以下实例包括了4个网格,但大家在小设施浏览时没办法确定网格显示的地方。

  为知道决这个问题,可以用 .clearfix class和响应式工具来解决,如下面实例所示:

  偏移列

  偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。比如,。col-xs-* 类不支持偏移,但它们可以容易地通过用一个空的单元格来达成该成效。

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

  在下面的实例中,大家有 <p class="col-md-6"></p>,大家将用 .col-md-offset-3 class 来居中这个 p。

  嵌套列

  为了在内容中嵌套默认的网格,请添加一个新的 .row,并在一个已有些 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包括一组列,这组列个数不可以超越12(其实,没需要你需要占满12列)。

  在下面的实例中,布局有两个列,第二列被分为两行四个盒子。

  列排序

  Bootstrap 网格系统另一个完美的特质,就是你可以比较容易地以一种顺序撰写列,然后以另一种顺序显示列。

  你可以非常随便地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序,其中 * 范围是从 1 到 11。

  在下面的实例中,大家有两列布局,左列非常窄,作为侧边栏。大家将用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。

  2、Bootstrap 排版

  HTML 中的所有标题标签,<h2> 到 <h7> 均可用。另外,还提供了 .h2 到 .h7 类,为的是给内联(inline)属性的文本赋予标题的样式。

  在标题内还可以包括 <small> 标签或赋予 .small 类的元素,可以用来标记副标题。

  假如需要向任何标题添加一个内联子标题,仅需容易地在元素两旁添加 <small>,或者添加 .small class,如此子你就能得到一个字号更小的颜色更浅的文本,如下面实例所示:

  页面主体:Bootstrap 将全局 font-size 设置为 14px,line-height 设置为 1.428。这类属性直接赋予 <body> 元素和所有段落元素。另外,<p> (段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。

  列表:

  Bootstrap 支持有序列表、无序列表和概念列表。

  有序列表:有序列表是指以数字或其他有序字符开头的列表。

  无序列表:无序列表是指没特定顺序的列表,是以中国风的着重号开头的列表。假如你不想显示这类着重号,你可以用 class .list-unstyled 来移除样式。你也可以通过用 class .list-inline 把所有些列表项放在同一行中。

  概念列表:在这类的列表中,每一个列表项可以包括 <dt> 和 <dd> 元素。<dt> 代表 概念术语,就像字典,这是被概念的是(或短语)。接着,<dd> 是 <dt> 的描述。你可以用 class dl-horizontal 把 <dl> 行中的是与描述并排显示。

  下面的实例演示了这类种类的列表:

  下表提供了 Bootstrap 更多排版类的实例:

  3、Bootstrap 代码

  Bootstrap 允许你以两种方法显示代码:

  第一种是 <code> 标签。假如你想要内联显示代码,那样你应该用 <code> 标签。

  第二种是 <pre> 标签。假如代码需要被显示为一个独立的块元素或者代码有多行,那样你应该用 <pre> 标签。

  还可以用 .pre-scrollable 类,其用途是设置 max-height 为 350px ,并在垂直方向展示滚动条。

  4、Bootstrap 表格

  Bootstrap 支持的一些表格元素:

  用于表格的样式

  用于表格的行或者单元格

  基本实例

  为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。这种方法看着不少余!?但大家感觉,表格元素用的非常广泛,假如大家为其赋予默认样式或许会影响比如日历和日期选择之类的插件,所以大家选择将此样式独立出来。

  条纹表格

  通过添加 .table-striped class,你将在 <tbody> 内的行上看到条纹,如下面的实例所示:

  带边框的表格

  通过添加 .table-bordered class,你将看到每一个元素周围都有边框,且占整个表格是圆角的,如下面的实例所示:

  悬停表格

  通过添加 .table-hover class,当指针悬停在行上时会出现浅灰色背景,如下面的实例所示:

  精简表格

  通过添加 .table-condensed class,行内边距(padding)被切为两半,以便让表看着更紧凑,如下面的实例所示。这在想让信息看着更紧凑时很有用。

  上下文类

  下表中所列出的上下文类允许你改变表格行或单个单元格的背景颜色。

  响应式表格

  通过把任意的 .table 包在 .table-responsive class 内,你可以让表格水平滚动以适应小型设施(小于 768px)。当在大于 768px 宽的大型设施上查询时,你将看不到任何的差别。

  5、Bootstrap 表单

  基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤:

  向父 <form> 元素添加 role="form"。

  把标签和控件放在一个带有 class .form-group 的 <p> 中。这是获得最好间距所必需的。

  向所有些文本元素 <input>、<textarea> 和 <select> 添加 class="form-control" 。

  内联表单

  为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。

  水平表单

  水平表单与其他表单不只标记的数目上不同,而且表单的呈现形式也不同。如需创建一个水平布局的表单,请按下面的几个步骤进行:

  向父 <form> 元素添加 class .form-horizontal。

  把标签和控件放在一个带有 class .form-group 的 <p> 中。

  向标签添加 class .control-label。

  6、Bootstrap 按钮

  可作为按钮用的标签或元素

  为 <a>、<button> 或 <input> 元素添加按钮类(button class)即可用 Bootstrap 提供的样式。

  以下样式可用于<a>, <button>, 或 <input> 元素上:

  按钮大小

  用 .btn-lg、。btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

  下表列出了获得各种大小按钮的 class:

  按钮状况

  Bootstrap 提供了激活、禁用等按钮状况的 class,下面将进行详细解说。

  激活状况

  按钮在激活时将呈现为被按压的外观(深色的背景、深色的边框、阴影)。

  下表列出了让按钮元素和锚元素呈激活状况的 class:

  禁用状况

  当你禁用一个按钮时,它的颜色会变淡 50%,并失去渐变。

  下表列出了让按钮元素和锚元素呈禁用状况的 class:

  按钮标签

  你可以在 <a>、<button> 或 <input> 元素上用按钮 class。但建议你在 <button> 元素上用按钮 class,防止跨浏览器的不同性问题。

  下面的实例演示了这点:

  7、Bootstrap 图片

  在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性,从而让图片在其父元素中更好的缩放。

  假如需要让用了 .img-responsive 类的图片水平居中,请用 .center-block 类,不要用 .text-center

  图片形状

  通过为 <img> 元素添加以下相应的类,可以让图片呈现不一样的形状。

  8、Bootstrap 辅助类

  文本

  以下不一样的类展示了不一样的文本颜色。假如文本是个链接鼠标移动到文本上会变暗:

  背景

  以下不一样的类展示了不一样的背景颜色。 假如文本是个链接鼠标移动到文本上会变暗:

  其他

  一些实例:

  关闭图标

  用通用的关闭图标来关闭模态框和警告框。用 class close 得到关闭图标。

  三角符号

  通过用三角符号可以指示某个元素具备下拉菜单的功能。注意,向上弹出式菜单中的三角符号是反方向的。

  让内容块居中

  为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。下面列出的类还可以作为 mixin 用。

  显示或隐藏内容

  。show 和 .hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。这类类通过 !important 来防止 CSS 样式优先级问题,就像 quick floats 一样的做法。注意,这类类只对块级元素起用途,另外,还可以作为 mixin 用。

  。hide 类仍然可用,但它不可以对屏幕阅读器起用途,并且从 v3.0.1 版本开始就不主张用了。请用 .hidden 或 .sr-only 。

  另外,。invisible 类可以被用来仅仅影响元素的可见性,也就是说,元素的 display 属性不被改变,并且这个元素仍然可以影响文档流的排布。

  9、Bootstrap 响应式实用工具

  Bootstrap 提供了一些辅助类,以便更快地达成对手机友好的开发。这类可以通过媒体查看结合大型、小型和中型设施,达成内容对设施的显示和隐藏。

  需要小心用这类工具,防止在同一个站点创建完全不一样的版本。响应式实用工具现在只适用于块和表切换。


希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
作者:酱油妹 来源:www.109f.cn 关注: 时间:2022-05-13 22:00
版权声明:凡注明来源为http://www.nsxcb.cn的均为本站原创,转载请注明来源。
本文网址:http://www.nsxcb.cn/HTML/HTMLrumen/20220513/14194.html
凡本站提供教程均已验证教程的准确性。
相关教程
在线客服

织梦模板 整站模板 新手教程 使用技巧