分类目录归档:BootStrap

BootStrap Tabs 和 Pills


标签和药丸是导航的形式。这意味着它们可以帮助最终用户以用户友好的方式浏览网站。

标签

要实现引导选项卡,首先需要一个分配了.nav类的元素。然后,您只需添加一个名为.nav-tabs的额外类。

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"...

阅读全文...

Bootstrap表格


基本表

为了实现基本样式示例,将基类.table添加到任何<table>元素。

<table class="table">
  ...
 </table>

表条纹

为了在表中实现条纹行效果(斑马条纹),除了.table之外, .table在任何<table>元素上使用.table-striped 。条带化表格通过:nth-child CSS选择器设置样式,这在Internet Explorer 8中不可用。

<table class="table table-striped">
  ...
 </table>
...

阅读全文...

Bootstrap面板Panels


Bootstrap框架为您提供了一个名为面板的功能。面板是一个具有样式标题的框,然后是一个允许您通过一组或多个面板以有组织的方式显示信息的主体。

如何使用:

要使用Bootstrap面板,您需要为您的面板类型添加一个<div> (类panel panel-default或类似的,请参阅面板示例以获取更多信息。)然后使用两个嵌套的<div>标记,一个用于标题(类panel panel-heading )和一个用于主体(类panel panel-body )。您可能会发现代码示例比书面说明更容易理解。

代码示例

<div class="panel pa...

阅读全文...

Bootstrap导航栏


Bootstrap框架为您提供了一个功能调用导航栏。简而言之,导航栏(也称为导航栏)是页面顶部的标题,用于显示导航信息。

如何使用

要使用Bootstrap导航栏,可以在网页的<body>元素内部的顶部添加<nav>元素。您可以添加各种样式来自定义导航栏的显示。

代码示例

这是制作基本导航栏所需的代码。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-h...

阅读全文...

Bootstrap 模态弹出窗口


模态是弹出窗口,用于在继续之前提供重要信息。

要在当前页面的顶部创建此类对话框/弹出窗口,Bootstrap会提供Modal插件。

代码示例:

<!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href=&quo...

阅读全文...

Bootstrap网格系统


简而言之,Bootstrap网格系统可帮助您创建响应式布局,它包含一个行和列系统,可帮助您构建内容。

行是水平的列组,每行最多12列。在每行中,内容放置在列内,并且可以跨越1到12列之间的任何位置。

Bootstrap有五种不同类型的网格层,即Extra small,Small,Medium,Large和Extra large,为每个网格层定义了一个断点。

Bootstrap使用像素来定义网格层断点,作为网格层断点的不同视口宽度为:

怎么运行的

容器

容器是_包含_网格的最外层元素,在屏幕中间使用container作为固定宽度的容器(大屏幕上的额外边距)或container-fluid的...

阅读全文...

Bootstrap的Fontawesome图标


Bootstrap(版本4)在其最新版本中删除了Glyphicon图标字体。 Fontawesome Icons为您提供超过675个图标,它们以字体格式显示。

如何使用:

在您的html的<head>中包含对Font Awesome的引用。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

使用fontawesome与使用Glyphicon相同。

只需创建<...

阅读全文...

Bootstrap Form输入


Bootstrap支持以下表单控件:

  1. 输入
  2. textarea
  3. 复选框
  4. 单选
  5. 选择

示例代码片段

1.输入

Bootstrap支持所有HTML5输入类型:文本,密码,日期时间,日期时间 - 本地,日期,月份,时间,周,数字,电子邮件,网址,搜索,电话和颜色。

注意:如果输入的类型未正确声明,则输入将不会完全定型!

以下示例包含两个输入元素;一个类型文本和一个类型密码:

<div class="form-group">
  <label for="usr">Name:</label>
  <input ty...

阅读全文...

Bootstrap下拉菜单


Bootstrap提供Dropdown作为显示链接列表的插件。 下拉列表是一个切换按钮,显示链接列表。

Bootstrap的下拉菜单设计为通用的,适用于各种情况。例如,可以创建包含搜索字段或登录表单的下拉列表。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown&...

阅读全文...

bootstrap collapse


折叠是一个插件,可以帮助您使用平滑动画隐藏或显示元素。开发人员通常使用bootstrap collapse来隐藏或显示网页部分的辅助细节。例如,您可以拥有一个包含很长描述的项目列表。显示所有内容会占用大量空间,因此可以使用bootstrap collapse来隐藏和显示描述。

Bootstrap崩溃作为单独的插件提供,名为collapse.js,这意味着它可以在引导环境之外使用。插件本身可以在这里找到http://getbootstrap.com/2.0.4/javascript.html#collapse。

Bootstrap折叠可以与几个元素,按钮,锚标签或面板一起使用。要使用折叠,...

阅读全文...