#BootStrap

Bootstrap按钮组

  单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等。本文将详细介绍Bootstrap按钮组 使用方法  按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运行。不过我们同样可以直接只调用bootstrap.j...
代码星球 ·2020-05-24

Bootstrap下拉菜单

  网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换、有上下文的菜单。而且在各种交互状态下的菜单展示需要和javascript插件配合才能使用。本文将详细介绍Bootstrap下拉菜单 使用方法  在使用Bootstrap框架的下拉菜单时,必须调用B...
代码星球 ·2020-05-24

Bootstrap辅助类

  Bootstrap提供了一组工具类,用于辅助项目的开发。本文将详细介绍Bootstrap辅助类 文本色  通过颜色来展示意图,Bootstrap提供了一组工具类。这些类可以应用于链接,并且在鼠标经过时颜色可以还可以加深,就像默认的链接一样.text-muted:提示,使用浅灰色(#777).text-pr...
代码星球 ·2020-05-24

Bootstrap栅格系统

  Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。栅格系统没有官方的定义,但根据网上的各种描述,可以这样定义,以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。本文将详细介绍Bootstrap栅格系统 实现原理 ...
代码星球 ·2020-05-24

Bootstrap学习目录

  Bootstrap与CSS的关系,类似于javascript与jQuery的关系,原理与应用的关系。只是jQuery不再火爆,而Bootstrap依然火热,它在github有着超过100万的关注数。一般地,一个简单的前端项目可以由Bootstrap和jQuery搭建而成。Bootstrap的出现,让我们对栅格布局、...
代码星球 ·2020-05-24

Bootstrap图标

  小图标icon是一个优秀Web中不可缺少的一部分,起到画龙点睛的效果。在Bootstrap框架中也为大家提供了250多个不同的icon图片。本文将详细介绍Bootstrap图标 原理分析  Bootstrap框架中的图标都是字体图标,其实现原理就是通过@font-face属性加载了字体@font-face...
代码星球 ·2020-05-24

Bootstrap图像

  图像在网页制作中也是常要用到的元素,本文将详细介绍Bootstrap图像 响应式图片  通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width:100%;、 height:auto; 和&nbs...
代码星球 ·2020-05-24

Bootstrap概述

  Bootstrap是简单、灵活的用于搭建WEB页面的HTML、CSS、Javascript的工具集。Bootstrap基于HTML5和CSS3,具有漂亮的设计、友好的学习曲线、卓越的兼容性,还有12列响应式栅格结构,丰富的组件等等。按照官网的宣传来说,Bootstrap是最受欢迎的HTML、CSS和JS框架,用于开...
代码星球 ·2020-05-24

Bootstrap表格

  表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中,只需要添加对应的类名就可以得到不同的表格风格,本文将详细介绍Boostrap表格 基本实例  Boostrap将表格<table>...
代码星球 ·2020-05-24

Bootstrap排版——HTML元素的样式重定义

  Bootstrap对默认的HTML元素进行了CSS样式定义,使得各种基本结构套用出来的HTML页面更加美观。本文将详细介绍Bootstrap中排版相关的内容 标题【h】  HTML中的所有标题标签,<h1> 到 <h6> 均可使用  默认情况下,从h1...

Bootstrap自动定位浮标

  Affix插件主要功能就是通过插件给某个元素(需要固定的元素)添加或删除position:fixed,实现元素在浏览器窗口的粘性固定效果。本文将详细介绍Bootstrap自动定位浮标 基本用法  首先,来看一个苹果官网对自动定位浮标的应用  从上面的git图中可知,Macbook一栏滚动到一定高度时,固定...

Bootstrap图片轮播

  图片轮播效果在Web中常常能看到,很多人也称之为幻灯片。其主要显示的效果就是多幅图片轮流播放。鼠标悬停在图片时会暂停播放,如果鼠标悬停或单击右下角圆点时,会显示对应的图片。这种图片轮播效果,在Bootstrap框架中是通过Carousel插件来实现的。本文将详细介绍Bootstrap图片轮播 结构  一个...
代码星球 ·2020-05-24

Bootstrap手风琴效果

  Bootstrap框架中Collapse插件(折叠)其实就是我们常见的手风琴效果。当单击一个触发元素时,在另外一个可折叠区域进行显示或隐藏,再次单击时可以反转显示状态。经典的场景是多个折叠区域的手风琴风格以及单一title/content的风格,本文将详细介绍Bootstrap手风琴效果 结构  手风琴最...
代码星球 ·2020-05-24

Bootstrap按钮插件

  按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态、正在加载状态、正常状态等。本文将详细介绍Bootstrap按钮插件 加载状态  通过按钮可以设计状态提示,当单击按钮时,会显示loading状态信息。例如,点击“加载”按钮,会触发按钮的加载的状态  通过添加&nbs...
代码星球 ·2020-05-24

Bootstrap弹出框

  表面上看,弹出框其实就是一种特殊的提示框,只是多了一个标题而已。但实际上,还是有不同之处的。本文将详细介绍Bootstrap弹出框 基本用法  在制作提示框(tooltip)时,可以使用<button>或者<a>标签元素,而且通过data-属性来声明提示框的信息。而弹出框popov...
代码星球 ·2020-05-24
首页上一页...1415161718...下一页尾页