bootstrap
什么是 bootstrap?
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。(跨平台能力优秀)
学习bootstrap的关键的查看其API文档
bootstrap 包的内容
基本结构: Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
CSS: Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
组件: Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件 部分详细讲解。
JavaScript 插件: Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
定制: 您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
bootstrap的安装
CSS
这里.map是映射文件,不需要。.min是压缩后的文件(可读性差)建议在生成环境中使用。除了这两个以外都是未压缩的文件(可读性好)可以在学习环节使用。
js
Bootstrap的js是依赖jQuery的所以切记一定要导入jQuery。(npm.js)不用
在项目中导入js文件时一定要先导入jQuery再导入Bootstrap,顺序不能颠倒!
fonts
全部导入即可
boostrap使用的注意点
1、必须先引入bootstrap的支持,包括js、css、fonts文件
2、引入的文件必须先有jQuery的核心文件,再引入bootstrap的js文件,再引入自己的文件
3、CSS文件必须先引入bootstrap的CSS文件再引入自己的文件
4、font文件无需在页面上引入,但是需要在项目的目录中存在
boostrapCSS具体使用(只演示部分其余的看文档)
按钮
既定样式表
使用:
给标签定义一个class即可,class的值需要与对应样式的类名匹配。
注意除了基本样式.btn外的所以样式都以它为基础,所以应当采用多类名来引用其它样式:
表格
既定样式表
使用:
这里table类名会作为基础样式
它提供了一种响应式表格,可以在显式区域大小变化时改变样式:
通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。
图片
既定样式表
使用:
自定义boostrapCSS
只需在自己的CSS文件中 (内部样式和外部样式都行,注意外部样式的引用语句写在boostrap引用语句的后面) 写要改变的样式即可,注意类名的匹配。
网格(栅格)系统
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
这个系统是用来进行页面布局的。
Bootstrap 网格系统(Grid System)的工作原理
行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。
使用行来创建列的水平组。
内容应该放置在列内,且唯有列可以是行的直接子元素。
预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距(margin)取负,表示第一列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。
例如,要创建三个相等的列,则使用三个 .col-xs-4。
基本的网格结构
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....
注意:如果采用了container样式那么其宽度不一定是充满整个可视区域的
上半部分是采用了container样式的,下半部分是没有采用container样式的。
表单
表单布局
垂直表单(默认)
内联表单
水平表单
垂直或基本表单
向父 <form>
元素添加 role=“form”。
把标签和控件放在一个带有 class .form-group 的 <div>
中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select>
添加 class .form-control。
内联表单
如果需要创建一个表单,它的所有元素是内联的,向左对齐的,标签是并排的,请向 <form>
标签添加 class .form-inline。
水平表单
向父 <form>
元素添加 class .form-horizontal。
把标签和控件放在一个带有 class .form-group 的 <div>
中。
向标签添加 class .control-label。
可以使用网格系统来影响表单的布局
辅助类
更进一步的美化效果
boostrap布局组件具体使用(只演示部分其余的看文档)
导航栏
创建一个默认的导航栏的步骤如下:
向 <nav>
标签添加 class .navbar、.navbar-default。
向上面的元素添加 role=“navigation”,有助于增加可访问性。
向 <div>
元素添加一个标题 class .navbar-header,内部包含了带有 class navbar-brand 的 <a>
元素。这会让文本看起来更大一号。
为了向导航栏添加链接,只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。
警告框
您可以为警告框添加一个可选的关闭按钮。为了创建一个内联的可取消的警告框,请使用 警告(Alerts) jQuery 插件。
您可以通过创建一个 <div>
,并向其添加一个 .alert class 和四个上下文 class(即 .alert-success、.alert-info、.alert-warning、.alert-danger)之一,来添加一个基本的警告框。
进度条
Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性,Opera 12 不支持动画。
创建一个基本的进度条的步骤如下:
添加一个带有 class .progress 的 <div>
。
接着,在上面的 <div>
内,添加一个带有 class .progress-bar 的空的 <div>
。
添加一个带有百分比表示的宽度的 style 属性,例如 style=“60%”; 表示进度条在 60% 的位置。
分页
字体图标
如需使用图标,只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。
boostrap插件具体使用(只演示部分其余的看文档)
轮播
可以通过自定义函数来修改轮播时间间隔:
模态对话框
一种在当前页面展示的子对话框,可以在其中添加表单等内容。