Bootstrap笔记-加强版
1、bootstrap引入:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好,世界!</h1>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
2、bootstrap栅格系统:
分12列 row col
阈值:1200>= 992>= 768>= 768<
容器:
流体(百分比):container-fluid
固定(px):container 响应式:1170 970 750 auto
由大到小:
col-lg-(1-12):大于1200px
col-md- (1-12):992-1200px
col-sm- : 768-992px
col-xs- : 小于768
列偏移:
col-lg-offset-(1-12):向右偏移几个网格
col-md-offset-
col-sm-offset-
col-xs-offset-
行排序:
col-lg-push-(1-12):向右偏移几个网格
col-lg-pull-(1-12):向左偏移几个网格
浮动:
左浮动:pull-left
右浮动:pull-right
嵌套:出现嵌套是,子级以父级为一个整体划分栅格
清除浮动:在要清除浮动的元素前面添加:<div class="clearfix"></div>
固定定位:affix
3、响应式工具:
针对不同设备展示或隐藏页面内容
可见类:visible-(lg\md\sm\xs)-(block\inline\inline-block)
隐藏类:hidden-(lg\md\sm\xs)
4、Glyphicons字体图标:
好处:减少请求、容易控制样式
将font文件夹放在同一目录,或者更改bootstrap.css源码中的font-face的url
<span class="glyphicon glyphicon-search"></span>
5、预定义样式风格:
default 默认、 primary 首选项、success 成功 、info 一般信息、warning警告、danger危险
btn-primary、text-primary、bg-primary、alert-warning、panel-warning等...
6、按钮:
基类:btn
样式:btn-default、btn-link(链接)...
大小:btn-(lg、sm、xs)
状态:active、disabled
种类:a、input、button
块级:btn-block
按钮组:btn-group、btn-group-justified(根据父级自适应)、btn-group-vertical、btn-group-(lg\sm\xs)
注意:当使用btn-group-justified时,a类按钮可以实现对应效果,button和input类要给每一个按钮添加一个父级div设置class为btn-group
纵向按钮btn-group-vertical,不需要再添加btn-group
按钮小箭头:(默认dropdown向下,向上添加dropup类)<button class="btn btn-primary"><span class="caret"></span></button>
注意:input不行
7、下拉菜单
data- : JS交互触发器的接口
aria- \ role='' :针对特殊人群(盲人)
基类:dropdown
下拉按钮:class:btn btn-default dropdown-toggle 、默认关闭,展开open 、data-toggle="dropdown"
下拉列表:dropdown-menu
下拉列表分组标题:dropdown-header
下拉列表分组的分割线:divider
····看文档
Bootstrap笔记-加强版的更多相关文章
- Bootstrap笔记--快速入门
首先是Bootstrap的简介: 业余了解:下面这个网址可以查询IP地址的地理位置 下面学习:(具体可以参考Bootstrap中文网) 栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流 ...
- 【巩固】Bootstrap笔记三
这段笔记介绍了bootstrp中以下几点应用点: 警告框的使用 面板功能 运用chart.js制作图表 进度条的制作 媒体对象的制作 有一个元素如果有属性alert-dismissible" ...
- 【巩固】Bootstrap笔记一
这两天开始重新巩固一下bootstrap的学习,群里有朋友介绍说麦子学院的教程不错,特地看了一下,有2个项目练习,所以跟着做了一下,下面开始笔记. <button class="nav ...
- 【巩固】bootstrap笔记二
这段主要记录如何给排版完的页面加一些动画效果,用到了的插件有: wow.min.js jquery.singlePageNav.min.js animate.css 将导航条上对应的菜单和页面上对应的 ...
- 深入理解Bootstrap笔记
框架介绍 1.框架简介 2.CSS基本语法 3.JavaScript基本语法 4.Bootstrap整体架构 5.12栅格系统 6.CSS组件架构设计思想 7.JavaScript插件架构 CSS布局 ...
- bootstrap笔记-布局
1.通过文本对齐类,可以简单方便的将文字重新对齐. <p class="text-left">Left aligned text.</p> <p cl ...
- bootstrap 笔记01
bootstrap源码样式: 移除body的margin声明设置body的背景色为白色为排版设置了基本的字体.字号和行高设置全局链接颜色,且当链接处于悬浮“:hover”状态时才会显示下划线样式 1, ...
- Bootstrap笔记合集
一. 为了简化操作,方便使用,Bootstrap通过定义四个类名来控制文本的对齐风格: ☑ .text-left:左对齐 ☑ .text-center:居中对齐 ☑ .text-right ...
- 后端小白的Bootstrap笔记 一
栅格系统 下面这张图是Bootstrap对栅格系统有关系数的规定 什么是栅格体统? 栅格系统是Bootstrap提供的移动优先的网格系统, 各个分界点如上: 576px 720px 992px 120 ...
随机推荐
- tomcat启动时,报java.io.EOFException
在启动Tomcat的时候突然报出IO异常,具体异常如下图 在网上找了解决方法,测试了好几种,都不行,到最后看了一个博客解决了,在此记录一下. 百度了下,网上都是说去Tomcat目录下:将tomcat5 ...
- 软工1816 · Alpha冲刺(7/10)
团队信息 队名:爸爸饿了 组长博客:here 作业博客:here 组员情况 组员1(组长):王彬 过去两天完成了哪些任务 学会了POSTMAN的使用,对后端已经完成的接口进行了收发消息正确性的验证 推 ...
- C++ Primer Plus学习:第七章
C++入门第七章:函数-C++的编程模块 函数的基本知识 要使用C++函数,必须完成如下工作: 提供函数定义 提供函数原型 调用函数 库函数是已经定义和编译好的函数,可使用标准库头文件提供原型. 定义 ...
- scrum 项目准备2.0
1.确定选题. 应用NABCD模型,分析你们初步选定的项目,充分说明你们选题的理由. 录制为演说视频,上传到视频网站,并把链接发到团队博客上. 截止日期:2016.5.6日晚10点 演说稿: 各位领导 ...
- Hbase的安装和配置
1,准备好hbase的linux环境下的压缩包,这里hadoop版本为hadoop2.5.0,hbase版本为 2,解压缩这个版本,不选src的,其实两个任一都行 进入到hbase安装包目录,我这里的 ...
- 【leetcode】62.63 Unique Paths
62. Unique Paths A robot is located at the top-left corner of a m x n grid (marked 'Start' in the di ...
- linux设置时区和自动同步时间
1.设置时区 编辑 /etc/sysconfig/clock 修改 ZONE="Asia/Shanghai" 然后 cp /usr/share/zoneinfo/Asia/Sh ...
- vue+postcss报错: variable '--primary-color' is undefined and used without a fallback
之前vue-cli3引入postcss的配置: https://www.cnblogs.com/XHappyness/p/7676680.html 发现这么一个问题,我再全局global.css中定义 ...
- javascript 常用知识点
1:浏览器是有缓存的,开发中可以通过快捷键绕过缓存 对于Windows驱动的系统:Ctrl + F5 对于Mac驱动的系统:Command + Shift + R. 2:精度问题 (符点和大数字可能会 ...
- c#对一个类的扩展
首先定义一个静态类,参数使用this约束并选择需要扩展的类,当然也可以 继续添加扩展是需要添加的参数 public static class StringExrprp { /// <summar ...