Bootstrap教程Bootstrap，来自Twitter，是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。本教程将向您讲解Bootstrap框架的基础，通过学习这些内容，您将可以轻松地创建Web项目。教程被分为Bootstrap基本结构...

[阅读全文]

Bootstrap4创建一个网页接下来我们通过Bootstrap4来创建一个简单的响应式网页。在学习之前我们可以先看下效果：https://www.k88.net/try/demo_source/bootstrap3-makewebsite.htmHTML代码<divclass="jumbotrontext-cente...

[阅读全文]

Bootstrap4多媒体对象Bootstrap提供了很好的方式来处理多媒体对象（图片或视频）和内容的布局。应用场景有博客评论、微博等:基础多媒体对象要创建一个多媒体对象，可以在容器元素上添加.media类，然后将多媒体内容放到子容器上，子容器需要添加.media-body类，然后添加外边距，内边距等效果:实例<div...

[阅读全文]

Bootstrap4Flex（弹性）布局Bootstrap4通过flex类来控制页面的布局。弹性盒子(flexbox)Bootstrap3与Bootstrap4最大的区别就是Bootstrap4使用弹性盒子来布局，而不是使用浮动来布局。弹性盒子是CSS3的一种新的布局模式，更适合响应式的设计，如果你还不了解flex，可...

[阅读全文]

Bootstrap4小工具Bootstrap4提供了一些小工具，可以让我们不用写CSS代码就能实现想要的效果。边框使用border类可以添加或移除边框:实例<spanclass="border"></span><spanclass="borderborder-0"></span><spanclass="borderbo...

[阅读全文]

Bootstrap滚动监听(Scrollspy)滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。如何创建滚动监听以下实例演示了如何创建滚动监听：实例<!--可滚动区域--><bodydata-spy="scroll"data-target="...

[阅读全文]

Bootstrap4弹出框弹出框控件类似于提示框，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容。如何创建弹出框通过向元素添加data-toggle="popover"来来创建弹出框。title属性的内容为弹出框的标题，data-content属性显示了弹出框的文本内容：<ahref="#"data-t...

[阅读全文]

Bootstrap4提示框提示框是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。如何创建提示框通过向元素添加data-toggle="tooltip"来来创建提示框。title属性的内容为提示框显示的内容：<ahref="#"data-toggle="tooltip"title="我是提示内容!">鼠标...

[阅读全文]

Bootstrap4模态框模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。如何创建模态框以下实例创建了一个简单的模态框效果：实例<!--按钮：用于打开模态框--><buttontype="button"class="bt...

[阅读全文]

Bootstrap4轮播轮播是一个循环的幻灯片：如何创建轮播以下实例创建了一个简单的图片轮播效果：实例<divid="demo"class="carouselslide"data-ride="carousel"><!--指示符--><ulclass="carousel-indicators"><lidata-targe...

[阅读全文]

Bootstrap4自定义表单Bootstrap4可以自定义一些表单的样式来替换浏览器默认的样式。自定义复选框如果要自定义一个复选框，可以设置<div>为父元素，类为.custom-control和.custom-checkbox，复选框作为子元素放在该<div>里头，然后复选框设置为type="checkbox"，类...

[阅读全文]

Bootstrap4输入框组我们可以使用.input-group类来向表单输入框中添加更多的样式，如图标、文本或者按钮。使用.input-group-prepend类可以在输入框的的前面添加文本信息，.input-group-append类添加在输入框的后面。最后，我们还需要使用.input-group-text类来设...

[阅读全文]

Bootstrap4表单控件Bootstrap4支持以下表单控件：inputtextareacheckboxradioselectBootstrapInputBootstrap支持所有的HTML5输入类型:text,password,datetime,datetime-local,date,month,time,wee...

[阅读全文]

Bootstrap4表单在本章中，我们将学习如何使用Bootstrap创建表单。Bootstrap通过一些简单的HTML标签和扩展的类即可创建出不同样式的表单。表单元素<input>,<textarea>,和<select>elements在使用.form-control类的情况下，宽度都是设置为100%。Bootst...

[阅读全文]

Bootstrap4面包屑导航（Breadcrumb）面包屑导航是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置，是在用户界面中的一种导航辅助。Bootstrap中的面包屑导航是一个简单的带有.breadcrumbclass的无序列表。分隔符会...

[阅读全文]

