bootstrap学习之一_bootstrap css

一.文本相关样式文本格式(用于块状标签):text-left:向左对齐文本:text-center:居中对齐文本:text-right:向右对齐文本:text-justified;text-nowrap; 文本增强标签:small,strong,em; 文本修饰(用于p,a等包含文本的标签):text-muted(本行内容是减弱的);text-primary;text-success;text-info;text-warning;text-danger;text-info;text-lower…

bootstrap学习之利用CSS属性pointer-events禁用表单控件

参考链接: CSS3 pointer-events:none应用举例及扩展首先pointer-events在除去SVG中的应用只有两个值:AUTO | NONE pointer-events:none 该属性可以让应用此属性的元素都会变成“真空”,比如:一个a连接上面覆盖一个div,当该div的css属性中有该属性时,该div就像不存在一样,可以直接点击到下方的a标签这是一个很神奇的属性,Bootstrap就是利用这个属性,实现禁用控件的效果. Bootstrap中实现禁用效果有两个方法:…

bootstrap学习（全局CSS样式）（二）

标题类:.h1到.h6 页面主体 bootstrap将全局font-size设置为14px,line-height设置为1.428,这些属性直接赋予元素和所有段落元素. 文本对齐类 text-left text-center text-right text-justify text-nowrap 改变大小写类 text-lowercase text-uppercase text-capitalize 条纹状表格通过.table-striped类可以给之内的每一行增加斑马条纹样式跨浏览器兼…

bootstrap学习（全局CSS样式）（一）

布局容器 bootstrap需要为页面内容和栅格系统包裹一个.container容器.我们提供了两个作词用处的类.注意,由于padding等属性的原因,这两种容器类不能互相嵌套. .container类用于固定宽度并支持响应式布局的容器. <div class="container"> ... </div> .container-fluid类用于100%宽度,占据全部视口(viewport)的容器 <div class="container-fl…

bootstrap学习一

bootstrap学习一.css概览: 1.使用HTML5标准,<!DOCTYPE html>. 2.移动设备优先: <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maxi…

bootstrap学习总结-css样式设计(一)

由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么? 即前端页面搭建的标准化框架工具,已经写好了css.js样式,只需要拿来用即可. 怎么用bs呢?主要是通过使用不同的类增加效果,每一种类,对应的功能不同. bs好处:增加了开发效率,页面设计更加美观,支持响应式开发.下载地址:https://github.com/foreverjiangting/bootstra…

Ruby Rails学习中：网站导航，Bootstrap和自定义的CSS，局部视图

