2019-12-17 09:07:06 amh13853151336 阅读数 5

记录几个bootStrap的常用功能

1.Breadcrumb

<ul class="breadcrumb">
    <li><a href="#">Dashboard</a></li>
    <li>UI Elements</li>
    <li class="active">Date Tables</li>
</ul>

样式:
在这里插入图片描述

2.Popover

<div class="panel-body">
   <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." id="popover-left">
      Popover on left
   </button>

   <button type="button" class="btn btn-default"  data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." id="popover-top">
      Popover on top
   </button>

   <button type="button" class="btn btn-default" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." id="popover-bottom">
      Popover on bottom
   </button>

   <button type="button" class="btn btn-default"  data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." id="popover-right">
       Popover on right
   </button>
</div>

样式:在这里插入图片描述

3.tooltip

<div class="panel-body">
    <button type="button" class="btn btn-default" id="tooltip-left" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

    <button type="button" class="btn btn-default" id="tooltip-top" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

    <button type="button" class="btn btn-default" id="tooltip-bottom" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

    <button type="button" class="btn btn-default" id="tooltip-right" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
</div>

样式:在这里插入图片描述

Bootstrap
2018-03-15 21:27:08 DedoChen 阅读数 183

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。


Bootstrap 基本结构
Bootstrap CSS
Bootstrap 布局组件 
Bootstrap 插件几个部分


1.What is Bootstrap?


Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的


Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品


移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持:所有的主流浏览器都支持 Bootstrap。
Internet Explorer/Firefox/Opera/Google Chrome/Safari


容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。
响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
响应式设计
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件,易于定制。
它还提供了基于 Web 的定制。
它是开源的。


Bootstrap 包的内容


基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。


CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。


组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。


JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。


定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本


2.Bootstrap CSS 概览
HTML 5 文档类型(Doctype)


Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype)




3.Bootstrap 网格系统


本章节我们将讲解 Bootstrap 的网格系统(Grid System)


什么是网格(Grid)?
摘自维基百科:


    在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的、水平的)组成的结构(通常是二维的)。
它广泛应用于打印设计中的设计布局和内容结构。
在网页设计中,它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。


网格直线(垂直的、水平的)组成的二维结构;
网格用于布局数据列;   


什么是 Bootstrap 网格系统(Grid System)?
Bootstrap 官方文档中有关网格系统的描述:


    Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。


4.Bootstrap 排版


Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。 -字体类型
使用 Bootstrap 的排版特性,您可以创建标题、段落、列表及其他内联元素


缩写


HTML元素提供了用于缩写的标记,比如 WWW 或 HTTP。Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框,当鼠标悬停在上面时会显示完整的文本(只要您为 <abbr> title 属性添加了文本)。为了得到一个更小字体的文本,请添加 .initialism 到 <abbr>


5.Bootstrap 表格


6.表单


向父 <form> 元素添加 role="form"。
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control


<div class="form-group">
<label for>
</div>


7.按钮


按钮标签


您可以在 <a>、<button> 或 <input> 元素上使用按钮 class。但是建议您在 <button> 元素上使用按钮 class,避免跨浏览器的不一致性问题


8.图片-.class
.img-rounded 为图片添加圆角 IE9以上
.img-circle 将图片变为圆形 IE9以上
.img-thumbnail 缩略图功能 尝试一下
.img-responsive 图片响应式 (将很好地扩展到父元素)


9.字体图标
什么是字体图标?


字体图标是在 Web 项目中使用的图标字体。虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。
为了表示对图标作者的感谢,希望您在使用时加上 GLYPHICONS 网站的链接


10.下拉菜单


11.按钮组


12.按钮下拉菜单


13.导航元素
胶囊式的导航菜单
垂直的胶囊式导航菜单
两端对齐的导航
禁用链接


13.导航栏
组合式


14.分页


页脚排序
翻页动作


15.警告


16.进度条


17.Bootstrap 多媒体对象(Media Object)


Bootstrap 中的多媒体对象(Media Object)。这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排

 

18.插件

 

 

--参考文档

https://www.w3cschool.cn/

 

DedoChen

仰望星空

砥砺前行

如需转载,请注明出处,谢谢!

 

2018-11-29 15:03:13 m0_37686205 阅读数 261

bootstrap文档下载:

