开发者社区> 技术小胖子> 正文

Bootstrap快速入门

简介:
+关注继续查看

概念

BootStrap是由Twitter的两位员工Mark Otto和Jacob Thornton于2010年8月创建,距今已有7年,不过其仍然是最流行的前端CSS框架。它基于Less前端开发库,提供了常见的CSS和Javascript代码,然开发快速上手。其具有以下特性:完整的基础CSS插件;丰富的预定义样式表;基于jQuery的js插件集;非常灵活的响应式栅格系统,而且崇尚移动先行的思想。随着bootstrap的火爆,出现了很多优秀插件,比如Font Awesome字体。
Bootstrap官网地址,demo和文档非常丰富。
其下载后的源码结构为:

这儿值得的一说的就是fonts中通过字体文件代替了过去的.png,其通过@font-face语法,将安全的Web字体实时下载到客户端,便于任意缩放、改变颜色。
Html标准模板如下所示

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap基础模板</title>
    <link href="../public/css/bootstrap.css" rel="stylesheet">
    <link href="../public/css/bootstrap-theme.css" rel="stylesheet"></head><body>
    <header></header>
    <article></article>
    <footer></footer>
    <script type="text/javascript" src="../public/js/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="../public/js/bootstrap.js"></script></body></html>

可以看到viewport的媒体查询,此外如果需要更多的模板可以访问getbootstrap下载模板。

CSS基本回顾

优先级:(过去有一些误区)如何确定CSS的优先级,需要引入一个机制,分别用数字(a,b,c,d)表示优先组合,a表示style属性(行内样式),优先级最高,但由于一般使用class样式,该值为0;b是该css选择器上id数量的总和,一般为1个;c是用在该css选择器上的其他属性css选择器和伪类的总和,包括class(.btn)和属性css选择器li[id=red];d计算元素div和伪元素first-child;通用css选择器*的0优先级,即最低;如果2个css具有相同优先级,在样式表中后面的起作用。比如下面连个选择器的优先,第一个比第二个高。
leftbar li#first{color: red}: 0,2,0,1
leftbar li:first-child{color: blue}: 0,1,0,2

选择器
属性选择器

  • [att=value] 该属性有确定的值

  • [att~=value] 该属性值必须是多个空格隔开的值,比如class="title featured home",其中需要有value

  • [att|=value] 属性值时value或value-

  • [att^=value] 属性值以什么开始

  • [att$=value] 属性值以什么结束

  • [att*=value] 属性值包含特定值

子选择器:用>表示,例如table>thread>tr>th
兄弟选择器:临近兄弟用+,普通兄弟用~

伪类:bootstrap支持的伪类包括:hover鼠标划过时的状态, :focus元素有焦点的状态, :first-child:last-child:nth-child()指定元素的一个或多个特定子元素(可以是数字,也可以是even,odd)。
例如,设置按钮组,除第一个、最后一个按钮和带dropdown-toggle样式的元素外,其他btn样式都不设置圆角

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0}

display属性:用于定义建立布局时元素生成的框的类型,如果不谨慎使用容易出错

  • none 此元素不会显示

  • block 此元素显示为块级元素,前后会带换行符

  • inline 默认,此元素会被显示为内联元素,没有换行符

  • inline-block 行内块元素

  • list-item 此元素会以列表显示

  • run-in 此元素会根据上下问作为块级元素和内联元素显示

  • inherit 规定从父元素集成display属性

  • table-xxx 各种table显示

媒体查询:响应式设计的核心元素,常用的有min-width,max-width,and,详情可访问Mediaqueries官方网站

JavaScript语法回顾

||和&&运算符:a&&b返回第一个可转化为false的元素值,a||b返回第一个可转换为true的元素值。
立即调用的函数表达式:在JS中,function定义后通过加小括号,完成立即调动。(function(){}())

+function($){
    "user strict";
}(jQuery);//这儿+和;一样,起到分割的作用

原型Alert.prototype.close=function(e){}
jQuery事件绑定:jQuery使用on和off来绑定和禁用时间,但bootstrap中稍有变化

$('td').on('click', function(event){});//原有格式$('document').on('click.bjock', 'td', function(event){});//这儿增加了参数'td',而且选择器变成了document,//好处是在document上绑定了一个单击事件,利用冒泡机制,在单机的时候检查是否为td元素,如果是才处理//而把td作为选择器,一个页面有多少td都会被绑定,性能下降,这三个参数的名字呗称为享元模式(回顾一下)。

