前端框架之bootstrap

时间 2019-11-20

原文原文链接

1、bootstrap按钮

一、按钮

<button class="btn btn-default">按钮</button>
<button class="btn btn-primary">button按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-warning">按钮</button>
<button class="btn btn-danger">按钮</button>
<a class="btn btn-danger" href="#">a标签按钮</a>

二、按钮组

<div class="btn-group">
    <button class="btn btn-default">button按钮</button>
    <button class="btn btn-primary">button按钮</button>
    <button class="btn btn-info">button按钮</button>
    <button class="btn btn-success">button按钮</button>
    <button class="btn btn-warning">button按钮</button>
    <button class="btn btn-danger">button按钮</button>
</div>

三、通栏按钮

<button class="btn btn-success btn-block">通栏按钮</button>javascript

四、通栏按钮组

a、通栏按钮组，若是用input标签或者button标签，须要将它用btn-group的容器包起来。css

b、若是用a标签作按钮，就不用上面的结果，直接写html

2、 bootstrap表单

一、表单

<form class="form">
    <div class="form-group">
        <label for="username">用户名：</label>
        <input type="text" id="username" class="form-control">
    </div>
    <div class="form-group">
        <label for="password">密码：</label>
        <input type="password" id="password" class="form-control">
    </div>
</form>

二、内联表单

为 <form> 元素添加 .form-inline 类可以使其内容左对齐而且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。前端

可能须要手动设置宽度、必定要添加 `label` 标签（若是不想让其显示，能够经过为 `label` 设置 `.sr-only` 类将其隐藏。）

三、水平排列的表单

经过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，能够将 label 标签和控件组水平并排布局。这样作将改变 .form-group 的行为，使其表现为栅格系统中的行（row），所以就无需再额外添加 .row 了。java

四、表单控件组

3、bootstrap图片

一、响应式图片：img-responsive

经过给图片添加.img-responsive类可让图片支持响应式布局。其实质上是为图片设置了max-width:100%;和height:auto;属性，从而让图片在其父元素中更好的缩放。

二、图片形状

经过为<img>元素添加如下相应的类，可让图片呈现不一样的形状跨浏览器兼容性请时刻牢记：IE8不支持CSS3中的圆角属性。node

4、bootstrap字体图标

经过字体代替图标，font文件夹须要和css文件夹在同一目录linux

<button class="btn btn-danger"><span class="glyphicon glyphicon-music"></span>音乐</button>

5、bootstrap导航条

一、声明导航条：navbar git

二、声明默认的导航条：navbar-default github

三、声明反白的的导航条样式 navbar-inverseweb

四、去掉导航条的圆角： navbar-static-top

五、固定到顶部的导航条：navbar-fixed-top

六、固定到底部的导航条：navbar-fixed-bottom

七、申明logo容器：navbar-header

八、针对logo等固定内容的样式：navbar-brand

九、定义导航条中的菜单：nav navbar-nav

十、定义导航条中的表单：navbar-form

<div class="navbar navbar-default navbar-inverse navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <div class="navbar-toggle" data-toggle="collapse" data-target="#togglemenu">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </div>
            <a href="" class="navbar-brand">
                LOGO
            </a>
        </div>
        <div class="collapse navbar-collapse" id="togglemenu">
            <ul class="nav navbar-nav">
                <li><a href="javascript:void(0);">首页</a></li>
                <li><a href="javascript:void(0);">公司新闻</a></li>
                <li><a href="javascript:void(0);">行业动态</a></li>
                <li><a href="javascript:void(0);">招贤纳才</a></li>
                <li><a href="javascript:void(0);">关于咱们</a></li>
            </ul>
            <form class="navbar-form navbar-right">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <span class="input-group-btn">
                            <button class="btn btn-default">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                        </span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

路径导航

<ol class="breadcrumb">
    <li><a href="#">首页</a></li>
    <li><a href="#">新闻动态</a></li>
    <li class="active">新闻详情</li>
</ol>

巨幕（相似于banner图）jumbotron

6、bootstrap模态框

一、声明一个模态框：modal

二、定义模态块的尺寸：modal-dialog

三、定义大尺寸的模态框：modal-lg

四、定义小尺寸的模态框：modal-sm

五、modal-header

六、modal-body

七、modal-footer

<button id="btn1" class="btn btn-danger" data-toggle="modal" data-target="#modal1">大模态框</button>

<div class="modal" id="modal1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                提示
            </div>
            <div class="modal-body">
                <p>姓名不能为空</p>
            </div>
            <div class="modal-footer">
                <button class="btn">肯定</button>
                <button class="btn btn-warning " data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

7、bootstrap下拉菜单

用于显示连接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具备了交互性。

<div class="dropdown">
    <div class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        请选择城市
        <span class="caret"></span>
    </div>
    <ul class="dropdown-menu">
        <li><a href="javascript:void(0);">北京</a></li>
        <li><a href="javascript:void(0);">上海</a></li>
        <li><a href="javascript:void(0);">杭州</a></li>
    </ul>
</div>

8、bootstrap隐藏类

一、hidden-xs

二、hidden-sm

三、hidden-md

四、hidden-lg

详细内容请见官网文档：http://v3.bootcss.com/

Bootstrap 使用 Grunt 做为编译系统，而且对外提供了一些方便的方法用于编译整个框架。下面讲解的就是如何编译源码、运行测试用例等内容。

一、安装 Grunt

安装 Grunt 前，你须要首先下载并安装 node.js （npm 已经包含在内）。npm 是 node packaged modules 的简称，它的做用是基于 node.js 管理扩展包之间的依赖关系。

