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. TCP系列45—拥塞控制—8、SACK关闭的拥塞撤销与虚假快速重传

    一.概述 这篇文章介绍一下TCP从Recovery状态恢复到Open状态的时候cwnd的更新.我们在tcp重传部分的文章中曾经介绍过虚假重传的概念,Linux在探测到虚假重传的时候就会执行拥塞撤销操作 ...

  2. erlang节点互相ping，一个能ping通，另外一个不行。

    今天发现一个问题,2个erlang节点,1个主动ping另外一个不通,然后等待另外一个ping过来,2个节点才连通.记录一下. 首先,erlang节点的cookie是一致的.查了文档,cookie一致 ...

  3. PAT L1-015 跟奥巴马一起画方块

    https://pintia.cn/problem-sets/994805046380707840/problems/994805124398956544 美国总统奥巴马不仅呼吁所有人都学习编程,甚至 ...

  4. 微信获取 openid 静默及非静默

    <?php /* 需要的微信公众号配置信息 APPID : 绑定支付的APPID APPSECRET : 公众帐号secert */ class Index { // 配置账号信息 privat ...

  5. c语言----程序记录

    1.结构体写入文件,读取 #include <stdio.h> #include <string.h> #include <stdlib.h> #define ma ...

  6. 转载-C++ vector 用法

    转自:http://www.cnblogs.com/wang7/archive/2012/04/27/2474138.html 在c++中,vector是一个十分有用的容器,下面对这个容器做一下总结. ...

  7. 弱网络模拟测试工具---易测app

    易测功能介绍   易测是一款基于无线客户端研发场景的通用测试工具, 它通过在研发人员的自持机上提供各种辅助能力&标准化的专项测试服务来提升研发质量&效率.   易测app是阿里巴巴做的 ...

  8. iOS-开发者账号与证书

    0.开发者账号的申请 1.iOS-证书相关 2.iOS-证书申请 3.iOS-APNS证书申请与使用 4.iOS-App发布证书的申请与使用

  9. 2017 ACM Arabella Collegiate Programming Contest(solved 9/13, complex 12/13)

    A.Sherlock Bones 题意: 给出长度为n的01串,问f(i,j)=f(j,k),(i<j<k)的i,j,k取值种数.其中f(i,j)表示[i,j]内1的个数, 且s[j]必须 ...

  10. P3469 [POI2008]BLO-Blockade

    题意翻译 在Byteotia有n个城镇. 一些城镇之间由无向边连接. 在城镇外没有十字路口,尽管可能有桥,隧道或者高架公路(反正不考虑这些).每两个城镇之间至多只有一条直接连接的道路.人们可以从任意一 ...