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 ...
随机推荐
- linux中级-JAVA企业级应用TOMCAT实战
1. Tomcat简介 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目,由Apache.Sun和其他一些公司及个人共 ...
- javascript生成GUID的代码
<script type="text/javascript"> var Guid = function(){}; Guid.prototype = { S4:funct ...
- 模块(modue)的概念:
在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很 ...
- ORA-600(qerltcInsertSelectRop_bad_state)错误
来源于: http://blog.itpub.net/22458783/viewspace-615501/ 这是碰到的第一个11.2上的bug,在利用IGNORE_ROW_ON_DUPKEY_INDE ...
- ( 转 ) Android自绘字体大小paint.settextsize随分辨率大小变化
1.获取当前设备的屏幕大小 DisplayMetrics displayMetrics = new DisplayMetrics(); this.getWindowManager().getDefau ...
- 学习Spring(二) 调用静态工厂方法创建Bean
1,创建抽象的产品类 package com.robert.spring.shop; public abstract class Product { } 2,创建具体产品类 package com.r ...
- 一、项目基础架构(附GitHub地址)——以ABP为基础架构的一个中等规模的OA开发日志
前言: 最近园子里ABP炒的火热.看了几篇对于ABP的介绍后,深感其设计精巧,实现优雅.个人感觉,ABP或ABP衍生品的架构设计,未来会成为中型Net项目的首选架构模式.如果您还不了解ABP是什么,有 ...
- U盘常见问题汇总
优盘常见问题,持续更新.大家有什么问题可以留言,一起解决,谢谢. 1.优盘中的文件全部变成快捷方式解决办法 打开优盘,查找updat.vbs文件脚本,此文件脚本为病毒脚本,若找不到文件脚本则开启隐藏文 ...
- BuiltWith
BuiltWith网站技术信息查询工具 利用该网站所提供的功能,你可以查询出某网站背后是由哪些技术来支持的, 比如操作系统的类型.所采用的访问量统计服务.采用的发布平台.广告平台.语言框架.聚合功能. ...
- 【BZOJ-4386】Wycieczki DP + 矩阵乘法
4386: [POI2015]Wycieczki Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 197 Solved: 49[Submit][Sta ...