而后在命令行中输入如下命令：

在全局环境中安装 grunt-cli ：npm install -g grunt-cli 。
进入 /bootstrap/ 根目录，而后执行 npm install 命令。npm 将读取 package.json 文件并自动安装此文件中列出的全部被依赖的扩展包。

上述步骤完成后，你就能够运行 Bootstrap 所提供的各个 Grunt 命令了。

二、可用的 Grunt 命令

`grunt dist` （仅编译 CSS 和 JavaScript 文件）

从新生成 /dist/ 目录，并将编译压缩后的 CSS 和 JavaScript 文件放入这个目录中。做为一名 Bootstrap 用户，大部分状况下你只须要执行这一个命令。

`grunt watch` （监测文件的改变，并运行指定的 Grunt 任务）

监测 Less 源码文件的改变，并自动从新将其编译为 CSS 文件。

`grunt test` （运行测试用例）

在 PhantomJS 环境中运行 JSHint 和 QUnit 自动化测试用例。

`grunt docs` （编译并测试文档中的资源文件）

编译并测试 CSS、JavaScript 和其余资源文件。在本地环境下经过 bundle exec jekyll serve 运行 Bootstrap 文档时须要用到这些资源文件。

`grunt` （从新构建全部内容并运行测试用例）

编译并压缩 CSS 和 JavaScript 文件、构建文档站点、对文档作 HTML5 校验、从新生成定制工具所需的资源文件等，都须要 Jekyll 工具。这些只有在你对 Bootstrap 深度研究时才有用。

三、除错

若是你在安装依赖包或者运行 Grunt 命令时遇到了问题，请首先删除 npm 自动生成的 /node_modules/ 目录，而后，再次运行 npm install 命令。

10、了解less（中文网：http://lesscss.cn/）

一、一种动态样式语言.

LESS 将 CSS 赋予了动态语言的特性，如变量，继承，运算，函数. LESS 既能够在客户端上运行 (支持IE 6+, Webkit, Firefox)，也能够借助Node.js或者Rhino在服务端运行。

二、在客户端使用

引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”:

　　<link rel="stylesheet/less" type="text/css" href="styles.less">

而后点击页面顶部download按钮下载 less.js, 在<head> 中引入:

　　<script src="less.js" type="text/javascript"></script>

注意你的less样式文件必定要在引入less.js前先引入。

备注：请在服务器环境下使用！本地直接打开可能会报错！

三、变量

变量容许咱们单独定义一系列通用的样式，而后在须要的时候去调用。因此在作全局样式调整的时候咱们可能只须要修改几行代码就能够了。

四、混合

混合能够将一个定义好的class A轻松的引入到另外一个class B中，从而简单实现class B继承class A中的全部属性。咱们还能够带参数地调用，就像使用函数同样。

五、嵌套规则

咱们能够在一个选择器中嵌套另外一个选择器来实现继承，这样很大程度减小了代码量，而且代码看起来更加的清晰。

六、函数 & 运算

运算提供了加，减，乘，除操做；咱们能够作属性值和颜色的运算，这样就能够实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，若是你愿意的话能够操做属性值。

11、了解sass（中文网：https://www.sass.hk/）

一、安装Sass和Compass

sass基于Ruby语言开发而成，所以安装sass前须要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）

window下安装SASS首先须要安装Ruby，先从官网下载Ruby并安装。安装过程当中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。以下图：

安装完成后需测试安装有没有成功,运行CMD输入如下命令：

ruby -v //如安装成功会打印 ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]

如上已经安装成功。但由于国内网络的问题致使gem源间歇性中断所以咱们须要更换gem源。（使用淘宝的gem源https://ruby.taobao.org/）以下：

//1.删除原gem源 gem sources --remove https://rubygems.org/ //2.添加国内淘宝源 gem sources -a https://ruby.taobao.org/ //3.打印是否替换成功 gem sources -l //4.更换成功后打印以下 *** CURRENT SOURCES *** https://ruby.taobao.org/

Ruby自带一个叫作RubyGems的系统，用来安装基于Ruby的软件。咱们可使用这个系统来轻松地安装Sass和Compass。要安装最新版本的Sass和Compass，你须要输入下面的命令：

//安装以下(如mac安装遇到权限问题需加 sudo gem install sass) gem install sass gem install compass

在每个安装过程当中，你都会看到以下输出：

Fetching: sass-3.x.x.gem (100%) Successfully installed sass-3.x.x Parsing documentation for sass-3.x.x Installing ri documentation for sass-3.x.x Done installing documentation for sass after 6 secon 1 gem installed

安装完成以后，你应该经过运行下面的命令来确认应用已经正确地安装到了电脑中：

sass -v Sass 3.x.x (Selective Steve) compass -v Compass 1.x.x (Polaris) Copyright (c) 2008-2015 Chris Eppstein Released under the MIT License. Compass is charityware. Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

以下sass经常使用更新、查看版本、sass命令帮助等命令：

//更新sass gem update sass //查看sass版本 sass -v //查看sass帮助 sass -h

二、编译sass

sass编译有不少种方式，如命令行编译模式、sublime插件SASS-Build、编译软件koala、前端自动化软件codekit、Grunt打造前端自动化工做流grunt-sass、Gulp打造前端自动化工做流gulp-ruby-sass等。

软件方式编译;

这里推荐koala&codekit,它们是优秀的编译器，界面清晰简洁，操做起来也很是简单。鉴于koala是免费编译器，简单操做以下图:

LESS/Sass 编译工具Koala介绍

易上手的Sass编译工具koala支持多个环境的安装文件下载Koala

koala是一个国产免费前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。