BOOTSTRAP3 - 技术教程文章
WEB前端开发框架Bootstrap3 VS Foundation5
开发工程师, 使用 Bootstrap. 前端开发人员, 使用 Foundation. 我们来谈谈为什么. Bootstrap 与 Foundation 有许多关键的区别, 但是, 我想你只需要记住一件事: ZURB 和 Twitter 的两种设计理念是很清楚的, 从他们对自己的框架的命名就可以看出来: Bootstrap 有引导, 开机自举的意思, 换言之, 它尝试处理你项目中一切所需要的. 而 Foundation 有创建, 创造的意思, 换言之, 它仅仅给你项目中强有力的创造力. 保持这种看法, 现在我来列...
论Bootstrap3和Foundation5网格系统的异同【图】
Bootstrap和Foundation是我最喜欢的两个前端框架，尤其是在快速开发网站的原型上。它们都提供了随时可用的组件，加快了我的工作流程。除了一些细小差别，在我看来它们大部分的基本特征都是类似。 在这篇文章里，我将介绍它们网格的基本构造。首先，我将会向你展示它们是如何构建的，描述它们的主要部件，以及它们对不同屏幕的大小表现出的差异。然后，我将通过一个真实例子的实践来帮助你增添知识。 让我们一起开始吧！ 比较一：媒...
Bootstrap3 input输入框插入glyphicon图标的方法【图】
bootstrap3如何在input输入框插入glyphicon图标呢？插入图标看起来比较醒目，满足用户体验价值观，此功能应用于各大网站。怎么把图标放在输入框的开头？？ <div class="form-group has-feedback"> <label class="col-md-2 control-label" for="username">用户名</label> <div class="col-md-6"> <span class="glyphicon glyphicon-user form-control-feedback"></span> <input type="text" class="form-control" id="username" nam...
Bootstrap3制作图片轮播效果【图】
先来看看Bootstrap图片轮播效果：上面就是为大家分享的效果，不过这是网易云音乐的首页。 这样的效果记得最先在ios7的官方控件库中出现之后安卓也在某个版本加入了这个view，设计是通用的啊..bootstrap3也支持在web中使用这样的效果。 接下来进行简单分析： 一 . 结构分析 一个轮播图片主要包括三个部分：? 轮播的图片? 轮播图片的计数器? 轮播图片的控制器 第一步：设计轮播图片的容器。在 Bootstrap 框架中采用 carousel 样式，并...
使用bootstrap3开发响应式网站【图】
本文实例为大家分享了bootstrap3响应式网站开发代码，供大家参考，具体内容如下 第一次使用bootstrap3，发现对移动支持得不错，可以很快的开发出一个支持移动和PC端的网站。 下面就是本文的实例，具体代码： 时间线来自国外网站，使用到的css如下.timeline {list-style: none;padding: 20px 0 20px;position: relative; }.timeline:before {top: 0;bottom: 0;position: absolute;content: " ";width: 3px;background-color: #eeeee...
Bootstrap3制作自己的导航栏【图】
导航栏是一个很好的功能，是Bootstrap 网站的一个突出特点。导航栏是响应式元组件就，作为应用程序或网站的导航标题。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了为站点名称和基本的导航定义样式。 创建一个默认的导航栏的步骤如下： 向 <nav> 标签添加 class .navbar、.navbar-default（白底黑字），navbar-inverse（黑底白字） 向上面的元素添加...
bootstrap3 兼容IE8浏览器！
近期在使用bootstrap这个优秀的前端框架，这个框架非常强大，框架里面有下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等,bootstrap都已经预先定义好了，当我们制作网页上，只需直接调用里面的css即可bootstrap是一个响应式的布局，你可以在宽屏电脑、普通电脑，平板电脑，手机上都得到非常优秀的布局体验。这种响应式的布局正是通过CSS3的媒体查询（Media Query）功能...
学习使用bootstrap3栅格系统【图】
一、bootstrap开发环境搭建 1. 下载bootstrap, http://www.bootcss.com/ 2. 下载jquery, 通过IE直接访问http://code.jquery.com/jquery-2.0.3.min.js 3. 在html页面中导入bootstrap与jquery的js,css文件，.viewport的<meta>标签，这个标签可以修改在大部分的移动设备上面的显示，加如 if lt IE 9...等是为了在ie9以下的兼容。 模板如下<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta content="width=device-width, ...
基于bootstrap3和jquery的分页插件
自己写的一款基于bootstrap3和jquery的分页插件，初学jquery插件写法，写的很一般。拿出来献丑了。 /** * 基于bootstrap3的jquery分页插件 * 调用方式分两种 * 1.直接调用法 * 普通大小 * $.mypage(id,now,max,fn); * 大尺寸 * $.mypagelg(id,now,max,fn); * 小尺寸 * $.mypagesm(id,now,max,fn); * * 参数说明：id为放置分页容器的ID，now为当前页，max为最大页，fn为回掉函数，回掉函数有一个参数为点击的页码 * * 2.选...
MVC5 + EF6 + Bootstrap3 (11) 实现排序、搜索、分页【图】
前言本节我们向这个页面中加入排序、搜索和分页功能。排序 从上图中的地址栏中可以看到这个页面调用的是Company Controller下的Index Action.因此我们就先打开Controllers文件夹下的CompanyController.cs文件，写入如下代码：using System.Linq; using System.Web.Mvc; using SlarkInc.DAL; using System;namespace SlarkInc.Controllers {public class CompanyController : Controller{private CompanyContext db = new CompanyCo...
Bootstrap3的box-sizing样式导致UEditor控件的图片无法正常缩放
UEditor组件是百度提供的一套开源的web在线所见即所得富文本编辑器，具有轻量，可定制，注重用户体验等特点，基于MIT协议，功能很强大。最近在使用的过程中发现其中上传的图片（或者插入已有的表情包图片）都无法正常缩放，选中图片，用鼠标点击并拖动图片边沿的小标签，图片只能缩小不能放大。尝试过很多方法都没办法解决，甚至检查了js源码，也没有发现有任何异常的地方。后来无意中发现页面上引入了Bootstrap，而Bootstrap默认将...
bootstrap3.0LESS源代码浅析（二）_html/css_WEB-ITnose
border-radius是最常见的CSS3属性，但你知道他多少东西呢？ 比如： border-radius:2em; 相当于什么？ border-top-left-radius:2em;border-top-right-radius:2em;border-bottom-right-radius:2em;border-bottom-left-radius:2em; 实际上，其首先都是水平方向（top or bottom）的弧度，然后才是垂直方向的弧度（left or right）。 忘记在哪里的一道题目 请用CSS实现如上图一样的椭圆，有兴趣的同学可以思考一下...
关于bootstrap3显示5列的问题_html/css_WEB-ITnose
bootstrap是个好东西，对于CSS不是很熟悉的同学可以用它快速的做个不丑的网站。 但是bootstrap是个12栅格的系统，显示5列比较麻烦，今天我也刚好有这个需求，就稍微研究了下，并且成功了。具体的做法是： 在 head 里加载 bootstrap 的 css 之后 自己再添加几个 css class 1 2 .col-lg-2dot4 { 3 position: relative; 4 min-height: 1px; 5 padding-right: 15px; 6 padding-left: 15px; 7 } 8 @media (min-...
Bootstrap3之美06-PageHeader、Breadcrumbs、Dropdowns、ButtonDropdowns、用Button和Dropdowns模拟Select、InputGroups、Thumbnails、Panels、Wells_html/css_WEB-ITnose【图】
本篇主要包括： ■ Page Header■ Breadcrumbs■ Button Groups■ Dropdowns■ Button Dropdowns■ 用Button和Dropdowns模拟Select■ Input Groups■ Thumbnails■ Panels■ Wells □ Page Header Page Header是指页面最顶部。 超级球迷 关于我们 以上div会跑到页面最顶部。 □ Breadcrumbs 面包屑。 主页 关于我们 关于我们 ...
使用Bootstrap3开发响应式网站实践02,轮播_html/css_WEB-ITnose【图】
本篇体验图片轮播。html部分为： 马塔破门曼联平 2014/15赛季英格兰足球超级联赛第2轮一场焦点战在光明球场展开角逐 ...
Bootstrap3之美02-Grid简介和应用_html/css_WEB-ITnose
本篇主要包括： ■ Grid简介■ 应用Grid■ Multiple Grids Grid简介 Bootstrap中，把页面分成12等份，这就是所谓的Grid。 在Bootstrap中，用类名控制，这些类型遵循".col-xx-6"类似的形式。 2个6就占满整个页面。所以，类名最后面的数字表示要占几个格子。 又比如，3个4也占满整个页面。 又比如，4个3也占满整个页面。 又比如，6个2也占满整个页面。 另外，类似".col-xx-10 .c...
Bootstrap3之美04-自定义CSS、Theme、Package_html/css_WEB-ITnose
本篇主要包括： ■ 自定义CSS■ 自定义Theme■ 自定义Package 自定义CSS 有时候，需要自定义或重写Bootstrap默认的CSS。→在css文件夹下创建一个site.css→假设要对container类重写，在site.css中 .container { background-color: #eee;} →把site.css引用到index.html中，并放置在bootstrap.min.cs的下方 →浏览index.html，发现背景色已经变成灰色 自定义Theme 在区域内，...
使用Bootstrap3开发响应式网站实践06,使用ListGroup、Thumbnails展示内容_html/css_WEB-ITnose【图】
当希望把同类型的内容以列表、区块展示的时候，ListGroup是不错的选择。<div class="col-sm-6"> <h3>马云为恒大生死战开出男人奖 </h3> <p> 8月27日晚，广州恒大将迎来亚冠联赛生死战，主场迎战西悉尼流浪者队，由于一周之前已经在客场0-1负于对手，本场比赛恒大队必须置死地而后生在主场净胜对手两球。就在今天中午，前不久入主恒大的阿里巴巴老板马云来到球队，在鼓励球员的同...
使用Bootstrap3开发响应式网站实践04,使用Panels展示内容_html/css_WEB-ITnose【图】
在Bootstrap页面中，通常用Panels来展示主要功能的内容。该部分Html为： 更多信息 广州恒大淘宝队的官方网站和微博同时发布了几张海报，预热本周三晚8点即将到来的亚冠1/4决赛第二回合。 扭转乾坤期待胜利 ...
Bootstrap3.0学习（一）_html/css_WEB-ITnose【图】
Bootstrap是Twitter退出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态Css语言和Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 ...
ASP.NETMVC5+EF6+Bootstrap3(7)Bootstrap的栅格系统_html/css_WEB-ITnose
文章来源： 上一节：ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用 源码下载：点我下载 要做一个完整的系统，除了需要MVC这样的B/S框架及EF这样的数据库访问技术之外，一个简洁、美观、大方的UI框架也是必不可少的。 话不多说，有请今天的主角登场！！ 看看它的自我介绍，是不是很?。没错，这个介绍一点都不夸张。 回想起第一次工作中用Bootstrap做了一个专题网站，我们外籍老板就说了一个字：Amazing！ ...
bootstrap3随笔_html/css_WEB-ITnose【图】
bootstrap3随笔 [TOC] 布局容器 Bootstrap需要为页面内容和栅格系统包裹在一个.container容器 !!! Caution "Warning!" 由于padding等属性的原因，这两种容器不能互相嵌套 .container类用于固定宽度并支持响应式布局的容器 .container-fluid类用于100%宽度，占据全部视口(viewport)的容器 栅格参数 超小屏幕 <768px .col-xs- 小屏幕 >768px .col-sm- 中等屏幕 >992px .col-md- 大屏幕 >1200px .col-lg- 排版...
bootstrap3.3.4该如何实现一个二级垂直下拉菜单？_html/css_WEB-ITnose
我想实现一个二级垂直下拉菜单，大概要如何实现：点击用户管理就弹出4个子菜单，再点一次就缩回去，文件管理也类似 回复讨论(解决方案) 下拉列表放在一个list里面，一开始display为none，这样不占地方，当点击用户管理时解发函数把display改为block就行了 下拉列表放在一个list里面，一开始display为none，这样不占地方，当点击用户管理时解发函数把display改为block就行了 我用了网上的源码算是出来了一...
TiTatoggle一个基于Bootstrap3的纯CSS滑动开关按钮组件_html/css_WEB-ITnose
TiTatoggle是个什么鬼？ TiTatoggle其实是一款基于Bootstrap3的纯CSS滑动开关按钮组件。 不同于其他按钮组件，TiTatoggle滑动按钮组件没有使用Javascript，在这个组件中，它的HTML结构和原生的Bootstrap checkbox组件结构基本相同，方便易用，且提供了多种主题样式：IOS样式和Material样式等。下面我们就来看看TiTatoggle的安装和使用方法。 1、安装 TiTatoggle这么方便易用，那怎么安装呢？其实它可以通过Bower来安装： $...
Bootstrap3CSS样式基本用法总结_html/css_WEB-ITnose【图】
出于学习需要，自觉得把基本的bootstrap用法自己敲一遍，对每个用法有个较清晰的印象，所以做了本篇总结，这也是一个巩固的学习过程。 可点击左边的目录，方便速查。 按钮 a,input,button都可以设置为按钮 a标签按钮 button标签按钮 a标签按钮 button标签按钮 预置样式 default样式 primary样式 success样式 info样式 warning样式 danger...
bootstrap3如何在input输入框插入glyphicon图标？_html/css_WEB-ITnose
怎么把图标放在输入框的开头？？ 用户名 密 码 ...
Bootstrap3表单checkbox不能水平对齐问题_html/css_WEB-ITnose【图】
小弟最近使用bootstrap做一个注册页面的时候，要使用到checkbox，在单独的HTML页面中是没问题的，但是套在表单中就不能水平对齐了，求大神们支招啊。下面贴上代码和图片 body { background-color: #F2F2F3; } a { text-decoration: none; } .row-box { margin-top: 100px; } .reg-box { background-color: white; border: 1px solid #999999; border-radius: 3px; ...
关于bootstrap3.0的栅格系统原理【图】
这篇文章主要介绍了关于bootstrap3.0的栅格系统原理，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。我在这里是把Bootstrap中的栅格系统叫做布局栅格系统（布局）Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最...
运用webmagic，SSI框架，阿里云服务，mysql，freeMarker，bootStrap3.0，Jquery 等搭建的个人网站，有兴趣的可以来看看
网站是 电影之家， 前前后侯花了半年的时间（但真正的开发时间应该是不到一个月的,涉及技术（webmagic，SSI框架，阿里云服务，mysql，freeMarker，bootStrap3.0，Jquery））， 因为平常要上班，周末又想多休息。所以搞了那么久。 网站中运用到的技术就是标题上的那些，还有一些小的东西可能我都忘记了。 建站也是第一次，所以从申请域名 ，备案，购买服务器，上传代码，调试代码等等都是一边摸索一边做的。 就项目而言自己还是有很...
如何快速学习bootstrap3.3.2
如何快速学习bootstrap bootstrap中文网 http://www.bootcss.com/ 解决了我所有使用bootstrap的问题，从0开始，下面的全部链接都是该网站的子链接。 例子 http://v3.bootcss.com/examples/theme/ 解决了我按钮、panel(面板)、警告提示（该链接在http://v3.boo如何快速学习bootstrapbootstrap中文网 http://www.bootcss.com/ 解决了我所有使用bootstrap的问题，从0开始，下面的全部链接都是该网站的子链接。例子 http://v3.bootcss....