9月27日Bootstrap
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。使用bootstrap框架时,切记不能改变class的组名,如果需要建组设置属性,就再增加一个class组,下面的Bootstrp只是一些比较常用的属性,如果需要用到其他的属性,就到http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html网站调用。
1.Bootstrap 的网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。Bootstrap 3 是移动设备优先的,在这个意义上,Bootstrap 代码从小屏幕设备(比如移动设备、平板电脑)开始,然后扩展到大屏幕设备(比如笔记本电脑、台式电脑)上的组件和网格。移动设备上优先是指1.在内容上决定什么事最重要的;2.在布局上,优先设计更小的宽度,基础的 CSS 是移动设备优先,媒体查询是针对于平板电脑、台式电脑;3.逐渐增强,随着屏幕大小的增加而添加元素;4.响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列,这12列相邻的列也可以合并。
2.Bootstrap 排版
a.标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式。例如h1: <h1>标题 <small>副标题1</small></h1>,副标题颜色和大小不如正标题明显。
b.引导主题副本 为了给段落添加强调文本,则可以添加 <p class="lead"></p>,这将得到更大更粗、行高更高的文本。
c.强调 <strong>(设置文本为更粗的文本)、<em>(设置文本为斜体)。<strong>增强语气的文本</strong>。
3. Bootstrap按钮
常用的按钮有下列按钮:
<!-- 标准的按钮 --> <button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果,标识一组按钮中的原始动作 --> <button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 --> <button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 --> <button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 --> <button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 --> <button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮,看起来像一个链接,但同时保持按钮的行为 --> <button type="button"class="btn btn-link">链接按钮</button>
按钮的大小控制:
.btn-lg 这会让按钮看起来比较大。
.btn-sm 这会让按钮看起来比较小。
.btn-xs 这会让按钮看起来特别小。
.btn-block 这会创建块级的按钮,会横跨父元素的全部宽度。
按钮禁用:disabled 当禁用一个按钮时,它的颜色会变淡 50%,并失去渐变。<button type="button"class="btn btn-default btn-lg" disabled="disabled">禁用按钮</button>
4.Bootstrap图片
.img-rounded 为图片添加圆角
.img-circle 将图片变为圆形
.img-thumbnail 缩略图功能
.img-responsive 图片响应式
5.Bootstrap响应式实用工具
超小屏幕 小屏幕 中等屏幕 大屏幕
手机 (<768px) 平板 (≥768px) 桌面 (≥992px) 桌面 (≥1200px)
.visible-xs-* 可见 隐藏 隐藏 隐藏
.visible-sm-* 隐藏 可见 隐藏 隐藏
.visible-md-* 隐藏 隐藏 可见 隐藏
.visible-lg-* 隐藏 隐藏 隐藏 可见
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 可见 隐藏 可见
.hidden-lg 可见 可见 可见 隐藏
6.Bootstrap下拉菜单 如需使用下列菜单,只需要在 class .dropdown 内加上下拉菜单即可。
例如:<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li> <li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
</li>
上面代码表示一个下拉菜单,下拉名称为主题,下拉项有Java和数据挖掘2项。
7.Bootstrap输入框组
使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。通过向输入域添加前缀和后缀的内容,可以向用户输入添加公共的元素。例如用户名输入框、密码输入框,邮箱输入,都可以用到。
输入框组大小的调整:可以通过向 .input-group 添加相对表单大小的 class(比如 .input-group-lg、input-group-sm、input-group-xs)来改变输入框组的大小。输入框中的内容会自动调整大小。
8.Bootstrap导航元素
导航元素以一个带有 class .nav 的无序列表开始。代码示例如下:导航栏的名称为导航菜单,导航元素里有Home、SVN、iOS、VB.Net、Java、PHP 6个选项。
<p>导航菜单</p>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
9.Bootstrap警告(Alerts)
创建一个 <div>,并向其添加一个 .alert class 和四个上下文 class(即 .alert-success、.alert-info、.alert-warning、.alert-danger)之一,来添加一个基本的警告框。
示例:
<div class="alert alert-success">成功!很好地完成了提交。</div>
<div class="alert alert-info">信息!请注意这个信息。</div>
<div class="alert alert-warning">警告!请不要提交。</div>
<div class="alert alert-danger">错误!请进行一些更改。</div>
10.Bootstrap轮播
<div id="myCarousel" class="carousel slide">
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"> </div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> </div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> </div>
</div> <!-- 轮播(Carousel)导航 -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹ </a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">› </a>
</div>
9月27日Bootstrap的更多相关文章
- 腾讯QQ认证空间4月27日已全面开放申请,欲进军自媒体
今天看到卢松松的博客上爆出,腾讯QQ认证空间4月27日已全面开放申请的消息,这一消息出来, 马浩周根据提示方法进行申请,下面先说说腾讯QQ认证空间的申请方法: QQ认证空间开放申请公告地址:http: ...
- 2016年12月27日 星期二 --出埃及记 Exodus 21:22
2016年12月27日 星期二 --出埃及记 Exodus 21:22 "If men who are fighting hit a pregnant woman and she gives ...
- 2016年11月27日 星期日 --出埃及记 Exodus 20:18
2016年11月27日 星期日 --出埃及记 Exodus 20:18 When the people saw the thunder and lightning and heard the trum ...
- 2016年10月27日 星期四 --出埃及记 Exodus 19:12
2016年10月27日 星期四 --出埃及记 Exodus 19:12 Put limits for the people around the mountain and tell them, `Be ...
- 2016年6月27日 星期一 --出埃及记 Exodus 14:24
2016年6月27日 星期一 --出埃及记 Exodus 14:24 During the last watch of the night the LORD looked down from the ...
- 千寻浏览器 1.0 Beta 1(524)(2014年5月27日)
千寻浏览器--又一款新生浏览器今天进入各位浏览迷的视野.千寻浏览器基于IE内核,据传是由百度浏览器的上海团队操刀,在功能定位上,与目前的QQ浏览器有些相似. 千寻来自官方的解释:寻,追寻,探索,又是古 ...
- 我的Python成长之路---第七天---Python基础(22)---2016年2月27日(晴)
socket网络编程 socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. ...
- 6月27日CTO俱乐部下午茶印象
作者:朱金灿 来源:http://blog.csdn.net/clever101 感谢CSDN的邀请,有幸参加了6月27日“CTO俱乐部下午茶时光:CTO在团队管理中所遇到的那些事”活动.本期的主讲嘉 ...
- 导航狗IT周报-2018年05月27日
原文链接:https://www.daohanggou.cn/2018/05/27/it-weekly-9/ 摘要: “灰袍技能圈子”将闭圈:物理安全:为什么我们现在的生活节奏越来越快? 技术干货 1 ...
随机推荐
- android 按钮点击效果实现
在其他人的博客里看到其实实现按钮点击效果的方法有很多,这里提到的只是其中一个办法 图片素材(我自己用截图截的,可以自己搞) 放到mipmap目录下(studio是在这个目录下 , eclipse 直接 ...
- iOS开发--录音简单实现
- android 概述 及四大组件
目录: 概述 四大组件 UI布局 概述 android studio中,gen很bin文件夹合并为built文件夹 四大组件 包括: 活动,服务,内容提供者,广播接收者 活动是一种包含用户界面的组件 ...
- EPUBBuilder编辑器新版
epub全称为Electronic Publication的缩写,意为:电子出版, epub于2007年9月成为国际数位出版论坛(IDPF)的正式标准,以取代旧的开放Open eBook电子书标准,e ...
- The resource identified by this request is only capable of generating responses with characteristics
[转]今天在调试springMVC的时候,在将一个对象返回为json串的时候,浏览器中出现异常: The resource identified by this request is only cap ...
- java-汉字转换拼音-pinyin4j.jar
使用pinyin4j将汉字转成拼音,附件为pinyin4j的jar包 import net.sourceforge.pinyin4j.PinyinHelper; import net.sourcefo ...
- Get it,你离几何达人不远了!
对于爱学几何的人,是否存在这样的困扰:没有标准的尺规工具,图形画的不标准,理解上总是出错......整天在纸上画图,浪费大把大把的时间......几何图形画的不美观,在别人面前都拿不出手,公开课上都没 ...
- 【BZOJ-3572】世界树 虚树 + 树形DP
3572: [Hnoi2014]世界树 Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 1084 Solved: 611[Submit][Status ...
- 【bzoj1178】 Apio2009—CONVENTION会议中心
http://www.lydsy.com/JudgeOnline/problem.php?id=1178 (题目链接) 题意 给出n个区间,问在区间两两不相交的情况下最多能选出多少区间,并输出字典序最 ...
- C#中的斜变性和逆变性的详解
1,问题 大家可以看到定义泛型类型的可以看到out和in这两个关键字,那么具体代表什么意思呢? 2,文字解释 C# 4.0通过两个关键字:out和in来分别支持以协变和逆变的方式使用泛型. 如果某个返 ...