浅析bootstr

最新推荐文章于 2023-05-08 17:53:24 发布

趣味相投

最新推荐文章于 2023-05-08 17:53:24 发布

阅读量644

点赞数 1

文章标签： bootstrap bootstrap插件

本文链接：https://blog.csdn.net/a1240713433/article/details/75007523

版权

这是第一次写博客，写完之后看了一下，我觉的写的比较渣，前面比较繁琐，后面我只将我的代码和效果截图上来了，没有过多的讲解，主要是我也不知道该怎么讲，不管怎么样希望大家能够包容、多多支持，提升也需要一个提升的过程，相信我会写的越来越好，欢迎大家来讨论和指正，一起加油！

个人对bootstrap的学习主要分为两个部分，一个是bootstrap组件的用法，一个是bootstrap插件的用法。

这里把bootstrap里面常见的单词列出来了，方便大家记忆，有几个单词的意识我是按照bootstrap的效果写的：Vertical 垂直的、Stacked 堆积、Pills 药片、Divider分割、Fluid 液体、Collapse 折叠、Brand 商标、Breadcrumb 面包屑、Pagination 页码、Previous 以前的、Badge 徽章、Label 标签、Thumbnail极小的东西（缩略图）、Danger 危险、Warning 警告、Info 信息、Primary 主要的、Default默认、Success 成功、Striped 有条纹的、Active 积极的、Media 媒体、Panel面板、Head 头、Body 主体、Footer 脚、Well 好、很好、Capitalize首字母大写、Dialog 回话、Backdrop 背景、Dropdown 下拉式、Caret 脱字号、Tooltip工具提示、Popover脆薄空心松饼（弹跳窗）、Complete 竞争、Caption 字幕、Indicators 指针

一、bootstrap布局组件

1、字体图标（glyphicon）

在使用字体图标的时候需要用到两个类，一个.glyphicon，这个在你设置任何字体图标时一般都会用到我就把它叫为基础类，一个.glyphicon-*，这个后面的*号表示的是根据你所使用的字体图标不同它的设置不同。例如：<spanclass="glyphicon glyphicon-user"></span>它所代表的字体图标是，<spanclass="glyphicon glyphicon-home"></span>它所代表的字体图标是，根据这两个例子你会发现最后导致字体图标改变的，是那个*号所代表的内容，它是语义化的例如user表示用户，home表示家，字体图标也会显示出相应的图标。（详细参考：http://www.runoob.com/bootstrap/bootstrap-glyphicons.html）

2、按钮组（btn-group）

按钮组，可以直接解释为几个按钮的组合，显然要将几个按钮组合在一起，就必须把它放在一个父标记里面，一般会把几个按钮放在div的盒子里面，再在盒子上设置class，创建按钮组有几个重要的class，他们分别是：.btn-group（按钮组，将按钮水平堆积）、.btn-toolbar（将按钮组再组合在一起）、.btn-group-lg,.btn-group-sm,.btn-group-xs（设置按钮组的大小，.btn-group-lg表示大的按钮组，.btn-group-sm表示较小的按钮组，.btn-group-xs表示小的按钮组，简而言从左往右设置按钮组会一个比一个小）、.btn-group-vertical（按钮组，将按钮垂直堆积）。（详细参考：http://www.runoob.com/bootstrap/bootstrap-button-groups.html）

3、输入组（input-group）

输入组，可以解释为输入框的组合，但它一般不会用于输入框与输入框的组合，一般会用于输入框与一些提示内容相组合，例如：<div class="input-group"><inputtype="text" class="form-control"><spanclass="input-group-addon">.00</span></div>，它的效果是。输入框和提示内容都放在一个div里面，div设置.input-group样式，.input设置.form-control样式，span设置.input-group-addon样式，这些标记设置这些属性都是基本的必不可少的，你如希望输入组变得好看一点还可以继续添加样式，它的宽度会以100%显示，这是你可以在它的外面再加一个div设置它的宽度，输入框可以和多种标记组合，可以自己去研究，同时也可以设置输入组的大小，input-group-lg,input-group-sm,input-group-xs。（详细参考：http://www.runoob.com/bootstrap/bootstrap-input-groups.html）

4、创建导航（nav）

创建导航，必须先创建导航条，然后再在导航条里面创建导航。首先创建导航条一般用nav标记，需要用到的class有.navbar.navbar-default两个,然后在导航里面创建导航，创建导航一般用ul标记，需要用到的class有.nav.navbar-nav,最后再ul里面插入li标记，在li标记里面插入a标记，一个简单的导航就完成了。导航也有很多的样式，也可以与其他的一些标记进行组合。（详细参考：http://www.runoob.com/bootstrap/bootstrap-navbar.html）

5、分页(pagination)

这个比较简单，它的样式跟导航标记差不多，一般都是用ul li a来创建分页，在ul可以添加如下class：.pagination（设置数字的翻页样式）例如：、.pager（可以设置左右翻页样式）例如：，.pagination-lg, .pagination-sm, .pagination-xs（设置分页样式的大小），在li中可以添加的class有：.disable（该页不能用，光标移到跳转到该页的选项时，会显示禁止）、.active（表示默认显示页面）

