【[Bootstrap] Bootstrap学习笔记】的更多相关文章

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 3学习笔记 -栅格

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

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…

Bootstrap入门学习笔记(只记录了效果)

基本头文件 <!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="styleshe…

Bootstrap 新手学习笔记——布局组件

1.字形图标: <button type="button" class="btn btn-primary btn-lg" style="font-size: 60px; color:#000000;"> <span class="glyphicon glyphicon-user"></span> User </button> 2.下拉菜单: <div class="…

Bootstrap新手学习笔记——css

Css模块: 1.网格系统: class前缀:.col-xs-*,.col-sm-*,.col-md-*,.col-lg-* <div class="container"> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <d…

bootstrap 4 学习笔记

一.button 颜色类 白色:btn 浅蓝色:btn btn-primary 深蓝色:btn btn-info 绿色:btn btn-success 黄色:btn btn-warning 红色:btn btn-danger 黑色:btn btn-inverse 二.告警弹出框 1 {% if msg %} 2 <div class ="alert alert-warning alert-dismissible fade show" role="alert"&…

Bootstrap学习笔记博客

本片博客用于记录之后要用到Bootstrap的学习笔记   概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的.   选用的原因: 1.浏览器支持:所有的主流浏览器都支持 Bootstrap. 2.容易上手:只要具备 HTML 和 CSS 的基础知识,就可以开始学习 Bootstrap.   包的基本结构: Bootstrap 提供了一个带有网格系统.链接样式.背景的基本结构. Bootstra…

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

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

AngularJs学习笔记--bootstrap

AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 本文用于解释Angular初始化的过程,以及如何在你有需要的时候对Angular进行手工初始化. 二.Angular <script> 标签 本例用于展示如何通过推荐的路径整合Angular,实现自动初始化.   <!doctype html> <html xmlns:ng=&…