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. 点击作者,会列出其出版的 ...
随机推荐
- 虽然net人
http://v.qq.com/boke/page/c/h/0/c01173tzeh0.html http://v.qq.com/boke/page/r/7/x/r0117l07r7x.html ht ...
- Python实现BBS自动登录并发帖
初学Python有了一段时间,寒假里又看了一些Web编程方面的知识,就写了一个实现bbs自动登录和发帖的Python脚本 由于本人学校BBS站首页使用js加载,貌似通过首页登录不大可行,然后就分析表单 ...
- C#_会员管理系统：开发二（会员资料管理界面的‘增删改查’）
会员资料管理界面: 新建一个窗体,窗体界面和控件如下: 窗体中的控件dgvManager更改FullRowSelect属性(点击选中效果)为:FullRowSelect 会员资料管理界面窗体的详细代码 ...
- CentOS下配置多个Tomcat同时运行 本篇文章来源于 Linux公社网站(www.linuxidc.com)
原文地址:http://blog.csdn.net/tjcyjd/article/details/46553361 版权声明:本文为博主原创文章,未经博主允许不得转载. 同一服务器部署多个tomcat ...
- BZOJ 1787: [Ahoi2008]Meet 紧急集合( 树链剖分 )
这道题用 LCA 就可以水过去 , 但是我太弱了 QAQ 倍增写LCA总是写残...于是就写了树链剖分... 其实也不难写 , 线段树也不用用到 , 自己YY一下然后搞一搞就过了...速度还挺快的好像 ...
- iOS 开发设计常用软件及工具整理
1, xCode 2, AppCode 3, Skech 原型设计软件 4, Hype 动画设计工具 5, fontawsome 免费图表 6, Prepo icon, images.catlog 生 ...
- datetime.datetime.today()生成时间转换成unixtime
首先要将时间中秒后面的.及其以后的部分去掉,否则时间转换函数 currenttime=str((datetime.datetime.today())).split('.',2)[0] str((dat ...
- 设计模式 ( 十五 ) 中介者模式Mediator（对象行为型）
设计模式 ( 十五 ) 中介者模式Mediator(对象行为型) 1.概述 在面向对象的软件设计与开发过程中,根据“单一职责原则”,我们应该尽量将对象细化,使其只负责或呈现单一的职责,即将行为分布到各 ...
- [置顶] 深入ResourceBundle
ResourceBundle是java开发中非常实用的一个类,主要用来处理应用程序多语言这样的国际化问题. 如果你的应用程序如果有国际化的需求,可以考虑使用ResourceBundle, 你要做的就是 ...
- 从零開始开发Android版2048 （四） 分数、重置、结束
这一篇的内容主要是在上一篇的基础上,增加分数计算(包含当前分数和最高分数).游戏结束的推断以及游戏界面的重置这三个部分的功能. 一.分数的计算和保存 首先,2048这个游戏的分数包含 ...