6、标记(label)

标记可用于计数、提示或页面上其他的标记显示,它的class有：.label（基本样式）、.label-info,.label-success,.label-warning,.label-primary,.label-default,.label-sanger（这些都是用来改变标记的外观颜色的）例如：<span class="label label-primary">主要标记</span>的效果，<span class="labellabel-success">成功标记</span>的效果。

7、徽章（badge）

Class有：.badge（基本样式）、.pull-right（右对齐），.pull-left（左对齐）例如：<ahref="#">徽章<spanclass="badge">徽章</span></a>的效果，

<a href="#">徽章<spanclass="badge pull-right">徽章</span></a>的效果。

8、超大页面（jumbotron）

它的class样式.jumbotron有一个默认的背景色，一般是用在盒子上的，然后再在盒子里面添加内容，里面内容的水平方向会有一个内边距，处置方向会有一个居中，可以在添加了.jumbotron的盒子外面再加一个盒子，添加.container样式，这样它就会居中对齐，比较好看

9、页面标题（page-header）

将.page-header样式放在盒子上，然后在盒子里面添加标题，它的四周添加了适当的间距

10、缩略图（thumbnail）

在img标记外面再添加一个标记，然后在这个标记中添加.thumbnail样式，这样图片外面就会显示一个边框的样式，它的边框宽度为100%，因此要设定它的宽度。

11、警告（alert）

警告框的class样式分为两类：.alert（基本样式），.alert-*（设置颜色），alert有四种颜色.alert-success、.alert-info、.alert-warning、.alert-danger，一般将这些样式设置在div上，然后再添加内容例如：<div class="alertalert-danger">危险</div>的效果同时也可以在盒子上面设置关闭按钮，还可以设置链接（详细参考：http://www.runoob.com/bootstrap/bootstrap-alerts.html）

12、进度条（progress-bar）

首先创建一个盒子添加.progress，然后在盒子里面再插入一个盒子，并且添加.progress-bar同时你要设置它width属性，单位用百分比，它也有颜色样式：progress-bar-info、progress-bar-success、progress-bar-warning、progress-bar-danger。这样一个简单的进度条就玩完成了例如：<divclass="progress"><div class="progress-barprogress-bar-info" style="width:80%;">40%</div></div> 的效果。这个进度条有很多样式，蛮不错的。（详细参考：http://www.runoob.com/bootstrap/bootstrap-progress-bars.html）。

13、媒体对象（media-object）

想了半天我也不知道这个有什么用，它的样式效果跟ul li 然后再在li里面插入ul li 的效果差不多，首先创建一个盒子添加.media样式，然后在里面创建一个a标记，插入.media-left样式，在a标记里面出入一张图片，在a的下面（不是a标记里面）添加div标记，添加.media-body样式，在插入内容就，这个简单的效果就实现了例如<div class="media">

<ahref="#" class="media-left">

<imgsrc="图片/动物11.jpg" class="media-object"width="100px" />

</a>

<divclass="media-body">

这是一些示例文本。这是一些示例文本。

<divclass="media">

<ahref="#" class="media-left"><img src="图片/动物13.jpg" width="100px" /></a>

<divclass="media-body">

这是一些示例文本。这是一些示例文本。

</div>

</div>的效果

14、列表组（list-group）

又是一个组件，只要是组件就离不开group，同样列表组件的的class有.list-group，同样是创建一个盒子（也可以是ul）添加.list-group样式，再在里面插入a（或者li标记）标记并且添加list-group-item样式，然后在插入内容就完成了例如<div class="list-group">

<ahref="#" class="list-group-item active">列表组</a>

<ahref="#" class="list-group-item">列表组</a>

</div>的效果

15、面板（panel）

创建一个div标记，添加.panel（基本样式）和.panel-danger、.panel-info、.panel-warning、.panel-success、.panel-default（面板外观样式，前面也介绍过就是设置它的颜色），我觉想这样在外面创建一个盒子，添加相应的样式，更像是创建一个环境，然后再在里面添加相应的样式效果，就这个面板而言div标记里面在插入div标记，里面的div可以设置面板头.panel-heading，面板主体.panel-body，面板脚.paner-footer，然后在加入内容就可以实现了例如<divclass="panel panel-success">

</div>的效果

同时也可以插入表格（详细参考：http://www.runoob.com/bootstrap/bootstrap-panels.html）。

到这里组件就已经介绍完毕了，但是还有很多东西这里也没能讲清楚（详细参考：http://www.runoob.com/bootstrap/bootstrap-tutorial.html）

二、插件

Bootstrap一共有12个插件，每个插件的用法都大致相同，他们都自己属性、方法、事件，下面只介绍插件的基本用法，具体用法大家可参考（http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html）。

1、过度效果（transition）

我也没看到它的详解。。。。。。。。。。。。。

2、模态框（modal）

