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笔记-加强版的更多相关文章

  1. Bootstrap笔记--快速入门

    首先是Bootstrap的简介: 业余了解:下面这个网址可以查询IP地址的地理位置 下面学习:(具体可以参考Bootstrap中文网) 栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流 ...

  2. 【巩固】Bootstrap笔记三

    这段笔记介绍了bootstrp中以下几点应用点: 警告框的使用 面板功能 运用chart.js制作图表 进度条的制作 媒体对象的制作 有一个元素如果有属性alert-dismissible" ...

  3. 【巩固】Bootstrap笔记一

    这两天开始重新巩固一下bootstrap的学习,群里有朋友介绍说麦子学院的教程不错,特地看了一下,有2个项目练习,所以跟着做了一下,下面开始笔记. <button class="nav ...

  4. 【巩固】bootstrap笔记二

    这段主要记录如何给排版完的页面加一些动画效果,用到了的插件有: wow.min.js jquery.singlePageNav.min.js animate.css 将导航条上对应的菜单和页面上对应的 ...

  5. 深入理解Bootstrap笔记

    框架介绍 1.框架简介 2.CSS基本语法 3.JavaScript基本语法 4.Bootstrap整体架构 5.12栅格系统 6.CSS组件架构设计思想 7.JavaScript插件架构 CSS布局 ...

  6. bootstrap笔记-布局

    1.通过文本对齐类,可以简单方便的将文字重新对齐. <p class="text-left">Left aligned text.</p> <p cl ...

  7. bootstrap 笔记01

    bootstrap源码样式: 移除body的margin声明设置body的背景色为白色为排版设置了基本的字体.字号和行高设置全局链接颜色,且当链接处于悬浮“:hover”状态时才会显示下划线样式 1, ...

  8. Bootstrap笔记合集

    一. 为了简化操作,方便使用,Bootstrap通过定义四个类名来控制文本的对齐风格: ☑   .text-left:左对齐 ☑   .text-center:居中对齐 ☑   .text-right ...

  9. 后端小白的Bootstrap笔记 一

    栅格系统 下面这张图是Bootstrap对栅格系统有关系数的规定 什么是栅格体统? 栅格系统是Bootstrap提供的移动优先的网格系统, 各个分界点如上: 576px 720px 992px 120 ...

随机推荐

  1. 安装VS的过程

    软件工程学习到第三周,我们需要下载一个新的软件,用来进行软件测试.刚开始知道的时候觉得没甚么,不就是下个软件吗!有什么大不了的,分分钟搞定的事.可是想象很美好,现实很骨感.这是一个巨大的工作量呀,不仅 ...

  2. 又要开始新的征程了hhh(这次内容比较感兴趣)

    因为做英雄部分,既是我比较感兴趣,又很符合这次c++学习的目的,所以我很开心. 其实从小玩的RPG,即时战略和回合制游戏不算少,对于属性方法其实都算不上陌生.但是还是在网上找了一些学习资源. http ...

  3. 读《it小小鸟》有感

    我一直认为大学就是一个自由的舒适的学习环境,没有人可以干扰你限制你,以至于我到了大学之后只剩下了颓废的生活.每天上课玩手机,下课玩电脑,吃饭叫外卖,从不去锻炼,周末就熬夜通宵,状态越来越差,导致我逐渐 ...

  4. Struts2(四)

    以下内容是基于导入struts2-2.3.32.jar包来讲的 1.struts2配置文件加载的顺序 struts2的StrutsPrepareAndExecuteFilter拦截器中对Dispatc ...

  5. 【第一周】第一周工作统计(psp)

    项目:词频统计 项目类型:个人项目 项目完成情况:已完成 项目改进:未变更 项目日期:2016.9.3-2016.9.4 3号 类别c 内容c 开始时间s 结束e 中断I 净时间T 项目实践 构思   ...

  6. Mybatis 中 sql 语句的占位符 #{} 和 ${}

    #{} 表示一个占位符号,通过 #{} 可以实现 preparedStatement 向占位符中设置值,自动进行 java 类型和 jdbc 类型转换.#{} 可以有效防止   sql注入. #{}  ...

  7. ZOJ3513_Human or Pig

    这个题太坑爹了,题意也好纠结. 是这样的,给你一个n*m的矩形,中间有n*m个1*1的格子,有不同的跳跃方法.如果当前为human(人类)那么他可以有意识的选择自己下一步跳往何方:如果当前为pig(猪 ...

  8. bzoj1853-大包子的幸运数字

    题意 称只含有 6 和 8 的数字为幸运数字.称幸运数字的倍数为类幸运数字.求 \([l,r]\) 中有多少个类幸运数字.\(1\le l,r\le 10^{10}\) . 分析 幸运数字最多有 \( ...

  9. BZOJ 1189 紧急疏散(二分+最大流)

    求出所有人撤离的最短时间.由于每扇门只能通过一次,所以不能简单用bfs来搞. 显然答案是有单调性的,考虑二分,问题变成了判断时间x所有人能不能撤离. 考虑最大流.对于每扇门,每个时间通过的人数最多为1 ...

  10. bzoj4798[CEOI2015] Calvinball championship

    这年头,n方跑1万的题已经不多了... 题意 bzoj4798 不知道怎么叙述这个题意... 分析 如果某个序列字典序小于给定的序列,我们不妨考虑从左到右第一个小于给定的序列的位置,并枚举这个位置的数 ...