添加一些结构一.网站导航 1.添加一些结构后的网站布局文件打开文件:app/views/layouts/application.html.erb 简单介绍一下,添加的代码: 我们从上往下看一下这段代码中新添加的元素.前面简单介绍过,Rails 默认使用 HTML5(如文档类型声明 <!DOCTYPE html> 所示).因为 HTML5 标准还很新, 有些浏览器(特别是旧版 Internet Explorer)还没有完全支持,所以我们加载了一些 JavaScript 代码(称作 HTML5…

bootstrap学习笔记--bootstrap安装环境

Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本.当您点击这个链接时,您将看到如下所示的网页: 您会看到两个按钮: Download Bootstrap:下载 Bootstrap.点击该按钮,您可以下载 Bootstrap CSS.JavaScript 和字体的预编译的压缩版本.不包含文档和最初的源代码文件. Dow…

Bootstrap学习笔记系列1-------Bootstrap网格系统

Bootstrap网格系统学习笔记 [TOC] 简单网格先上代码再解释 <!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta charset="utf-8">  <link href="http://cdn.static.runoob.com/libs/bootstra…

Bootstrap学习（3）

Bootstrap 图片 Bootstrap 对图片的支持.Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来获得图片圆角. .img-circle:添加 border-radius:500px 来让整个图片变成圆形. .img-thumbnail:添加一些内边距(padding)和一个灰色的边框. 请看下面的实例演示: <!DOCTYPE html> <html> <head>…

BootStrap学习（2）

使用Bootstrap添加代码框可先看:简介.引入.包下载等:http://www.cnblogs.com/0201zcr/p/4900062.html Bootstrap 允许您以两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 <pre> 标签.如果代码需要被显示为一个独立的块元素或者代码有多行,那么您应该使用 <pre> 标签. 请确保当您使用 <pre> 和 <…

Bootstrap 学习（1）

简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootstrap 包的内容基本结构:Bootstrap 提供了一个带有网格系统.链接样式.背景的基本结构.这将在 Bootstrap 基本结构部分详细讲解. CSS:Bootstrap 自带以下特性:全局的 CSS 设置.定义基本的 HTML 元素样式.可扩展的 class,以及一个先进的网格系统.这将在…

前端框架——BootStrap学习

BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstrap.min.css,jquery.js,bootstrap.min.js文件解决兼容手机端代码,下面的代码中如果没有注意加上.  <meta name="viewport" content="width=device-width,…

【Bootstrap基础学习】05 Bootstrap学习总结

好吧,Copy了几天,这个总结算是把我对Bootstrap的一些理解写一下吧. Bootstrap只是一套别人写好的前端框架,直接拿来用就好. 不过对于专业的前端而言,如果不去把所有的代码都看一遍来理解的话,恐怕也就只是浮于表面而已了. 学习里面的CSS和js,才是王道! 如果你只是一个和我一样的写后台的,只想浮于表面,快速应用的人,那么可以看接下来我自己写的一点用于记忆的东西.如果是前端,那么还是不要看了. 看了前面的那些章节,让我们来简单写一个用于快速上手的小列表.在这里我也只写一些最通用的…

bootstrap学习总结1

什么是Bootstrap? bootstrap就是一个前端框架,有Twitter公司开发最大的优点: 开源 : 响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机.平板电脑和手机.更多有关响应式设计的内容详见 Bootstrap 响应式设计. 学习网站: 极客学院,汇智网,慕课网,bootstrap中文文档. 开始需要知道: bootstrap的js是依赖于jQuery的,所以在引入bootstrap.js时必须先引入jQuery.js; HTML 模板一个使用了 Boot…

Bootstrap学习笔记(二) 表单

在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果. 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4px的圆角 4.设置阴影效果,并且元素…

BootStrap学习之先导篇——响应式网页

Bootstrap学习之前,要知道响应式网页的原理. 1.什么是响应式网页? 一个页面,可以根据浏览设备的不同,以及特性的不同,而自动改变布局.大小等.使得在不同的设备上上都可以呈现优秀的界面. 优点:可以自动适配PC.PAD.PHONE浏览器屏幕不足:代码变复杂,需要考虑更多兼容性,并不适合内容非常多网页 2.需要掌握的是viewport的概念早期的网页都是比较大,用于在手机屏幕中浏览,只能进行缩小,导致用户的浏览体验不好.iOS中提出了Viewport(视口)的概念,可以任意的指定大小,…

bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

为导航条添加标题.二级菜单及状态加入导航条标题在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过"navbar-header"和"navbar-brand"来实现,示例查看代码编辑器(11-22). 原理分析: 此功能主要起一个提醒功能,当然改良一下可以当作是logo(此处不做过多阐述).其样式主要是加大了字体设置,并且设置了最大宽度: /*源码查看bootstrap.css…

bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

基础导航条在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class="nav">)基础上添加类名"navbar-nav" 第二步:在列表外部添加一个容器(div),并且使用类名"navbar"和"navbar-default"…

bootstrap学习笔记之导航条基础

导航条基础导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个"条"字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式.在这一节中将一起探讨Bootstrap框架中导航条的使用. 导航条和导航一样,在Bootstrap框架中是一个独立组件,所以你也可以根据自己的需求使用不同的版本: LESS版本:对应的源文件navbar.less S…

bootstrap学习（二）页面

响应式图片: //当图片大的时候,逐渐缩小浏览器大小,图片会显示为自适应大小 ,img-responsive <div class="container"> <div class="row"> <img src="../static/1.jpg" class="img-responsive" alt=""> </div> </div> 标题标签h…

BootStrap学习(1)

一.Bootstrap简介 BootStrap是由Twitter推出的前端框架,2011 年八月在 GitHub 上发布,BootStrap是基于Html,Css,Javascript的,可用于快速开发web,是现在主流的前端框架. Bootstrap的优点有: 1. 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式. 2.浏览器支持:所有的主流浏览器都支持 Bootstrap. 3.容易上手:因为Bootstrap是基于 HTML 和 CSS 的基础知识…

python 全栈开发，Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)

昨日内容回顾 ajax //get post 两种方式做请求 get 主要是获取数据 post 提交数据同一个路由地址既可以是get请求也可以是post请求一个路由对应一个函数 get请求 accept mime $.ajax({ url: 直接拼接到url http://www.baidu.com/s?wd=luffy&name=123, type:'get', //data是响应数据 success:function(data){ }, error:function(err){ c…

Bootstrap学习笔记-布局

Bootstrap学习笔记-布局默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf-8"> <title>布局</title> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"> &l…

Bootstrap学习之路（1）---开篇-登陆页

Bootstrap是现在很流行的一套前端框架,尤其是它的自适应,真的很不错,而且对移动设备也很友好,可以达到快速开发的效果,最近想把自己的网站弄个手机版,很果断的就选用了bootstrap,跟大家分享一下我的学习心得,文笔水平不太好,大家见谅,看不懂的可以回复提问,我会回答的. 先去官网下载bootstrap的编译好的必要文件http://d.bootcss.com/bootstrap-3.2.0-dist.zip(注意!!下载下来的文件目录结构不要弄乱了,那里有个字体库的文件,是用来显示字体图…

Bootstrap（Web前端CSS框架）

官方定义: Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. 即:Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目. 百科定义: 简介:Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,是一个CSS/HTML框架.Boot…

bootstrap学习大纲

bootstrap 学习分三部分,分别是 css样式,css组件,js插件. 下面介绍三部分分别要学习的内容: 1.css样式:栅格系统,排版,代码,表格,表单,按钮,图片,辅助类,响应式工具. 2.css组件:glyphicons图标,下拉菜单,按钮组,输入框组,导航,导航条,路径导航,分页,标签,徽章,巨幕,页头,缩略图,警告框,进度条,媒体对象,列表组,面板,响应式嵌入内容,well. 3.js插件:模态框,下拉菜单,滚动监听,标签页,工具提示,弹出框,警告框,按钮,折叠效果,幻灯片效果,…