Bootstrap3学习笔记
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 是让内容在页面的中间是一个容器
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYXR2YW5jZTAxNg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
排版
排版我介绍一些经常使用到的.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
Bootstrap3学习笔记的更多相关文章
- Bootstrap3 学习笔记
图片新窗口打开浏览
- AngularJS 1.2.x 学习笔记（表单校验篇）
https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...
- Python 开发与接口测试学习笔记
这是我跟着虫师学习中积累下来的学习笔记,写得比较简单,适合想学习Python开发与接口测试的初学者学习. 一.开发投票系统 1.参考官网文档,创建投票系统. https://docs.djangopr ...
- Django学习笔记（9）—— 开发用户注册与登录系统
一,项目题目: 开发用户注册与登录系统 该项目主要练习使用Django开发一个用户注册与登录的系统,通过这个项目然后巩固自己这段时间所学习的Django知识. 二,项目需求: 开发一个简单的用户登录与 ...
- 《Angular4从入门到实战》学习笔记
<Angular4从入门到实战>学习笔记 腾讯课堂:米斯特吴 视频讲座 二〇一九年二月十三日星期三14时14分 What Is Angular?(简介) 前端最流行的主流JavaScrip ...
- Django学习笔记（20）——BBS+Blog项目开发（4）Django如何使用Bootstrap
本文学习如何通过Django使用Bootstrap.其实在之前好几个Django项目中已经尝试使用过了Bootstrap,而且都留有学习记录,我已经大概有了一个大的框架,那么本文就从头再走一遍流程,其 ...
- Django学习笔记（18）——BBS+Blog项目开发（2）主体思路及流程
这篇博客主要完成一个BBS+Blog项目,那么主要是模仿博客园的博客思路,使用Django框架进行练习. 准备:项目需求分析 在做一个项目的时候,我们首先做的就是谈清楚项目需求,功能需求,然后才开始写 ...
- Django学习笔记（16）——扩展Django自带User模型，实现用户注册与登录
一,项目题目:扩展Django自带User模型,实现用户注册与登录 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册,登录,用户认证,注销,修改密码等功能. ...
- Django学习笔记（11）——开发图书管理页面
一,项目题目: 开发图书管理页面 该项目主要练习Django对多个数据库进行增删改查的操作. 二,项目需求: 基础需求:75% 1. 列出图书列表.出版社列表.作者列表 2. 点击作者,会列出其出版的 ...
随机推荐
- struts文件上传和下载
文件上传 jsp中 <a href="/file/new.action">文件上传案例</a> fileaction中 @Override public S ...
- cocos2d-x游戏开发系列教程-超级玛丽07-CMGameMap(三)-按键处理
在地图初始化好了之后,就开始移动马里奥吧,我在windows下,是使用键盘来移动马里奥的 w是跳,d是前进,a是后退,那么在程序里是怎么来获取这个按键的呢? 普通的windows程序,在按键之后,会有 ...
- 将HDC保存为BMP文件
HDC在MSDN中的全称为:The handle of device context.通常,我们都是用来做相应的显示操作. 熟悉WIN32的朋友对于其应该不会陌生,经常采用GetDC,G ...
- Linux 终端部分重要快捷键
tab 自动补全文件名,目录名或命令名ctrl+c 强行终止当前程序Ctrl+d 键盘输入结束或退出终端 Ctrl+s 暂定当前程序,暂停后按下任意键恢复运行 Ctrl+z 将当前程序放到后台运行 ...
- Hive实现oracle的Minus函数
在Oracle中minus运算的主要功能是: 在进行两个表格或者两个查询结果的时候,返回在第一个表格/查询结果中与第二个表格/查询结果不同样的记录. 结果不同样的记录包括两种情况:A,B 表中某一行的 ...
- C#构架之基础学习----动态添加窗体和 控件
仿照窗体应用程序编写: 任务一:生成一个Form类的窗体对象frm using System.Windows.Forms; //using指令使用Form对象创建所需的命名空间 //如 ...
- BZOJ 3384: [Usaco2004 Nov]Apple Catching 接苹果( dp )
dp dp( x , k ) = max( dp( x - 1 , k - 1 ) + *** , dp( x - 1 , k ) + *** ) *** = 0 or 1 ,根据情况 (BZOJ 1 ...
- ZOJ 3204 Connect them MST-Kruscal
这道题目麻烦在输出的时候需要按照字典序输出,不过写了 Compare 函数还是比较简单的 因为是裸的 Kruscal ,所以就直接上代码了- Source Code : //#pragma comme ...
- Week3（9月26日）：做完后，总结下
Part I:提问 =========================== 1.linq小回顾 (1)Movies控制器中Index动作,显示全部电影信息. public ActionResult ...
- 设置QPushButton的平面与突出（遍历控件）
#include "ui_maindialog.h" #include "maindialog.h" #include <QState> #incl ...