这个很好玩，它相当于你用js使用alert（）方法，也就警告弹窗，但是可以自定弹窗内容。不多解释直接上图<div class="modal fade" id="modal"data-backdrop="static">

<h1 class="modal-title">演示文本标题</h1>

</div>

演示文本正文

</div>

演示文本脚

</div>

首先创建一个触发器，一般用bottom创建，给它添加一个触发属性data-toggle这个属性在后面你使用其它插件时都会用到，它的值是根据你所使用的插件来的，用的什么插件它就是什么值，用的modal插件它的值就是modal，然后再给他设置一个data-target属性，这个是用来设置你所触发的对象的。下面的代码就是创建触发对象

.modal .fade，用来把 <div> 的内容识别为模态框，它创建了一个屏幕大小的窗口，添加了一个淡入淡出的效果。

.modal-dialog用来创建一个回话，它的效果是会话框出入的一个效果。

.modal-content用来创建内容，它的效果是给回话创建一个白色背景。

后面的.modal-header、.modal-body、.modal-footer是用来创建标题、主体内容以及页脚的内容的。

3、下拉菜单（dropdown）

下拉菜单

</button>

</ul>

</div>

.dropdown创建下拉框，button触发器，.data-toggle设置触发属性，它的值为dropdown，.data-target设置触发对象。.dropdown-menu创建下拉选项。

4、滚动监听（scrollspy）

</ul>

</nav>

<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPodTouch 和 Apple

TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。

<h4id="java">java</h4>

<p>ApacheSubversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。

</p>

<h4id="js">js</h4>

<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。

</p>

<h4id="php">php</h4>

<p>EnterpriseJava Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的J2EE 上。

</p>

</div>

个人觉得这个是比较难的，首先给大家介绍一个属性data-spy它的值为scroll，暂时在其他的插件中还没有看大它，但它应该是只有滚动监听插件才能用的，它的做用是获取你所需要监听的对象，可以是div也可以是body，还要为他设置一个data-target属性，它的值一般为导航条的id，这里要注意如果你监听的是div,那么要记得设置div的固定高度，并且超出部分自动生成滚动条，还要设置一个相对定位，设置高度是因为你监听的是div而不是文档，设置相对定位是避免导航栏与div里面内容显示的偏差。导航栏里每一导航链接设置为锚点链接，与div里面内容部分的id值相对应。

5、标签页（tab-pane）

<li><a href="#jmeter"data-toggle="tab">jmeter</a></li>

</ul>

<div class="tab-pane fade in active"id="home"><p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p></div>

<div class="tab-pane fade"id="io"><p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和Apple

TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p></div>

<div class="tab-pane fade"id="jmeter"> <p>jMeter 是一款开源的测试软件。它是 100% 纯Java 应用程序，用于负载和性能测试。</p></div>

<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的J2EE 上。

</p></div>

</div>

这里只需单独创建一个导航，添加锚点链接，注意这里需要添加一个触发属性data-toggle它的值去tab,创建内容之前需要创建一个大盒子，添加.tab-content样式，然后在里面内容，每一部分的内容最好放在盒子里，并且要设置.tab-pane样式，其实这个和前面的面板（panel）很相似，里面的.fade样式是设置淡入淡出的效果，.in表示页面加载时显示当前标签页。

6、提示工具（tooltip）

<a href="#" data-toggle="tooltip" title="默认的 Tooltip"data-placement="bottom">默认Tooltip</a>

$(function(){$('[data-toggle="tooltip"]').tooltip();});

</script>

提示工具就是你把光标移到某个关键词上的时候，所弹跳出来的提示信息，data-toggle触发属性，title设置提示内容，data-placement设置提示位置可以是bottom、top、left、right。然后就是写js，必须配合js使用，不然没效果，至于什么原因我也没看插件源代码

7、弹出框（popover）

<a href="#" title="Popover title"data-container="body" data-toggle="popover" data-placement="bottom"data-content="底部的 Popover 中的一些内容">底部的 Popover</a>

$(function(){$('[data-toggle="popover"]').popover();});

</script>

效果跟提示工具差不多，属性的设置也差不多，都是配合js使用

8、警告框（alert）

9、按钮（btn）

$('#button').click(function(){

$(this).button('loading')

});

</script>

点一下按钮出现加载效果，并且这个按钮禁止使用，它还有其它的方法可以设置它在一段时间后进行重置（按钮上的内容重置）。

10、折叠（collapse

标题

</a>

</h4>

</div>

</div>）

11、轮播图（carouse）

</ul>

</div>

</div>

</div>

</a>

</a>

</div>

趣味相投

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浅析bootstr

这是第一次写博客，写完之后看了一下，我觉的写的比较渣，前面比较繁琐，后面我只将我的代码和效果截图上来了，没有过多的讲解，主要是我也不知道该怎么讲，不管怎么样希望大家能够包容、多多支持，提升也需要一个提升的过程，相信我会写的越来越好，欢迎大家来讨论和指正，一起加油！个人对bootstrap的学习主要分为两个部分，一个是bootstrap组件的用法，一个是bootstrap插件的用法。这里把b
复制链接

扫一扫