bootstrap是前端一个很重要的响应式的UI框架,主要包括三部分,分别是css, 组件, javascript组件,定制等。在学习bootstrap的过程中,一份比较完善,详细的文档是很重要的。bootstrap有几个不同的版本,平时我们参考的主要是v3.3.2版本,这里我们推荐的是bootstrap的v3.3.2版本的中文文档,具体下载网址为:bootstrap中文文档下载地址,提货码为:llof 。

bootstrap使用的必备资源:

在使用bootstrap时,我们需要有一套标准的模板,可以兼容各个不同版本的浏览器,所以在使用之前需要准备一下基础的资源文件,一般的我们存放在新建的静态资源文件夹lib中,这里也提供全套的资源文件,包括bootstrap, html5shiv, jquery,normalize和response等,下载地址为:bootstrap使用必备静态资源, 提货码为:xsat。

使用bootstrap基本模板:

下面就是使用基本模板,主要是一些固定代码,一些文件的加载位置见下说明,如下所见:

<!DOCTYPE html>
<!--文档语言申明  简体中文-->
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <!--要求当前网页使用浏览器最高版本的内核来渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--移动端:流式布局的视口适配-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shiv 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
    <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<!--中间为页面内容设计-->

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="../lib/jquery/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../lib/bootstrap/js/bootstrap.js"></script>
</body>
</html>

 

 

2019-01-07 18:09:09 u013045370 阅读数 412

一,data-toggle和data-target的使用

 

data-toggle和data-target配合使用,表示,data-target指定部分以data-toggle的方式存在

比如汉堡包模型点击出来后是几个li

首先写nav栏,定义一个button和一个a标签,放在class为navbar-header的div里面。

<div class="navbar-header">

<button>...</button>

<a>..</a>

</div>

其中a标签是“菜鸟教程”的点击,可以返回首页等链接操作。

button里面定义了class为navbar-toogle,设置了data-toggle和data-target,因为要做汉堡包,设置了三个icon-bar的span

<div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target="#example-navbar-collapse">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">菜鸟教程</a>
</div>

这里制定了data-target是一个id为example-navbar-collapse的内容,用collapse形式存在。

也就是,我们要定义,展开出来是什么东西,因此下面是这部分具体内容:

<div class="collapse navbar-collapse" id="example-navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
    </div>

其中第三个还有下拉菜单,相应的li的class设置为dropdown

其中包含了很多其他组件,比如dropdown对应的dropdown-menu,分离的链接divider,这里不展开。

完整实例:

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target="#example-navbar-collapse">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">菜鸟教程</a>
    </div>
    <div class="collapse navbar-collapse" id="example-navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

 

二,动画进度条

创建一个条纹动画的进度条的步骤如下:

  • 添加一个带有 class .progress 和 .progress-striped 的 <div>。同时添加 class .active(动态)
  • 接着,在上面的 <div> 内,添加一个带有 class .progress-bar 的空的 <div>。
  • 添加一个带有百分比表示的宽度的 style 属性,例如 style="40%"; 表示进度条在 40% 的位置。
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 40%;">
        <span class="sr-only">40% 完成</span>
    </div>
</div>

三,Bootstrap 数据 API(Bootstrap Data API)

1,Bootstrap模态框(Model)插件

模态框,覆盖在父窗体上的子窗体

引用方式:

(1)引用单独功能,引用modal.js

(2)引用bootstap.js 或者 bootstrap.min.js

使用方法:

(1)在按钮或者链接上设置属性: data-toggle="modal"

(2)同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框(带有 id="identifier")

(3)采用一行js代码如下,完成动画弹框操作:

$('#identifier').modal(options)
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	开始演示模态框
</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					模态框(Modal)标题
				</h4>
			</div>
			<div class="modal-body">
				在这里添加一些文本
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary">
					提交更改
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>

http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

模态框用到的事件,可在函数中国呢当钩子使用:

1.show.bs.modal,在调用show后触发:

$('#identifier').on('show.bs.modal', function () {
  // 执行一些动作...
})

2.shown.bs.modal,当css过渡效果完成,用户可见时触发:

$('#identifier').on('shown.bs.modal', function () {
  // 执行一些动作...
})

3.hide.bs.modal,调用hide时触发:

$('#identifier').on('hide.bs.modal', function () {
  // 执行一些动作...
})

