<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<!-- 匹配移动端 移动端优先 -->
<!-- 手机浏览器是把页面放在一个虚拟的窗口-viewport
content:内容
device:设备
width:控制viewport的大小，一般情况下指定为device-width(单位为缩放为100%的CSS像素),也可以指定一个固定的值例如600.

height:和width相应,指定高度。

initial-scal:初始缩放比例,页面第一次load的时候的缩放比例。

maximum-scale:允许用户缩放到的最大比例。

minimum-scale:允许用户缩放到的最小比例。

user-scalable:用户是否可以手动缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1,use-scalable=no">
<title>Bootstrap之文件引入</title>
<!--引入外部的bootstrap中的CSS文件-->
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
<!--先引入JQ文件，不要问为什么，听话 这是百度链接JQ库-->
<script src="Bootstrap\jQueryDownload808920161027\jQueryDownload\jquery-3.1.1.min.js"></script>
<script src="bootstrap\js\bootstrap.min.js"></script>
<!-- 搭配环境完成 -->
</head>
<body>
<!-- 布局容器 -->
<div class="container"><!-- 固定宽度是1170px 不加这个类名是百分之一百铺满 -->
大家好
</div>
<div class="container-fluid"><!-- 宽度是100% -->
内容
</div>
<!--排版标签-->
<!-- 和普通相比字体变了 加粗取消了 h1是36px h2是30px h3是24px h4是18px h5是14px h6是12px
.page-herder下面还有条线-->
<!--文本右对齐 center居中 left左对其-->
<h1 class="page-header text-right">h1~h6<small>aaa</small><big>bbb</big></h1>
<small></small><!-- 副标题 小一号 字体颜色变了 变成浅灰 -->
<big></big><!-- 副标题 大一号 字体颜色变了 变成浅灰 -->
<p class="uppercase">aaa</p><!-- 文字大小14px uppercase文本大写 text-lowercase文本小写 text-capitlize首字母大写 -->
<strong>推荐使用的加粗</strong>
<em>推荐使用的斜体</em>
<del>推荐使用删除线 在文字上有条线</del>

<h3>
<ul class="list-unstyled list-inline">
<!--list-unstyled去掉 html和那些列表里的小样式 list-inline竖排的列表变成横排-->
<li>html</li>
<li>css</li>
<li>js</li>
</ul>
</h3>
<!--dl-horizontal内容也变成横排-->
<dl class="dl-horizontal">
<dt>aaaaa</dt>
<dd>bbbbb</dd>
</dl>
<!--table 变成表格形式 并且有对其方式 但是td内容无表格线-->
<!-- table-bordered成了真正的表格 内容和内容之前有线隔开 -->
<!--table-hover鼠标悬停变色-->
<!--table-striped各行换色-->
<!--table-condensed缩小高度变紧凑-->
<!--PS:状态类设置的行或td
.active:鼠标悬停在表格行内的所变颜色
.success:标示成功或积极的动作
.info标示普通的提示信息或动作
.warning标示警告或用户注意
.danger标示危险或者潜在的带来负面影响的动作
-->
<div class="table-responsive"> <!--响应式布局 是给table的父元素加 以移动设备为优先-->
<table class="table table-bordered">
<tr>
<td>编号</td>
<td>物品</td>
<td>状态</td>
</tr>
<tr>
<td>001</td>
<td>外卖</td>
<td>配送中</td>
</tr>
</table>
</div>

<!--响应式图片和栅格系统一起使用（普遍）-->
<div class="container-fluid" style="background:#fff;"></div>
<img src="xxx/1.jip" class="img-responsive"><!--img-responsive图片响应式处理-->
<!--img-circle图片在页面长宽不一致时变椭圆-->
<!--img-rounded图片在页面长宽不一致时四角变圆角-->
<!--最常用img-thumbnail图片在页面长宽不一致时有个外框是圆角的-->
<img src="xxx/1.jip" class="img-responsive" class="img-circle">

