Bootstrap边框布局

我们可以利用bootstrap的.container样式进行固定宽度布局。

如果是做成模板让别人选择的话,比如可以选择全屏和固定宽度,我们可以通过以下来实现!

其实下边的做法就是复制了一个.container

定义一个.boxed边框样式,当需要边框的时候把它加在body里,<[......]

阅读全文

飞鱼

.page-header - Bootstrap页面头部/段落标题样式

bootstrap内置的.page-header样式会在底部添加一个边框。并自动产生边距。相当于底部添加了一个<hr>

这个样式我们可能经常用到,最常见的就是在一篇文章里多次出现段落标题。如下图:

bootstrap page header
[cray[......]

阅读全文

Tags:
飞鱼

Bootstrap嵌入响应式视频iframe框架embed-responsive

Bootstrap中利用embed-responsive样式可以嵌入响应式框架:<iframe>、<embed>、<video> 和 <object> 元素。

.embed-responsive——指定div为具有响应式特性的嵌入内容的组件;[......]

阅读全文

飞鱼

Bootstrap标准模板

本模板是bootstrap标准模板,html5页面,utf-8,里边加入bootstrap需要用的css和js文件。使用的时候可以直接复制此页面。代码如下:

 

上述代码可直接复制使用,里边的css和js文件可以远[......]

阅读全文

Tags:
飞鱼

让bootstrap菜单变成鼠标以上显示下拉

因为bootstrap是为移动而开发的,所以导航下拉菜单是鼠标点击才显示下拉菜单。但是我们在电脑上看,一般都是让鼠标移上显示下拉菜单呢。那么在bootstrap中如何设置呢?

只需要在网页最下边添加一段js即可。

注意js的[......]

阅读全文

Tags:
飞鱼

bootstrap中给图片添加边框(thumbnail)

bootstrap中,如何图片添加边框呢?

我们通过bootstrap内置thumbnail样式来添加边框。

1,是直接在<img>里直接添加thumbnail样式

bootstrap边框

2,是给<div>[......]

阅读全文

飞鱼

Bootstrap用Well样式实现圆角边框嵌入效果

在boostrap中,well样式可以为元素添加边框,圆角及嵌入效果

用法:

<div class="well">Look, I'm in a well</div>

boostrap well

通过调整内边距padding,还有2中样式well-lg和well-sm,一种大,一[......]

阅读全文

Tags:
飞鱼

Bootstrap中如何让响应式图片(img-responsive)水平居中

我们在用bootstrap排版内容的时候,有的时候在内容中需要图片水平居中对齐。

一般情况下,我们的图片都使用了 .img-responsive 类来实现响应式图片。如果需要实现响应式图片水平居中,那么我们要使用 .center-block 类,不要用 .text-center

通过 .[......]

阅读全文

飞鱼

Bootstrap布局容器container

Bootstrap需要为页面内容和栅格系统包裹一个.container容器。我们提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100%[......]

阅读全文

飞鱼

Bootstrap简介及下载

Bootstrap是基于HTML5和CSS3开发的,它在jQuery的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。

Bootstrap是开源的,它的开发和维护都托管在GitHub上。点击查看GitHub上所有bootstrap项目

目前[......]

阅读全文

飞鱼