事件命名空间:可以看到上例中的事件click.bjorkbjork被称命名空间,当需要触发自己的时间时,命名空间就变得很有用,比如$('#first').trigger('click.bjork');,这是触发自己定义的事件,而不影响他人,这在前端复杂化的今天变得非常重要。
$.data():在很多js插件中都是用$(selector).data()方法,意思是收集指定元素上所有以data-开头的自定义属性,并合并成一个对象字面量。比如<div id='aaa' data-role='bbb' data-toggle='ccc'></div>,那么$(#'aaa').data();的值为:var value={role:'bbb', toggle:'ccc'};,当然也可以选定指定值$(#'aaa').data('role');,结果就是'aaa'
Tip:
BootStrap包含aria-xxx开头的属性,被称为辅助属性,用于支持有阅读障碍的人士。

整体结构

首先介绍一下栅格系统的工作原理

  • 一行数据必须包含在一个.container中,一遍为其赋予合适的对齐方式和内边距padding。

  • 使用行在水平方向上创建一组列

  • 具体内容放在列中,只有列可以作为行的直接子元素

接下来看一下.container样式的源码,可以看出其核心就是.container@media的设置

.container {    padding-right: 15px;    padding-left: 15px;    margin-left: auto;    margin-right: auto;
}
@media ( min-width :768px) {    .container {        width: 750px;
    }
}

栅系统的用法,其实就是列的组合,主要涉及4个特性:列组合、列偏移、列嵌套、列排序,首先介绍列组合的例子。

<div class="container">
    <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-11">.col-md-11</div>
    </div>
</div>

实际上列组合的实现非常简单,只涉及2个CSS特性,左浮动和宽度百分比,例如

.col-md-1, ..., col-md-12{float:left;}.col-md-12{width:100%;}.col-md-1{width:8.33%;}

列偏移的例子,其原理就是margin-left的使用,有多少个1/12的margin-left,就有多少offset。

    <div class="row">
        <div class="col-md-4">.col-md-1</div>
        <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
    </div>

同样,栅格系统支持嵌套,即在列中再声明多个行,内部嵌套的row宽度为100%时,就是当前外部列的宽度。突然有个思路,就是最外围的.container是根据@media设置像素的,其中的内容均是使用的相对大小。

    <div class="row">
        <div class="col-md-8">
            <div class='row'>
            <div class="col-md-6">
            <div class="col-md-6">
            </div>
        </div>
    </div>

列排序其实就该改变列的方向,也就是改变左右浮动,并设置浮动的距离,其通过.col-md-push-*.col-md-pull-*实现。系统为了方便,统一在左浮动的基础上,通过设置left和right的值来实现定位显示。

.col-md-pull-6{right:50%;}.col-md-push-6{left:50%;}

响应式栅格:针对不同的设配使用不同的样式前缀,比如中型的.col-md-xx,大型的.col-lg-xx,有意思的是,我们可以跨设备的设置样式,例如示例既支持md中型的设备也支持sm小型的设备。

    <div class="col-sm-12 col-md-8">.col-sm-12 .col-md-8</div>

清除浮动问题:理想很丰满,现实很骨感,有时会出现不同设备显示时出现意外,比如因为高度的原因造成错位,这时需要使用

    <div class="clearfix visible-xs"></div>

CSS布局

在BootStrap中,布局部分主要包括基础排版Typography、代码Code、表格Table、表单Forms、按钮Buttons、图片Images等内容。

  • 基础排版:在type.less文件中设置,包括标题h1;页面主题<body>;强调文本<small><em>,<cite>;对齐方式,<p class-"text-left/right/center/justify">等4种;缩略语<abbr title="xionger">HTML</abbr>,有点意思;地址元素<address>Shanghai</address>;引用<blockquote><p>帅的1B</p></blockquote>;列表,增加了去点列表<ul class="list-unstyled"></ul>,内联列表class='list-inline',定义列表<dl><dt></dt><dd></dd></dl>,水平定义列表class="dl-horizontal"

  • 代码:在code.less文件中设置,<code>显示单行内联代码;<kbd>显示用户输入代码;<pre>元素新生多行代码块。

  • 表格:在table.less文件设置,基础样式<table class="table">;带背景条纹的表格class='table table-striped';带边框的表格class='table table-bordered;带鼠标悬停高亮的class='table table-hover';紧凑型的class='table table-condensed';行级元素样式,即<tr>样式,包括.active,.warning,.success,.danger,.info;响应式表格class='table table-responsive

  • 表单:在form.less文件中设置,比较简单,基础的如<div class='form-group'><input class='form-control' placeholder='请输入Emal'>,class='checkbox';内联表单<form class='form-inline'>;横向表单<form class='form-horizontal'>;横向的表单内元素,如<label class='checkbox-inline'><input ...></label>;控件状态,通过属性focus,disabled;验证状态,class='form-group has-warning/error/success';控件大小,class='input-lg/sm';帮助,<span class='help-block'>

  • 按钮:在button.less文件配置,样式有btn btn-default,btn btn-primary,btn btn-success,btn btn-info,btn btn-warning,btn btn-danger,btn btn-link链接样式;大小btn-lg/sm/xs;活动/禁用状态,active/disabled

  • 图像:在scaffolding.less中配置,包括img-rounded,img-circle,img-thumbnail

  • 辅助样式:文本样式,柔和灰text-muted,主要蓝text-primary,成功绿text-success,信息栏text-info,警告黄text-warning,危险红text-danger;辅助图标,关闭class="close",向下箭头class="caret";内容浮动,pull-right/left,清除浮动clearfix;隐藏显示show/invisible/hidden

Tip:这样大体能够理解less等意思了,就是动态的CSS语言,编译后就是.css文件,其不仅仅是给bootstrap用的,任何的css框架均可使用。此外就是,如果说我们自己写样式是做填空题的话,bootstrap其实就是让我们变成做选择题,帅,boss的感觉有木有。

常用组件

在bootstrap中,CSS组件都是通过AO模式进行架构的:Append附加;Override重写。CSS组件包括8种基本类型,应用中对其进行组合即可。

Bootstrap常用的布局组件的应用,均可在该知道网页找到,runboot.com,需要时copy-paste即可,其中还有一个菜鸟工具(最下方,叫做客户化布局),非常方便,常见组件结构如下图所示。

Tip:这部分的目标就是需要什么组件,能查得到即可,对于分页等复杂需求,还需要选择合适的bootstrap插件进行增强。

常用js插件

在之前CSS的基础上,BootStrap自带12种jQuery插件,其利用bootstrap数据API,大部分插件可以在不编写任何代码的情况下触发。
在bootstrap中,js插件遵循以下3个规则。

  • Html布局规则:基于元素自定义属性的布局规则,比如使用类似于data-target的自定义属性

  • javascript实现步骤:所有插件都遵循jQuery插件开发的标准步骤,所有的事件保持统一IDE标准

  • 插件调用方法:所有插件的使用,都可以是HTML声明式,也可以是js调用式,且支持多种回调和可选参数。

具体示例如下所示,只需在button上添加data-dismiss='alert'属性,即可在单机该button时关闭警告框。

<div class="alert">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>警告!</strong></div>

BootStrap中的js都遵循同样的步骤来实现js插件,如下所示

  1. 声明立即调用函数,如+function($){"use strict";}(jQuery);

  2. 定义插件类及相关原型方法,如Alert.prototype.close

  3. 在jQuery上定义插件并重设插件构造函数,如$.fn.alert.Constructor=Alert

  4. 防冲突处理,如$.fn.alert.noConflict

  5. 绑定各种触发事件(data-api)

常见的js插件如下图所示

通用技术

  • 禁用插件默认行为: $(document).off('.alert.data-api')

  • 可编程性: $('.btn.btn-danger').button('toggle').addClass('fat');$('#myModel').modal({keyboard: false});

  • 自定义事件: $('#myModel').on('show.bs.modal', function(e){if(!data) return e.preventDefault();})

Tip: 此外还可以禁止响应式布局,即删除名为viewportmeta元素,并未.container设置一个默认值。

补充知识

在实际应用汇总,bootstrap提供的组件基本满足了一般项目的需求,但比如分页控件的支持就显得比较弱,这时需要选用网上现有的插件,也可以自己编写相关扩展。这部分最重要的是思路,在自定义样式时,为了避免覆盖BootStrap默认的样式或行为,建议通过附加样式的形式来实现

.pagination.square > li > a {
    margin 0 5px;
}
<ul class='pagination square'></ul>

第三方扩展

  • Font Awesome:是一款强大的icon图标集,可以进行矢量缩放,支持任意CSS对大小、颜色、阴影的操作。使用非常简单,只需下载组件包并引用即可,Font Awesomeicon-与bootstrapglyphicon-完全兼容。

    <link rel='stylesheet' href='/css/font-awesome.min.css'>//常规用法<p><i class='icon-camera-retro icon-2x'>放大两倍</i></p>
  • Buttons组件:依赖Font Awesome,其提供非常强大的按钮功能

  • DateTime Picker:非常强大的日期插件,功能和jQuery版的类似,但其风格和bootstrap更统一。

  • 其他:Cikonss响应式icon;Flat UI扁平化风格;Metrao UI CSS,Win8效果;Messager弹框组件等。








      本文转自zsdnr  51CTO博客,原文链接:http://blog.51cto.com/12942149/1929344,如需转载请自行联系原作者





版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
20357 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
29753 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
22806 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
16920 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
21003 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23615 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
14917 0
21114
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载