<!--栅格系统一定要放入容器中 就是<div class="container"></div>或者<div class="container-fluid"></div>-->
<!--栅格系统就是将浏览器分成12列 栅格系统由列col和行row构成页面的布局-->
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Boostrap之表单</title>
</head>
<body>
<div class="container" style="background:#e6e6e6;">
<form>
<!--让邮箱和密码不是一个组产生空一行效果就建个div加上class="from-group"-->
<div class="from-group">
<label for="cemail">邮箱</label>
<!--from-control输入框出现圆倒角-->
<input type="email" name="cemail" id="cemail" class="from-control">
</div>
<div class="from-group">
<label for="psd">密码</label>
<input type="password" name="psd" id="psd" class="from-control">
</div>
<!--加class="checkbox-inline"复选框变好看了就像选的框和字体大小样式变了还有倒角卧槽形容不了看效果-->
<div class="from-group">
<label class="checkbox-inline"><input type="checkbox" name="hobby">写代码1</label>
<label class="checkbox-inline"><input type="checkbox" name="hobby">写代码2</label>
<label class="checkbox-inline"><input type="checkbox" name="hobby">写代码3</label>
</div>
<div class="from-group">
<label class="checkbox-inline"><input type="checkbox" name="hobby">写代码1</label>
<label class="checkbox-inline"><input type="checkbox" name="hobby">写代码2</label>
<label class="checkbox-inline"><input type="checkbox" name="hobby">写代码3</label>
</div>
<div class="from-group">
<!--radio-inline变样式好看了 lable加disabled表示点击文字选择不了出现禁止样式 input加表示控制就是选择框禁止了-->
<label class="radio-inline"><input type="radio" name="sex" value="男">男</label>
<label class="radio-inline" disabled><input type="radio" name="sex" value="女" disabled="">女</label>
</div>
<!--输入框组-->
<!--class="input-group"将成型的搜索样式和input合成一组 搜索样式在左边-->
<div class="input-group">
<!--class="input-group-addon"形成了一个搜索框它与input分开-->
<span class="input-group-addon">搜索</span>
<input type="search" name="sc" id="sc" class="from-control">
</div>
<!--输入框组方法就是某些注册账号里面 左边是一个图案旁边是输入框 而主流输入框图案在bootsrap里面有 直接复制就可以方法就是比如<span class="input-group-addon"><span class="粘贴的东西"></span</span>-->
<!--<from class="from-inline"都在一行了 并不常用-->
</form>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1,use-scalable=no">
<title>Bootstrap之栅格系统</title>
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
<script src="Bootstrap\jQueryDownload808920161027\jQueryDownload\jquery-3.1.1.min.js"></script>
<script src="bootstrap\js\bootstrap.min.js"></script>
<style>
/* 所有的div class包含那个的 增加写的样式 */
div[class*="col-"]{
border: 1px solid blue;
}
</style>
</head>
<body style="background:#333333;">
<div class="container" style="background:#fff;">
<!--一行有12列 col-md-1标示一列 那么col-md-2表示2列
一行里面有 12列 col-md-2 就是说一行里面有6列-->
<div class="row">
<div class="col-md-1">col-1</div>
<div class="col-md-1">col-2</div>
<div class="col-md-1">col-3</div>
<div class="col-md-1">col-4</div>
<div class="col-md-1">col-5</div>
<div class="col-md-1">col-6</div>
<div class="col-md-1">col-7</div>
<div class="col-md-1">col-8</div>
<div class="col-md-1">col-9</div>
<div class="col-md-1">col-10</div>
<div class="col-md-1">col-11</div>
<div class="col-md-1">col-12</div>
<!--这列在另外一行了-->
<div class="col-md-1">col-13</div>
</div>
</div>
</body>
</html>
<!-- 超小屏幕 手机 (<768px) .col-xs- 列宽是自动的
小屏幕 平板 (≥768px) .col-sm- 列宽是62px
中等屏幕 桌面显示器 (≥992px) .col-md- 列宽是81px
大屏幕 大桌面显示器 (≥1200px) .col-lg- 列宽是97px
要做成响应式的用这个分辨率
-->
<!-- offset偏移 只能靠右 靠右是按照自己研究都是重新从另一行计算
col-xs/sm/md/lg-offset-数值 比如数值2就是偏移2个列 想靠左侧怎么办 排列 -->

