bootstrap-全局CSS&js插件

发布时间：2020-12-17 21:19:32 所属栏目：安全来源：网络整理

导读：一、全局CSS 1、概述 1. 全局CSS样式： * 按钮：class="btn btn-default" * 图片： * class="img-responsive"：图片在任意尺寸都占100% * 图片形状 * img src ="..." alt class ="img-rounded" ：方形 * ="img-circle" ：圆形 * ="img-thumbnail" ：相框 *

一、全局CSS

1、概述

1. 全局CSS样式：
    * 按钮：class="btn btn-default"
    * 图片：
        *  class="img-responsive"：图片在任意尺寸都占100%
        *  图片形状
            *  <img src="..." alt class="img-rounded">：方形
            *  ="img-circle" ： 圆形
            *  ="img-thumbnail" ：相框
    * 表格
        * table
        * table-bordered
        * table-hover
    * 表单
        * 给表单项添加：class="form-control"

按钮、图片

<!DOCTYPE html> html lang="zh-CN"head> meta charset="utf-8"http-equiv="X-UA-Compatible" content="IE=edge"name="viewport"="width=device-width,initial-scale=1" title>CSS全局样式</> Bootstrap link href="css/bootstrap.min.css" rel="stylesheet" jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) script ="js/jquery-3.2.1.min.js"></script 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 ="js/bootstrap.min.js"> bodya class="btn btn-default" href="#" role="button">Linkabutton type="submit">Buttonbuttoninput ="button" value="Input"="submit"="Submit"br Standard button --> type="btn btn-default">（默认样式）Default Provides extra visual weight and identifies the primary action in a set of buttons ="btn btn-primary">（首选项）Primary Indicates a successful or positive action ="btn btn-success">（成功）Success Contextual button for informational alert messages ="btn btn-info">（一般信息）Info Indicates caution should be taken with this action ="btn btn-warning">（警告）Warning Indicates a dangerous or potentially negative action ="btn btn-danger">（危险）Danger Deemphasize a button by making it look like a link while maintaining button behavior ="btn btn-link">（链接）Linkhr="img/banner_1.jpg"="img-responsive"="Responsive image"="img-responsive img-rounded"="img-responsive img-circle"="img-responsive img-thumbnail"html>

表格、表单

table ="table table-bordered table-hover"> tr> th>编号>姓名>年龄> >001>张三>21>李四>23tableformdiv ="form-group"label for="exampleInputEmail1">Email addresslabel="email"="form-control" id="exampleInputEmail1" placeholder="Email"div="exampleInputPassword1">Password="password"="exampleInputPassword1"="Password"="exampleInputFile">File input="file"p ="help-block">Example block-level help text here.p="checkbox"> Check me out >Submit>

二、js插件

1、导航条&分页条

>导航条&分页条导航条 nav ="navbar navbar-default"="container-fluid" Brand and toggle get grouped for better mobile display --> ="navbar-header" 汉堡按钮 --> ="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"span ="sr-only">Toggle navigationspan="icon-bar"="navbar-brand"="#">首页 Collect the nav links,forms,and other content for toggling ="collapse navbar-collapse"="bs-example-navbar-collapse-1"ul ="nav navbar-nav"li ="active"><>Link >(current)li="dropdown"> ="dropdown-toggle"="dropdown" aria-haspopup="true">Dropdown ="caret"="dropdown-menu"> >Action>Another action>Something else hererole="separator"="divider">Separated link>One more separated linkulform ="navbar-form navbar-left"="text"="Search"="nav navbar-nav navbar-right" /.navbar-collapse /.container-fluid nav分页条aria-label="Page navigation"="pagination"="disabled" //禁用 aria-label="Previous"aria-hidden="true">«>1 //默认选中 >2>3>4>5="Next"»>

轮播图

id="carousel-example-generic"="carousel slide" data-ride="carousel" Indicators ol ="carousel-indicators"data-target="#carousel-example-generic" data-slide-to="0"="1"="2"ol Wrapper for slides ="carousel-inner"="listbox"="item active"="..."="item"="img/banner_2.jpg"="img/banner_3.jpg" Controls ="left carousel-control" data-slide="prev"="glyphicon glyphicon-chevron-left" aria-hidden>Previous="right carousel-control"="next"="glyphicon glyphicon-chevron-right">Next>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

bootstrap-全局CSS&amp;js插件

bootstrap-全局CSS&js插件