Bootstrap4导航栏导航栏一般放在页面的顶部。我们可以使用.navbar类来创建一个标准的导航栏，后面紧跟:.navbar-expand-xl|lg|md|sm类来创建响应式的导航栏(大屏幕水平铺开，小屏幕垂直堆叠)。导航栏上的选项可以使用<ul>元素并添加class="navbar-nav"类。然后在<li>元...

[阅读全文]

Bootstrap4导航如果你想创建一个简单的水平导航栏，可以在<ul>元素上添加.nav类，在每个<li>选项上添加.nav-item类，在每个链接上添加.nav-link类:实例<ulclass="nav"><liclass="nav-item"><aclass="nav-link"href="#">Link</a...

[阅读全文]

Bootstrap4折叠Bootstrap4折叠可以很容易的实现内容的显示与隐藏。实例<buttondata-toggle="collapse"data-target="#demo">折叠</button><divid="demo"class="collapse">Loremipsumdolortext....</di...

[阅读全文]

Bootstrap4下拉菜单下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。实例<divclass="dropdown"><buttontype="button"class="btnbtn-primarydropdown-toggle"data-toggle="dropdown">Dropdownbutton</...

[阅读全文]

Bootstrap4卡片简单的卡片我们可以通过Bootstrap4的.card与.card-body类来创建一个简单的卡片，实例如下:实例<divclass="card"><divclass="card-body">简单的卡片</div></div>尝试一下Bootstrap4的卡片类似Bootstrap3中的面板、图...

[阅读全文]

Bootstrap4列表组大部分基础列表组都是无序的。要创建列表组，可以在<ul>元素上添加.list-group类,在<li>元素上添加.list-group-item类:实例<ulclass="list-group"><liclass="list-group-item">Firstitem</li><liclass...

[阅读全文]

Bootstrap4分页网页开发过程，如果碰到内容过多，一般都会做分页处理。Bootstrap4可以很简单的实现分页效果。要创建一个基本的分页可以在<ul>元素上添加.pagination类。然后在<li>元素上添加.page-item类：:实例<ulclass="pagination"><liclass="page-...

[阅读全文]

Bootstrap4进度条进度条可以显示用户任务的完成过程。创建一个基本的进度条的步骤如下：添加一个带有.progress类的<div>。接着，在上面的<div>内，添加一个带有class.progress-bar的空的<div>。添加一个带有百分比表示的宽度的style属性，例如style="width:70%"表示...

[阅读全文]

Bootstrap4徽章（Badges）徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将.badge类加上带有指定意义的颜色类(如.badge-secondary)添加到<span>元素上即可。徽章可以根据父元素的大小的变化而变化:实例<h1>测试标题<spanclass="badgebadg...

[阅读全文]

Bootstrap4按钮组Bootstrap4中允许我们将按钮放在同一行上。可以在<div>元素上添加.btn-group类来创建按钮组。实例<divclass="btn-group"><buttontype="button"class="btnbtn-primary">Apple</button><buttontyp...

[阅读全文]

Bootstrap4按钮Bootstrap4提供了不同样式的按钮。实例<buttontype="button"class="btn">基本按钮</button><buttontype="button"class="btnbtn-primary">主要按钮</button><buttontype="button"clas...

[阅读全文]

Bootstrap4信息提示框Bootstrap4可以很容易实现信息提示框。提示框可以使用.alert类,后面加上.alert-success,.alert-info,.alert-warning,.alert-danger,.alert-primary,.alert-secondary,.alert-light或.a...

[阅读全文]

Bootstrap4JumbotronJumbotron（超大屏幕）会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息。提示:Jumbotron里头可以放一些HTML标签，也可以是Bootstrap的元素。我们可以通过在<div>元素中添加.jumbotron类来创建jumbotron:实例<divclass=...

[阅读全文]

Bootstrap4图像形状圆角图片.rounded类可以让图片显示圆角效果：实例<imgsrc="cinqueterre.jpg"class="rounded"alt="CinqueTerre">尝试一下椭圆图片.rounded-circle类可以设置椭圆形图片:实例<imgsrc="cinqueterre.jpg"...

[阅读全文]

Bootstrap4表格Bootstrap4基础表格Bootstrap4通过.table类来设置基础表格的样式，实例如下:实例<tableclass="table"><thead><tr><th>Firstname</th><th>Lastname</th><th>Email</th></tr></thead><tbo...

[阅读全文]