<!-- 想靠左侧怎么办 排列
col-xs/sm/md/lg-pull-数值 左移 移动是现有s基础上移动如果会和下排的列有重叠现象
col-xs/sm/md/lg-push-数值 右移 -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>辅助类-情境文本颜色</title>
</head>
<body>
<!-- 要有容器包裹 -->
<div class="container" style="background:#e6e6e6"></div>
<p class="text-muted">这是柔和的颜色</p>
<p class="text-primary">这是初始化颜色</p>
<p class="text-success">这是成功的颜色</p>
<p class="text-info">这是提示信息的颜色</p>
<p class="text-warning">这是警告的颜色</p>
<p class="text-danger">这是危险的颜色</p>
<!--背景文本颜色-->
<p class="bg-succese">成功背景颜色</p>
<p class="bg-info">提示背景颜色</p>
<p class="bg.primary">初始化背景颜色</p>
<p class="bg-warning">警告背景颜色</p>
<p class="bg-danger">危险背景颜色</p>
<!--下拉三角形-->
<span class="caret"></span>
<!--快速浮动 还是要有容器-->
<!--.pull-left .pull-right-->
<!--清除浮动clearfix 给父级加-->
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>bootstrap之响应式表单</title>
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
<script src="Bootstrap\jQueryDownload808920161027\jQueryDownload\jquery-3.1.1.min.js"></script>
<script src="bootstrap\js\bootstrap.min.js"></script>
</head>
<body>
<!--必须结合栅格系统 行可以省去 不需要写列 做表单时-->
<div class="container" style="background:#e6e6e6;">
<form class="from-horizontal"><!--这是响应式布局-->
<label class="col-md-2 text-right" for="use">账号</label><!--用text-right这样写账号和输入框靠在一起了-->
<div class="col-md-10">
<input type="text" name="use" id="use" class="control">
</div>
</div>
</form>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>bootstrap之按钮</title>
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
<script src="Bootstrap\jQueryDownload808920161027\jQueryDownload\jquery-3.1.1.min.js"></script>
<script src="bootstrap\js\bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="background:#e6e6e6;">
<!--.btn是按钮样式的基类 想要有样式必须写.btn-->
<button class="btn btn-primary">确定要删除嘛</button>
<button type="button" value="修改" btn-default></button><!--这是常规按钮-->
<a href="#" class="btn btn-danger btn-lg"></a><!-- btn-lg是最大的按钮sm中等xs最小 -->
<a href="#" class="btn btn-warning btn-sm"></a>
<a href="#" class="btn btn-success active btn-xs"></a><!--active激活鼠标放上去颜色由浅变深-->
</div>
</body>
</html>
<!-- primary">这是初始化颜色</p>
success">这是成功的颜色</p>
info">这是提示信息的颜色</p>
warning">这是警告的颜色</p>
danger">这是危险的颜色</p> -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>bootstrap之缩略图</title>
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
<script src="Bootstrap\jQueryDownload808920161027\jQueryDownload\jquery-3.1.1.min.js"></script>
<script src="bootstrap\js\bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="background:#e6e6e6;">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
<div class="thumnail"></div><!--加圆角的边框-->
<div src="data:images/1.jpg" class="img-responsive"><!--增加图片响应式-->
<div class="caption"><!--里面要加标题了 caption 元素定义表格标题。-->
<h3 class="bg.-info">这是标题</h3>
<p class="text-muted">这是内容</p>
</div>
<!--这里我要加两个按钮并且让它靠右边对齐-->
<div class="text-right">
<button class="btn btn-success btn-xs">我看看</button>
<button class="btn btn-info btn-xs">买了买了</button>
</div>
</div>
</div>
</div>
<!--第二块加到这-->
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>bootstrap之下拉菜单与标签页</title>
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
<script src="Bootstrap\jQueryDownload808920161027\jQueryDownload\jquery-3.1.1.min.js"></script>
<script src="bootstrap\js\bootstrap.min.js"></script>
</head>
<body><!--这个样式是登陆按钮有个小三角 点一下出现各种登陆-->
<div class="container" style="background:#e6e6e6;">
<h2 class="page-herder">下拉菜单</h2>
<div class="dropdown">
<button class="btn btn-success" Data-toggle="dropdown">
登陆<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">QQ/a></li>
<li class="divider"></li><!--每一个都有一条分割线-->
<li><a href="#">微信</a></li>
<li><a href="#">邮箱</a></li>
</ul>
</div>
</div>

