Bootstrap
文章平均质量分 74
艺术就是爆炸
这个作者很懒,什么都没留下…
展开
-
Bootstrap源码解读(第九弹:进度条)
进度条基本样式要实现进度条效果要使用两个容器,外容器使用“progress”样式,子容器使用“progress-bar”样式。例如:div class="progress"> div class="progress-bar" style="width:40%">div>div>progress样式主要设置进度条容器的背景色,容器高度、间距等,progress-bar样式设原创 2016-12-24 01:12:33 · 902 阅读 · 0 评论 -
Bootstrap实战(第一弹:栅格实现5等分或8等分)
在使用Bootstrap栅格的时候,我们可以对网页方便的进行模块分割。 要2等分,使用col-md-6即可; 要3等分,使用col-md-4即可; 要4等分,使用col-md-3即可; 要6等分,使用col-md-2即可。 但如果我们要5等分或者8等分怎么办呢?直接使用Bootstrap是不方便进行5等分或者8等分的,但是我们可以参考Bootstrap的栅格写法,来自己写css实现5等分或原创 2017-02-15 23:35:18 · 16177 阅读 · 0 评论 -
Bootstrap源码解读(第一弹:排版)
粗体 可以使用和标签让文本直接加粗。 例如:p>我在学习strong>Bootstrapstrong>p>源码b,strong { font-weight: bold;}斜体 使用标签或来实现。 例如:p>我在学i>Bootstrapi>。p>强调相关的类 强调类都是通过颜色来表示强调 .text-muted:提示,使用浅灰色(#777)原创 2016-12-22 15:48:44 · 1965 阅读 · 0 评论 -
Bootstrap源码解读(第二弹:表单)
基础表单对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset、legend、label标签进行了定制。主要将这些元素的margin、padding和border等进行了细化设置。 这些元素如果使用了类名“form-control”,将会实现一些设计上的定制效果。 1. 宽度变成了100% 2. 设置了一个浅灰色(#ccc)的边框 3. 具有4px的圆原创 2016-12-22 15:54:49 · 1866 阅读 · 0 评论 -
Bootstrap源码解读(第三弹:网格系统)
工作原理数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。如:<div class="container"> <div class="row"></div></div>.container的实现源码:.container { padding-right: 15px; padding-left: 15px; mar原创 2016-12-22 15:56:37 · 1719 阅读 · 0 评论 -
Bootstrap源码解读(第四弹:下拉菜单)
下拉菜单基本用法在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件。因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。 使用方法如下: 1. 使用一个名为“dropdown”的容器包裹了整个下拉菜单元素: 2.原创 2016-12-22 22:35:41 · 1538 阅读 · 0 评论 -
Bootstrap源码解读(第五弹:按钮)
按钮组按钮组和下拉菜单组件一样,需要依赖于bootstrap.js。使用“btn-group”的容器,把多个按钮放到这个容器中。例如:<div class="btn-group">...</div> “btn-group”容器里除了可以使用<button>元素之外,还可以使用其他标签元素,比如<a>标签。不过这里面的标签元素需要带有类名“.btn”。 实现源码如下:.btn-group,.bt原创 2016-12-22 22:38:55 · 1427 阅读 · 0 评论 -
Bootstrap源码解读(第六弹:导航)
基础样式制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式,必须附加另外一个样式才会有效,比如“nav-tabs”、“nav-pills”之类。例如:<ul class="nav"> <li><a href="##">1</a></li> <li><a href="##">2</a></li> <li><a href="##">3</a></li>原创 2016-12-22 22:41:07 · 663 阅读 · 0 评论 -
Bootstrap源码解读(第七弹:导航条)
基础导航条要制作一个基础导航条,要在制作导航的列表基础上添加类名“navbar-nav”,然后在列表外部添加一个容器(div),并且使用类名“navbar”和“navbar-default”。例如:div class="navbar navbar-default" role="navigation"> ul class="nav navbar-nav"> li cl原创 2016-12-23 14:51:05 · 1128 阅读 · 0 评论 -
Bootstrap源码解读(第八弹:标签、徽章、缩略图和警示框)
标签标签组件通常用来做一些高亮显示用以提醒。使用“.label”样式来实现,可以使用span这样的行内标签,例如:<span class="label">标签</span> 实现源码如下:.label { display: inline; padding: .2em .6em .3em; font-size: 75%; font-weight: bold; line-heigh原创 2016-12-23 17:18:39 · 1141 阅读 · 0 评论 -
Bootstrap源码解读(第十一弹:模态弹出框)
模态弹出框依赖于Bootstrap提供的js文件,可以单独引入modal.js,也可以直接引入bootstrap.js。模态弹出框的结构Bootstrap框架中的模态弹出框,使用了“modal”、“modal-dialog”和“modal-content”样式。 “modal-content”中是弹出窗真正的内容,主要包括三个部分: 弹出框头部,使用“modal-header”,主要包括标题和关原创 2016-12-26 17:24:15 · 2645 阅读 · 0 评论 -
Bootstrap源码解读(第十弹:媒体对象、列表组和面板)
媒体对象基础媒体对象例如:div class="media"> a class="pull-left" href="#"> img class="media-object" src="http://placehold.it/350x150" alt="..."> a> div class="media-body"> h4 clas原创 2016-12-24 20:04:04 · 878 阅读 · 0 评论 -
Bootstrap实战(第二弹:tooltip的基本使用)
在html中引入bootstrap的css和js,然后在需要提示的标签上,加上:data-toggle="tooltip" data-placement="bottom" title="12345678901"然后在JS中加入:$("[data-toggle='tooltip']").tooltip();即可。例如,在<a>标签上加上以上代码:<a data-toggle="tooltip" dat原创 2017-02-22 14:12:30 · 7312 阅读 · 1 评论