摘要:
列表--简介在HTML文档中,列表结构主要有三种:有序列表、无序列表和定义列表。具体使用的标签说明如下: 无序列表 …有序列表 …定义列表 … …Bootstrap根据平时的使用情形提供了六种形式的列表:☑ 普通列表☑ 有序列表☑ 去点列表☑ 内联列表☑ 描述列表☑ 水平描述... 阅读全文
摘要:
代码(一)本节内容相对来说比较简单,一般在个人博客上使用的较为频繁,用于显示代码的风格。在Bootstrap主要提供了三种代码风格: 1、使用来显示单行内联代码 2、使用来显示多行块代码 3、使用来显示用户输入代码预编译版本的Bootstrap将代码的样式单独提取出来: 1、LESS版本,请查阅co... 阅读全文
摘要:
表格表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中,只需要添加对应的类名就可以得到不同的表格风格,在接下来的内容中,我们会详细介绍Bootstrap的表格使用。同样的,如果你对CSS预... 阅读全文
摘要:
实现原理网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。在使用的时候大家可以根据实际情况重新编译LESS(或Sa... 阅读全文
摘要:
下拉菜单(基本用法)小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,它对应的文件:☑ LESS版本:对应的源码文件为 dropdowns.less☑ Sass版本:对应的源码文件为 _dropdowns.scss☑ 编译后的Bootstrap版本:查看boot... 阅读全文
摘要:
导航(基础样式)导航对于一位前端人员来说并不陌生。可以说导航是一个网站重要的元素组件之一,可以便于用户查找网站所提供的各项功能服务。导航的制作方法也是千奇百怪,五花八门。在这一节中将向大家介绍如何使用Bootstrap框架制作各式各样的导航。在Bootstrap框架将导航独立出来成为一个导航组件,根... 阅读全文
摘要:
导航条基础导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个“条”字。其实在Bootstrap框架中他们还是明显的区别。在导航条(navbar)中有一个背景色、而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式。在这一节中将一起探讨Boot... 阅读全文
摘要:
标签在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息,比如说在导航上添加了一个新导航项,可能就会加一个“new”标签,来告诉用户。这是新添加的导航项。那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件,并且以“.label”样式来实现高亮显示。既然他是一个独立的组件... 阅读全文
摘要:
缩略图(一)缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。可以将产品列表页变得更好看。源码文件:☑ LESS版本... 阅读全文
摘要:
进度条在网页中,进度条的效果并不少见,比如一个评分系统,比如加载状态等。就如下图所示的一个评分系统,他就是一个简单的进度条效果:进度条和其他独立组件一样,开发者可以根据自己的需要,选择对应的版本:☑LESS版本:源码文件progress-bars.less☑Sass版本:源码文件_progress-... 阅读全文