4.hidden.bs.modal,完成隐藏时触发:

$('#identifier').on('hidden.bs.modal', function () {
  // 执行一些动作...
})

 

 

2017-01-14 13:40:44 Silent_Paladin 阅读数 1846

1 HTML

(1) 语法

  • 缩进使用两个空格代替 Tab

  • 嵌套元素缩进一次

  • 属性定义全部使用双引号,避免单引号

  • 不需要在自闭和元素的尾部添加斜杠(/),如 <input type="password">

  • 不能省略可选的结束标签,如 </li></body>

(2) HTML5 DOCTYPE

在每个 HTML 页面第一行添加标准模式(Standard Mode)声明,确保在每个浏览器中表现一致

<!DOCTYPE html>

(3) IE 兼容模式

IE 支持根据特定的 <meta> 标签确定绘制当前页面所应采用的 IE 版本,建议设置如下

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

(4) 字符编码

明确声明字符编码,确保浏览器能够快速定位页面内容的渲染方式,建议采用 UTF-8 编码

<head>
  <meta charset="UTF-8">
</head>

(5) 引入 CSS 文件

根据 HTML5 规范,引入 CSS 文件时不需要指定 type 属性,默认值是 text/css,如

<link rel="stylesheet" href="xxx.css">

(6) 引入 JavaScript 文件

根据 HTML5 规范,引入 JavaScript 文件时不需要指定 type 属性,默认值是 text/javascript,如

<script src="xxx.js"></script>

(7) 属性顺序

HTML 属性建议按照以下顺序依次排列

  • class

  • id, name

  • data-*

  • src, for, type, href

  • title, alt

  • aria-*, role

注意:

  • class 用于标识可复用组件,应该放在首位

  • id 用于标识某一具体组件,应该放在次位

(8) boolean 类型属性

根据 HTML5 规范,boolean 类型属性在声明时不需要赋值,如

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>

(9) 尽量减少嵌套的标签数量

(10) 尽量避免通过 JavaScript 动态生成标签,这样做不利于查找、编辑且影响性能

2 CSS

(1) 语法

  • 缩进使用两个空格代替 Tab

  • 将单独的选择器单独放在一行

  • 在每个声明块的左花括号前添加一个空格

  • 声明块的右花括号单独成行

  • 每条声明语句的 : 后插入一个空格

  • 每条声明独占一行

  • 所有声明语句以分号结尾

  • 对于以逗号分隔的属性值,每个逗号后面插入一个空格 margin: 0 0 15px 0;

  • 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值(既加逗号也加空格)中区分多个颜色值(只加逗号,不加空格),如 background-color: rgba(0,0,0,.5);

  • 对于属性值或颜色参数,省略小于 1 的小数前面的 0,如 background-color: rgba(0,0,0,.5);

  • 十六进制值应该全部小写,如使用 #fff 替代 #FFF

  • 尽量使用简写形式的十六进制值,如使用 #fff 替代 #ffffff

  • 为选择器中的属性添加双引号,如使用 input[type="text"] 替代 input[type=text]

  • 避免为 0 值指定单位,如使用 margin: 0; 替代 margin: 0px;

(2) 声明顺序

/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;

/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;

/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;

/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;

/* Misc */
opacity: 1;

(3) 避免使用 @import

<link> 标签相比,@import 指令慢很多

<!-- Use link elements -->
<link rel="stylesheet" href="core.css">

<!-- Avoid @imports -->
<style>
  @import url("more.css");
</style>

解决方案:

  • 使用多个 <link> 元素

  • 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件

  • 通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能

(4) class 命名

  • class 名称中只能出现小写字符和破折号(-_

  • class 名称应当尽可能短,并且意义明确

  • 避免过度简写

  • 基于最近的父 class 或基本(base) class 作为新 class 的前缀

(5) 选择器

  • 对于通用元素使用 class ,这样利于渲染性能的优化
  • 对于经常出现的组件,避免使用属性选择器
  • 选择器要尽可能短,并且尽量限制组成选择器的元素个数,建议不要超过 3

(6) 设置文件编码为 UTF-8

(7) 在文件结尾添加一个空白行

bootstrap框架

阅读数 586

Bootstrap插件

阅读数 5889

没有更多推荐了,返回首页