Bootstrap3简单介绍----专题1

声明:本文章是给初学bootstrap3的同学添加记忆的, 一定有非常多欠缺和不完好的地方, 希望能帮助到大家, 也希望能让很多其它的人了解boostrap并用在自己的项目中.

本文章的全部代码请大家在最新的浏览器里执行试验

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发。是一个CSS/HTML框架。

Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目。包含NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。

Bootstrap3(下面我就简称BT)环境搭建

从http://getbootstrap.com/getting-started/获取BT里面包括css fonts js 三个目录在HTML文件头里引入这些就OK了.

假设不想下载也能够用官方给出的CDN

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"><!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"><!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

BT网格系统

网格的意思就是把页面切割成格子依照每行分成12列(假设希望改动成24列等等能够LESS重编译自己定制). 网格系统能够依据设备的视口响应当小于767px的时候列就会垂直排列,当然列加起来等于12.以下看样例

<!DOCTYPE html>
<html lang="zh-CN"><head><title>Browser Show</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta charset='utf-8'><meta http-equiv="X-UA-Compatible" content="IE=edge"><link rel="shortcut icon" href="images/jigsaw.png"><!-- Bootstrap --><link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen"><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script><!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[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]--><style type="text/css">[class *= col-] {background: #e8e8e8;border: 2px solid #000;}</style></head><body><div class="container"><div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-8">.col-md-8</div></div></div></body>
</html>

这里的container 是让内容在页面的中间是一个容器

排版

排版我介绍一些经常使用到的.BT的默认字体是Helvetica 假设没有最后还有sans-serif. font-size 14px line-height 20px 段落的margin-bottom 10px

设置段落颜色代表不同语义

<p class="text-warning">warning</p>
<p class="text-info">info</p>
<p class="text-success">success</p>

表格

BT3中有4种表格的样式各自是table-striped 条纹背景

table-bordered 带边框的

table-hover 鼠标放上带高亮的

table-condensed 紧凑型表格

以下是代码演示

<!DOCTYPE html>
<html lang="zh-CN"><head><title>Browser Show</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta charset='utf-8'><meta http-equiv="X-UA-Compatible" content="IE=edge"><link rel="shortcut icon" href="images/jigsaw.png"><!-- Bootstrap --><link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen"><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script><!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[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><div class="container"><table class="table table-striped"><thead><tr><th>name</th><th>ID</th></tr></thead><tbody><tr><td>mike</td><td>123</td></tr><tr><td>mike</td><td>123</td></tr><tr><td>mike</td><td>123</td></tr></tbody></table><table class="table table-bordered"><thead><tr><th>name</th><th>ID</th></tr></thead><tbody><tr><td>mike</td><td>123</td></tr><tr><td>mike</td><td>123</td></tr><tr><td>mike</td><td>123</td></tr></tbody></table><table class="table table-hover"><thead><tr><th>name</th><th>ID</th></tr></thead><tbody><tr><td>mike</td><td>123</td></tr><tr><td>mike</td><td>123</td></tr><tr><td>mike</td><td>123</td></tr></tbody></table><table class="table table-condensed"><thead><tr><th>name</th><th>ID</th></tr></thead><tbody><tr><td>mike</td><td>123</td></tr><tr><td>mike</td><td>123</td></tr><tr><td>mike</td><td>123</td></tr></tbody></table></div></body>
</html>

也能够给每一行加入颜色有3中样式 success warning info 这个上面已经介绍过了和段落的一样

表单

BT3提供的表单能够让输入框圆角, 选中的时候会有蓝色光晕等

<!DOCTYPE html>
<html lang="zh-CN"><head><title>Browser Show</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta charset='utf-8'><meta http-equiv="X-UA-Compatible" content="IE=edge"><link rel="shortcut icon" href="images/jigsaw.png"><!-- Bootstrap --><link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen"><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script><!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[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><div class="container"><div class="row"><form role="form"><div class="form-group"><label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"></div><div class="form-group"><label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"></div><div class="form-group"><label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile"><p class="help-block">Example block-level help text here.</p></div><div class="checkbox"><label><input type="checkbox">Check me out</label></div><button type="submit" class="btn btn-default">Submit</button></form></div></div>
</body></html>

这里注意的是.最好将输入框放到form-group中为了增强搜索引擎的阅读必须有label标签可是怎样不让其显示能够加入.sr-only

水平排列的表单能够给form 加入form-horizontal类

能够通过input-lg input-sm控制输入框的高度宽度是利用网格系统col-md-xx 来控制的

<form role="form"><div class="form-group"><label for="exampleInputEmail1">Email address</label><input type="email" class="form-control input-lg" id="exampleInputEmail1" placeholder="Enter email"></div>
</form>

能够再输入框的前面加入一些提示标记

<div class="form-group"><div class="input-group"><div class="input-group-addon">@</div><input class="form-control" type="email" placeholder="Enter email"></div></div>

button

BT3提供了.7中button的样式不同颜色也提供4种button的大小当中一种是btn-block 这个意思就是让button充满整个行

请看代码

    <button type="button" class="btn">button</button><button type="button" class="btn btn-primary btn-lg">button</button><button type="button" class="btn btn-info btn-sm">button</button><button type="button" class="btn btn-success btn-xs">button</button><button type="button" class="btn btn-warning btn-block">button</button><button type="button" class="btn btn-danger">button</button><button type="button" class="btn btn-link">button</button>

学习BT组件请看本博客的BT学习-----2

转载于:https://www.cnblogs.com/mengfanrong/p/5186095.html

Bootstrap3学习笔记相关推荐

《Angular4从入门到实战》学习笔记
<Angular4从入门到实战>学习笔记腾讯课堂:米斯特吴视频讲座二〇一九年二月十三日星期三14时14分 What Is Angular?(简介) 前端最流行的主流JavaScrip ...
《Angular4从入门到实战》学习笔记（图文）
<Angular4从入门到实战>学习笔记腾讯课堂:米斯特吴视频讲座二〇一九年二月十三日星期三14时14分 What Is Angular?(简介) 前端最流行的主流JavaScrip ...
【前端学习笔记】移动web-黑马程序员学习笔记
移动web-黑马程序员学习笔记 1 字体图标 2 平面转换 2.1 绝对定位元素居中: 2.2 双开门效果 2.3 旋转效果 2.4* 转换原点 2.5 多重转换效果 2.6 缩放 3* 渐变 4 空 ...
PyTorch 学习笔记（六）：PyTorch hook 和关于 PyTorch backward 过程的理解 call
您的位置首页 PyTorch 学习笔记系列 PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解发布: 2017年8月4日 7,195阅读 ...
容器云原生DevOps学习笔记——第三期：从零搭建CI/CD系统标准化交付流程
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
容器云原生DevOps学习笔记——第二期：如何快速高质量的应用容器化迁移
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
2020年Yann Lecun深度学习笔记（下）
2020年Yann Lecun深度学习笔记(下)
2020年Yann Lecun深度学习笔记（上）
2020年Yann Lecun深度学习笔记(上)
知识图谱学习笔记（1）
知识图谱学习笔记第一部分,包含RDF介绍,以及Jena RDF API使用知识图谱的基石:RDF RDF(Resource Description Framework),即资源描述框架,其本质是一个 ...
计算机基础知识第十讲,计算机文化基础（第十讲）学习笔记
计算机文化基础(第十讲)学习笔记采样和量化PictureElement Pixel(像素)(链接: 采样的实质就是要用多少点(这个点我们叫像素)来描述一张图像,比如,一幅420x570的图像,就表示 ...

Bootstrap3学习笔记