<h2>标签页</h2>
<ul class="nav nav-tabs"><!--这是标签页样式-->
<!--nav-pills是胶囊样式的标签页-->
<!--nav-stacked将标签纵向-->
<li><a href="#" class="active">home</a></li>
<li><a href="#" class="active">home</a></li>
<li><a href="#" class="active">home</a></li>
</ul>
</body>
</html>
<!--
.dropdown:父类元素 包含触发的按钮和下拉列表加样式
.dropdown-menu:给下拉菜单的内容 给ul样式
.Data-toggle:按钮触发器
.dropdown-menu-left:下拉菜单对齐 .dropdown-menu-right
.divider:每一个li之间有条分割线
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>bootstrap之导航</title>
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
<script src="Bootstrap\jQueryDownload808920161027\jQueryDownload\jquery-3.1.1.min.js"></script>
<script src="bootstrap\js\bootstrap.min.js"></script>
</head>
<body>
<nav class="nacbar nav-default navbar-fixed-top">
<div class="container"><!--加了之后就和内容对齐了 因为它有默认值 不然紧贴左边-->
<!--页面的头部-->
<div class="bavbar-header">
<a href="#"><img src="#"></a>
</div>
<!--导航链接-->
<div class="collapse naver-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">home</a></li><!--class="active"是激活-->
<li class="active"><a href="#">home</a></li>
<li class="active"><a href="#">home</a></li>
<li class="active"><a href="#">home</a></li>
<li class="active"><a href="#">home</a></li>
</ul>
</div>
</div>
</nav>
<!--下面的内容其实不用看信息内容要用容器包起来就是了-->
<div class="container">
<h3>这是乱加的标题</h3>
<p>
22222222222222222222222222222
</p>
</div>
</body>
</html>

