【bootstrap 3.x笔记】的更多相关文章

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

十. 标签(.label类,label-xxx) 高亮一些标题部分. 1 2 3 4 5 6 <h1>HELLO<span class="label label-default">default</span></h1> <h1>HELLO<span class="label label-primary">primary</span></h1> <h1>HELL…

《深入理解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》读书笔记：第二章 整体架构

一.  整体架构   1. CSS-12栅格系统 把网页宽度均分为12等分(保留15位精度)--这是bootstrap的核心功能. 2.基础布局组件 包括排版.按钮.表格.布局.表单等等. 3.jQuery bootstrap插件的基础 4.响应式设计 兼容多个终端.这是bootstrap的终极理念. 5.css插件 提供丰富的样式. 6.js插件 二. 栅格系统 1.基本实现过程 定义容器的大小--跳转边距--媒询 有以下要求: (1)一行(row)数据必须包含在.container中. .c…

《深入理解bootstrap》读书笔记：第一章 入门准备

一.bootstrap框架简介 Bootstrap是最流行的前端开发框架. 什么是框架:开发过程的半成品. bootstrap具有以下重要特性: (1)完整的CSS样式插件 (2)丰富的预定义样式表 (3)基于jQuery的插件集 (4)灵活的栅格系统 以下将简单介绍对bootstrap可能用到的知识进行梳理.   二.新手入门 笔者使用版本是3.3.x 在bootstrap中文官网可以找到以下界面     本书采用预编译的版本进行学习 三. 文件结构 生产环境使用bootstrap.min.c…

Bootstrap+JSP实例学习笔记一.简单的带登录功能的首页

前言 Bootstrap 是流行的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.源自于twiteer内部的开发框架. 当前(2019-05)最新版本是v3.3.7. 官网:https://v3.bootcss.com/ 学习初衷: 不能每来一个项目都重头开始吧,希望积累框架,节省时间,快速上手,尽快出效果.不用太花哨,但也不能太难看. 选一个简单易上手的框架,那就选这个bootstrap吧. 效果图 没使用样式: 使用bootstrap样式: 自己写的样式…

Bootstrap使用后笔记

  Bootstrap Modal 垂直居中 在 bootstrap.js中修改如下代码: Modal.prototype.adjustDialog = function () { var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight   this.$element.css({ paddingLeft: !this.bodyIsOverflowing &&a…

Bootstrap 3学习笔记 -栅格

这是Bootstrap中非常基础一张表,但其实有这么容易掌握和理解吗? (1).对于col-md的div, 默认是垂直排列, 当视口(屏幕或浏览器的宽度)>992px,col-md-1的div块就水平排列了 (2).container的div最大宽度是自适应的,根据屏幕或浏览器的"视口"宽度自动调整的,例如当"视口"宽度>=1200px时,container的div最大宽度是1170px; 当视口>=768px,<=970px contain…

Bootstrap 基础学习笔记（一）

排版 (1)标题 Bootstrap标题样式进行了以下显著的优化重置: 1.重新设置了margin-top和margin-bottom的值,  h1~h3重置后的值都是20px:h4~h6重置后的值都是10px.2.所有标题的行高都是1.1(也就是font-size的1.1倍),而且文本颜色和字体都继承父元素的颜色和字体.3.固定不同级别标题字体大小,h1=36px,h2=30px,h3=24px,h4=18px,h5=14px和h6=12px. 代码 <!DOCTYPE HTML> <…

bootstrap 新手学习笔记 代码整理

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 滚动监听(Scrollspy)插件方法</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jqu…