bootstrap思考一

bootstrap是一种热门的Web前端流行框架,如果要兼容PC端.手机端和响应式布局,那他一定是我的首选.bootstrap内容很多,功能强大,其中最好入门也是很重要的就是他的栅格系统.他有四个典型类: col-xs- 对应超小设备(屏幕<768 px )手机 col-sm- 对应小型设备(屏幕>768 px 屏幕<992 px )平板电脑 col-md- 对应中型设备(屏幕>992 px 屏幕<1200 px )台式电脑 col-lg- 对应大型设…

塞翁失马，焉知非福：由 Styles.Render 所引发 runAllManagedModulesForAllRequests="true" 的思考

最近在使用 MVC 开发的时候,遇到一个对我来说"奇怪的问题",就是使用 BundleTable 进行 CSS.JS 文件绑定,然后使用 Styles.Render.Scripts.Render 进行获取,但总是获取不到绑定的 CSS.JS 文件,然后报"404错误",话说再多,不如一个代码示例. BundleConfig 配置代码: public class BundleConfig { // For more information on bundling, v…

Bootstrap Navbar应用及源码解析

目的: 用Bootstrap Navbar component 实现一个响应式导航理解Bootstrap Navbar component是如何工作的(不包括collepse.js) 清楚自己添加一个规定的类名时是做了些什么根据自己的需求进行改装对比自己的实现方法,找出差距. 1.实现: 我想要模仿一个这样的响应式导航: 按照Bootstrap官网上介绍的方法,按照规则创建标签添加类名之后,可以得到一个这样的导航: 代码: <nav class="navbar navbar-defa…

基于Bootstrap仿淘宝分页控件实现

.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { text-align: center; margin-top: 20px; margin-left: 10px; margin-bottom: 20px } a { cursor: pointer; text-decoration: none; color: gray } a:hover { text…

box-shadow中的理解(bootstrap)

刚研究了bootstrap中css里面的源码,找到了表单(form)中关于输入框的一些设置,根据要求,label标签和input标签需要一起使用,(屏幕阅读器中不能单独辨认input),如需隐藏label标签,在label中设置.sr-only这个class即可.看了下.form-control这个属性(应用在input标签上),下面是这个css样式. .form-control { display: block; width: 100%; height: 34px; padding: 6px…

bootstrap深入理解之格子布局

一.源码文件: _grid.scss:格子系统类文件 Mixins/_grid.scss:支持格子系统实现的mixin集合 Mixins/_grid-framework.scss:格子系统实现的核心mixin 二.支持的功能 1. 实现按百分比布局 2. 实现格子的定位 3. 实现格子的嵌套 4. 如果只使用格子系统,可以只编码bootstrap-grid.scss文件三.实现原理 1. 按百分比布局,主要思考的问题如何在不同的设备上平均分配的宽度,bootstrap只是用了简单的百分比,在任…

《深入理解bootstrap》读书笔记：第4章 CSS组件（上）

bootstrap三大核心之二. 包括glyphicon图标,下拉菜单(dropdown),按钮组(button group)....等等. 一. 图标字体 bootstrap3提供了200多个免费图标字体.认为它是一个字. arial-hidden="true" .sr-only(只读) 1. 引入方法: 1 <i class="glyphicon glyphicon-search"></i> i标签是已经废弃了的html斜体标签.用s…

《深入理解bootstrap》读书笔记：第三章 CSS布局

一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img-responsive类排版方面的基本样式为: body的margin为0,背景色为白色,行间距为20/14倍使用Normalize.css库,使各个浏览器差别最小化居中容器container有一个最大范围.(最大左右margin为auto,和设备有关) 二. 文字基础排版(全局设置) 1.…

【Bootstrap】Bootstrap和Java分页-第二篇

目录关于此文配置xml-pager.tld 分页控件-Pager 分页action集成类-BaseController 实例-Dao 实例-service 实例-action 实例-JSP 实例-SQL 实例图回到顶部关于此文运用第一篇分页的例子,结果以失败告终.在网上又寻找了很多例子.大多是都是这一种.着手开发的项目采用spring MVC框架.符合需求.摘下来,试了一试. 网上的例子总是少一些东西.经过一番折腾.终于搞定了.下面分享出来,供参考. 分页基本逻辑思想懂了,重点是在于怎…

最值得收藏的Bootstrap资源网站

如果你正在寻找Bootstrap图标,那今天的推荐对你而言绝对非常重要!在这篇内容中,我们把这套框架上的免费字体图标做了个整合(当然,以后还会不断的更新).正如你所知,图标字体在一个web网页设计拥有很多优势:它们使用方便,不仅仅是图像,更是一个载体.大小随意缩放,还可以适应各种尺寸的屏幕(包含移动设备,平板电脑等). 这套集合图标使用起来非常的方便:你只需要点击下载包,将文件添加到你的目录中.在介绍中我们也会对每一个图标有一个简短的描述,让你了解如何使用它们.如果你有兴趣收藏,也可以自己创…

从零开始学Bootstrap(3)

首先让我们回顾一下系列内容. 从零开始学Bootstrap(1)介绍了BootStrap最简单的模板,逐条解释了每行代码的含义. 从零开始学Bootstrap(2)强调了边学边做,通过实际的例子,讲解了如何一步一步的实现自己想要的效果. 写到这里,这篇从零开始学Bootstrap(3)我想写以下几个内容: 1. 基于我对Bootstrap的理解,做一个小小的总结. 2. 对从零开始学Bootstrap(2)例子进行UI美化和代码优化,主要是说说我是怎么做出自己想要的效果的. 3. 授人以鱼不如授…

bootstrap插件学习-bootstrap.typehead.js

先看bootstrap.typehead.js的结构 var Typeahead = function ( element, options ){} //构造器 Typeahead.prototype = {} //构造器的原型 $.fn.typeahead = function ( option ){} //jQuery原型上自定义方法 $.fn.typeahead.defaults ={} //默认参数 $.fn.typeahead.Constructor = Typeahead //重写j…

安装python爬虫scrapy踩过的那些坑和编程外的思考

这些天应朋友的要求抓取某个论坛帖子的信息,网上搜索了一下开源的爬虫资料,看了许多对于开源爬虫的比较发现开源爬虫scrapy比较好用.但是以前一直用的java和php,对python不熟悉,于是花一天时间粗略了解了一遍python的基础知识.然后就开干了,没想到的配置一个运行环境就花了我一天时间.下面记录下安装和配置scrapy踩过的那些坑吧. 运行环境:CentOS 6.0 虚拟机开始上来先得安装python运行环境.然而我运行了一下python命令,发现已经自带了,窃(大)喜(坑).于是go…

关于Java类加载双亲委派机制的思考（附一道面试题）

预定义类加载器和双亲委派机制 JVM预定义的三种类型类加载器: 启动(Bootstrap)类加载器:是用本地代码实现的类装入器,它负责将 <Java_Runtime_Home>/lib下面的类库加载到内存中(比如rt.jar).由于引导类加载器涉及到虚拟机本地实现细节,开发者无法直接获取到启动类加载器的引用,所以不允许直接通过引用进行操作. 标准扩展(Extension)类加载器:是由 Sun 的 ExtClassLoader(sun.misc.Launcher$ExtClassLoader)…

bootstrap实战经验

凡是基本的布局需要float实现的,都可以考虑利用网格布局. 1,.jumbotron可以形成一个青灰色的背景,并自动调节对应边距 2,.panel的应用十分广泛,可以自动设置合适的padding.甚至利用它实现footer等(panel-footer) 3, text-justify对齐方式的使用 4,可以使用网格布局来控制图片的大小,结合max-width:100%. 5,top 和left是针对元素的左上角而言,absolute定位的占据一定面积的元素而言,针对于父元素的水平居中对齐,使用…

CSS画三角形引发的一些思考

今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的更深的思考. 第一次遇到这个问题是在撸Bootstrap的一个demo --Blog Template for Bootstrap,它的导航栏中用到了CSS来画三角形: 我们来看一看其中重点的那段CSS代码: .blog-nav .active:after { position: absolut…

用angular来思考问题How do I “think in AngularJS” if I have a jQuery background?

[翻译]How do I “think in AngularJS” if I have a jQuery background? 1. 不要先设计页面,然后再使用DOM操作来改变它的展现在jQuery中,你通常会设计一个页面,然后再给它动态效果.这是因为jQuery的设计就是为了扩充DOM并在这个简单的前提下疯狂的生长的. 但是在AngularJS里,必须从头开始就在头脑中思考架构.必须从你想要完成的功能开始,然后设计应用程序,最后来设计视图,而非“我有这么一个DOM片段,我想让他可以实现XX…

虎说：bootstrap源码解读（重置模块）

------------ 开场show:前不生“不犹豫”,后半生“不后悔”.今天又逃课,我不后悔素材:推特公司的前端框架bootstrap(下称bt),解读源码(当然你也可以在官网分分钟下载一个源码包应用学习) 介绍:不介绍,著名的流行的框架,总有一大推的介绍思考(或许会打自己脸):bt给我的感觉就像是人家写好的模板,虽然是顶级公司写的,但总感觉很别扭,就像厨师使用的是大师配置好,现成的高汤,料汁,只是在应用层.优秀的前端不应该自己配置调料吗,最好的办法,就是偷学…

Bootstrap 3 与 Foundation 5

开发工程师, 使用 Bootstrap. 前端开发人员, 使用 Foundation. 我们来谈谈为什么. Bootstrap 与 Foundation 有许多关键的区别, 但是, 我想你只需要记住一件事: ZURB 和 Twitter 的两种设计理念是很清楚的, 从他们对自己的框架的命名就可以看出来: Bootstrap 有引导, 开机自举的意思, 换言之, 它尝试处理你项目中一切所需要的. 而 Foundation 有创建, 创造的意思, 换言之, 它仅仅给你项目中强有力的创造力. 保持这种…

第87节：Java中的Bootstrap基础与SQL入门

第87节:Java中的Bootstrap基础与SQL入门前言复习什么是JQ? : write less do more 写更少的代码,做更多的事找出所有兄弟: $("div").siblings() 基本过滤器: 选择器:过滤器 $("div:first") :first: 找到第一个元素 :last: 找到最后一个元素 :even: 找出偶数索引 :odd: 找出奇叔索引 :gt(index): 大于 :lt(index): 小于 :eq(index): 等…

如何将自定义的搜索参数便捷的添加到js方式的bootstrap table的参数中

页面: <div> <form id="exp_form"> 查询参数... <button type="button" onclick="search()" data-icon="search">查询</button> </form> </div> <div> <table id="exp_table"> &l…

[20180614]删除bootstrap$记录无法启动2.txt

[20180614]删除bootstrap$记录无法启动2.txt --//前几天看链接http://www.xifenfei.com/2018/05/willfully-delete-bootstrap.html.--//按照介绍: 有人在数据库中注入了恶意脚本,导致数据库删除了bootstrap$中数据,关闭之后无法正常启动delete from bootstrap$; --//我更多的思考如果我遇到这个问题如何解决:1.如果有备份只要恢复到delete bootstrap$之前,但是这里有…

[20180612]删除bootstrap$记录无法启动.txt

[20180612]删除bootstrap$记录无法启动.txt --//前几天看链接http://www.xifenfei.com/2018/05/willfully-delete-bootstrap.html.--//按照介绍: 有人在数据库中注入了恶意脚本,导致数据库删除了bootstrap$中数据,关闭之后无法正常启动delete from bootstrap$; --//我更多的思考如果我遇到这个问题如何解决:1.如果有备份只要恢复到delete bootstrap$之前,但是这里有问…

bootstrap 3.0 LESS源代码浅析（二）

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). 忘记在…

skynet 源码阅读笔记 bootstrap.lua

最近几周粗略看了 skynet 代码的 C 部分.遇到很多知识点以前只是知道,但并不十分了解,所以这是一个学习的过程. 从 main 函数开始,闷头一阵看下来,着实蛋疼. 当看了 skynet_mq.c 和 skynet_module.c 之后才终于有了头绪. C 代码通篇下来并没有什么特别的难点.看 Lua 代码的时候,我的头开始大了,我了个擦擦擦,神乎其技啊. 一开始读 Lua 代码时,C 层的东西我也才刚读完,还没有消化好,所以读起来很吃力. 于是,停下来不再继续看代码,而是去云风的博客上…

Yii2框架bootstrap样式理解

Yii2框架默认採用了bootstrap作为CSS风格,各种视图类组件都如此.之前一直採用默认风格,并在必要的时候加入或者改动一下class来达到目的.但在改版Yii1.1的orange项目时.发现之前也是套的模板,事实上没有好好去理解一下bootstrap的那套规则.所以顺便大致梳理一下吧.以basic模板为例,对比http://v3.bootcss.com/css/ 上的内容进行. 看layouts/main.php.Yii2默认以HTML5文档类型进行的了.但语言默认是en-US.所以要改…