Bootstrap自学笔记的更多相关文章

  1. JAVA自学笔记27

    JAVA自学笔记27 1.类的加载 1)当程序要使用某个类时,如果该类还未被加载到内存中,则系统会通过加载,连接,初始化三步来实现对这个类进行初始化. ①加载:就是指将class文件读入内存,并为之创 ...

  2. jQuery:自学笔记(4)——事件与事件对象

    jQuery:自学笔记(4)——事件与事件对象 jQuery中的事件 什么是事件 所谓事件,就是被对象识别的操作,即操作对象队环境变化的感知和反应,例如单击按钮或者敲击键盘上的按键. 所谓事件流,是指 ...

  3. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  4. 6.bootstrap练习笔记-缩略图和list-group

    bootstrap练习笔记-缩略图 1.其实缩略图很简单,只要按照固定的格式来设计 div.container 总容器  在宽度为1200px以上 div.row 一行内容 div.col-lg-3. ...

  5. 5.bootstrap练习笔记-巨幕和流体布局

    bootstrap练习笔记-巨幕和流体布局 1.在bootstrap中 .jumbotron可以设置巨幕效果 2.div.jumnotron自动设置一个黑色的巨幕效果 3.div.container ...

  6. 3.bootstrap练习笔记-媒体内容

    bootstrap练习笔记-多媒体对象 1.在bootstrap中,如果想存放内容,一种解决的方式就是利用media这个class 首先要设置一个div.container作为一个总的容器来存放内容 ...

  7. 4.bootstrap练习笔记-内容区块

    bootstrap练习笔记-内容区块 1.bootstrap中,采用的全部是div布局,把你的内容首先要包含在一个大的DIV区块当中 2.然后再写一个div.container,这个div里面存放真正 ...

  8. 1.bootstrap练习笔记-导航条

    bootstrap练习笔记 1.关于导航栏   官网链接:http://v3.bootcss.com/components/#nav 结构大概是这样的: nav标签标识导航栏 class为navbar ...

  9. 2.bootstrap练习笔记-轮播图

    bootstrap练习笔记-轮播图 1.要使用轮播图,首先要将其放在一个主div里面 设置id为myCaroysel class为carousel slide 设置id是标识这个div是轮播图,等到l ...

随机推荐

  1. windows+ubuntu时间修改问题

    只需要在ubuntu系统数输入一行指令即可 timedatectl set-local-rtc 1 --adjust-system-clock

  2. BETA阶段冲刺

    1.介绍小组新加入的成员,Ta担任的角色 新成员 担任工作 江鹭涛 前端设计 2.讨论是否需要更换团队的PM 不需要,上阶段配合不错,这阶段继续努力 3.下一阶段需要改进完善的功能 服务器并发处理,界 ...

  3. lintcode-202-线段树的查询

    202-线段树的查询 对于一个有n个数的整数数组,在对应的线段树中, 根节点所代表的区间为0-n-1, 每个节点有一个额外的属性max,值为该节点所代表的数组区间start到end内的最大值. 为Se ...

  4. Halcon 学习笔记3 仿射变换

    像素的减少 开运算(较少) 腐蚀(去除更多) 对灰度图像的开运算或腐蚀 相当于将灰度图像变暗 像素增加 闭运算(较少) 膨胀(较多) 对灰度图像的闭运算或膨胀 相当于将灰度图像变亮 仿射变换 另外一种 ...

  5. arp_filter的验证,使用net namespace

    使用网络命名空间:net namespace 在namespace ns1中增加了两个网卡 sudo ip netns add ns1 sudo ip link add veth0 type veth ...

  6. Mac & how to uninstall LANDesk

    Mac & how to uninstall LANDesk http://eddiejackson.net/wp/?p=9036 https://community.ivanti.com/d ...

  7. 内存测试——Android Studio自带内存检测功能

    AndroidStudio 自带 CPU 和内存检测工具,绘制出变化图,可以直观明了的看出内存和cpu的变化曲线. 手机连接电脑,选择要调试的手机,选择要检测的应用进程,Memory是内存监控,CPU ...

  8. 【EF】Entity Framework Core 命名约定

    本文翻译自<Entity Framework Core: Naming Convention>,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 注意:我使用的是 Entity ...

  9. HDU4753 Fishhead’s Little Game——2013 ACM/ICPC Asia Regional Nanjing Online

    今天比赛又是做得好水的.被狂虐啊. 比赛两个多小时一直没出题,遒遒最先交的若干发都wa了.T_T 我独自在一遍苦思了1006这个题,还好最后把这个题目A掉了,不然又是深坑队友. 题目的意思我就不多说了 ...

  10. 转--- 秒杀多线程第七篇 经典线程同步 互斥量Mutex

    阅读本篇之前推荐阅读以下姊妹篇: <秒杀多线程第四篇一个经典的多线程同步问题> <秒杀多线程第五篇经典线程同步关键段CS> <秒杀多线程第六篇经典线程同步事件Event& ...