Bootstrap

最新推荐文章于 2022-12-05 11:40:29 发布
最新推荐文章于 2022-12-05 11:40:29 发布
阅读量359 收藏 1
点赞数 1
分类专栏： CRM项目 文章标签： Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyx1260168395/article/details/103099285
版权

文章目录

Bootstrap

一、一个Bootstrap的标准模板

Bootstrap的文件主要包含css文件、js文件和字体文件。Bootstrap框架的核心是轻量的CSS基础代码库，通过<link>标签引入

<!DOCTYPE html>
<html lang="en">
    <head>
    	<!--meta标签必须放在最前面-->
        <meta charset="utf-8">
        <!--用于对移动设备的适配，设置视口的宽为机器的宽，缩放为1-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap的HTML标准模板</title>   
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!--你自己的样式文件 -->
        <link href="css/your-style.css" rel="stylesheet">        
    </head>
    <body>
        <h1>Hello, world!</h1>
        
        <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
        <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
        <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    </body>
</html>

二、排版

需要调用bootstrap.css

1. 标题

  • Bootstrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>，只不过Bootstrap覆盖了其默认的样式，通过指定class属性为"h1"到"h6"，让非标题元素和标题使用相同的样式
<h1>我的第一个bootstrap程序</h1>
<div class="h1">我的第一个bootstrap程序</div>
  • 在标题后设置副标题
<h1>Bootstrap标题一<small>我是副标题</small></h1>

2. 突出样式

可以通过添加class=“lead”实现段落p突出显示。除此之外，Bootstrap还通过元素标签:<small>、<strong>、<em>和<cite>给文本做突出样式处理。

  • 粗体
    <b></b>或者<strong></strong>
  • 斜体
    <i></i>或者<em></em>
  • 强调
    这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过颜色来表示强调，具本说明如下：
    • .text-muted：提示，使用浅灰色（#999）
    • .text-primary：主要，使用蓝色（#428bca）
    • .text-success：成功，使用浅绿色(#3c763d)
    • .text-info：通知信息，使用浅蓝色（#31708f）
    • .text-warning：警告，使用黄色（#8a6d3b）
    • .text-danger：危险，使用褐色（#a94442）

3. 文本对齐

  • .text-left：左对齐
  • .text-center：居中对齐
  • .text-right：右对齐
  • .text-justify：两端对齐

4. 列表

  • 普通列表
    列表的使用与HTML相同，只是样式上Bootstrap稍做修改
    通过给无序列表添加一个类名.list-unstyled，这样就可以去除默认的列表样式的风格。例如有序列表前的数字，无序列表前的点。
  • 内联列表
    通过添加类名.list-inline来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。
  • 定义列表
    定义列表使用，与HTML使用定义列表的方法是相同，Bootstrap可以给<dl>添加类名.dl-horizontal，实现水平定义列表(屏幕大于768px)
    <dl class="dl-horizontal">
    <dt>北京</dt>
    <dd>帝都</dd>
    <dt>上海</dt>
    <dd>魔都</dd>
</dl>

5. 代码

  1. 使用<code></code>来显示单行内联代码，显示即为样式
  2. 使用
    <pre></pre>
    来显示多行块代码
  3. 使用<kbd></kbd>来显示用户输入代码
  • 在pre标签上添加类名.pre-scrollable，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。

6. 表格

Bootstrap的表格格式与HTML一样，后面介绍表格类型的时候，结构都是类似下面的代码

<table>
	<thead>
		<tr>
			<th>表格标题</th>
			…
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>表格单元格</td>
			…
		</tr>
    	 …
	</tbody>
</table>
  • Bootstrap为表格不同的样式风格提供了不同的类名，主要包括
    • .table：基础表格（<table class="table">）
    • .table-striped：斑马线表格（<table class="table table-striped">）
    • .table-bordered：带边框的表格（<table class="table table-bordered">）
    • .table-hover：鼠标悬停高亮的表格，可以和Bootstrap其他表格混合使用。简单点说，只要你想让你的表格具备悬浮高亮效果，你只要给这个表格添加table-hover类名就好了
      • （<table class="table table-striped table-bordered table-hover">）
    • .table-condensed：紧凑型表格（<table class="table table-condensed">）
    • .table-responsive：响应式表格，当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。
      • （<div class="table-responsive"><table class="table table-bordered"></table></div>）
  • Bootstrap表格的行元素<tr>提供了五种不同的类名，每种类名控制了行的不同背景颜色
    类名描述颜色
    .active表示当前活动的信息#f5f5f5
    .success表示成功或者正确的行为#dff0d8
    .info表示中立的信息或行为#d9edf7
    .warning表示警告，需要特别注意#fcf8e3
    .danger表示危险或者可能是错误的行为#f2dede

特别提示：除了.active之外，其他四个类名和.table-hover配合使用时，Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置，所以如果需要给tr元素添加其他颜色样式时，在.table-hover表格中也要做相应的调整。

三、表单

需要调用bootstrap.css

1. 水平表单(标签居左，表单控件居右)

在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：

  • 1、在元素是使用类名form-horizontal。
    • 在元素上使用类名form-horizontal主要有以下几个作用：
      • 设置表单控件padding和margin值。
      • 改变“form-group”的表现形式，类似于网格系统的“row”
  • 2、配合Bootstrap框架的网格系统。（网格布局会在以后的章节中详细讲解）

2. 内联表单(表单的控件都在一行内显示)

  • <form>元素中添加类名“form-inline”
  • 要在input前面添加一个label标签时，可以将label标签放在容器“form-group”中
  • label隐藏：在label标签运用了一个类名“sr-only”，这个样式将标签隐藏了
<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">邮箱</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> 记住密码
    </label>
  </div>
  <button type="submit" class="btn btn-default">进入邮箱</button>
</form>

3. 输入框input

在Bootstrap中使用input时也必须添加type类型，同时需要添加类名“form-control”

4. 下拉选择框select

拉选择框直接添加类名form-control，多行选择设置multiple属性的值为multiple

<select multiple class="form-control">

5. 文本域textarea

文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto

6. 复选框checkbox和单选择按钮radio

Bootstrap框架中checkbox和radio有点特殊，Bootstrap针对他们做了一些特殊化处理，主要是checkbox和radio与label标签配合使用会出现一些小问题（最头痛的是对齐问题）

  • 1、先将checkbox和radio都使用label包起来了
  • 2、checkbox连同label标签放置在一个名为“.checkbox”的容器内
  • 3、radio连同label标签放置在一个名为“.radio”的容器内
<form>
    <div class="checkbox">
        <label>
            <input type="checkbox" value="">
            记住密码
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="optionsRadios" value="love" checked>
            喜欢
        </label>
    </div>
</form>
(2) 水平排列
  • 1、如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”
  • 2、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”
(3) 改变宽高

高度：需要在已添加类form-control的基础上再添加：

  • 1、input-sm：让控件比正常高度更低
  • 2、input-lg：让控件比正常高度更高
    宽度要用到Bootstrap的网格系统：
<form role="form" class="form-horizontal">
    <div class="form-group"><!--相当于网格系统中的row-->
        <div class="col-xs-4"><!--设置宽度-->
            <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
        </div>
        <div class="col-xs-6">
            <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
        </div>
    </div>
</form>

7. 焦点样式

给控件添加类名“form-control”就会自动获得Bootstrap定义的默认焦点样式

8. 禁用样式

  • 在需要禁用的表单控件上加上“disabled”
  • 在Bootstrap框架中，如果fieldset设置了disabled属性，整个域都将处于被禁用状态。对于整个禁用的域中，如果legend中有输入框的话，这个输入框是无法被禁用的

9. 验证状态

在form-group容器上对应添加状态类名

  • 1、.has-warning：警告状态（黄色）
  • 2、.has-error：错误状态（红色）
  • 3、.has-success：成功状态（绿色）
    如果你想让表单在对应的状态下显示 icon (对号（√）、叉号（×）) 出来，步骤：
  • 1、要在对应的状态下添加类名“has-feedback”(同1、2、3一起用)
  • 2、在input标签后加入span标签
    表单中加入提示信息用help-block
<form role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess1">成功状态</label>
    <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" ><!--input文本框-->
    <span class="help-block">你输入的信息是正确的</span><!--提示信息-->
    <span class="glyphicon glyphicon-ok form-control-feedback"></span><!--icon图标-->
  </div>
  <div class="form-group has-warning has-feedback">
    <label class="control-label" for="inputWarning1">警告状态</label>
    <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
    <span class="help-block">请输入正确信息</span>
    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  </div>
  <div class="form-group has-error has-feedback">
    <label class="control-label" for="inputError1">错误状态</label>
    <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
    <span class="help-block">你输入的信息是错误的</span>
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
  </div>
</form>

10. 按钮

需要调用bootstrap.css

(1) 按钮风格
<button class="btn" type="button">基础按钮.btn</button><!--基础类btn，搭配下面的类进行使用，也可以在input/a标签上加入btn样式-->
<button class="btn btn-default" type="button">默认按钮.btn-default</button><!--鼠标移入会有变色--><!--深灰色-->
<button class="btn btn-primary" type="button">主要按钮.btn-primary</button> <!--深蓝色-->
<button class="btn btn-success" type="button">成功按钮.btn-success</button> <!--绿色-->
<button class="btn btn-info" type="button">信息按钮.btn-info</button> <!--浅蓝色-->
<button class="btn btn-warning" type="button">警告按钮.btn-warning</button> <!--橙色-->
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button> <!--红色-->
<button class="btn btn-link" type="button">链接按钮.btn-link</button> <!---->
(2) 按钮大小
<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button> 
<button class="btn btn-primary" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>
<button class="btn btn-primary btn-xm " type="button">块状超小型按钮.btn-xm</button><!--块状按钮-->
(3) 按钮填充

按钮使用"btn-block"这个类名可以让按钮充满整个容器，并且这个按钮不会有任何的padding和margin值。在实际当中，常把这种按钮称为块状按钮(见上例中的超小型按钮)

11. 图片

<img>标签上添加对应的类名：

  • 1、img-responsive：响应式图片，主要针对于响应式设计
  • 2、img-rounded：圆角图片
  • 3、img-circle：圆形图片
  • 4、img-thumbnail：缩略图片

12. 图标(icon)

通过scan标签来获取预定义好的小图标。在Bootstrap框架中是通过给元素添加“glyphicon”类名来实现，然后通过伪元素“:before”的“content”属性调取对应的icon编码
用法：

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-asterisk"></span>

Bootstrap中文网：官网里有全部的组件，直接将要用的图标对应的类复制到<span>标签的class属性中就可以引用
还可以使用第三方为Bootstrap框架设计的图标字体，如Font Awesome(http://www.bootcss.com/p/font-awesome/)

四、网格系统

网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

1. 容器，行，列

  1. 数据行(row)必须包含在容器（container）中，以便为其赋予合适的对齐方式和内距(padding)。如：
<div class="container">
	<div class="row"></div>
</div>
  1. 在行(row)中可以添加列(column(也就是下面的col-md-x的类，x代表占几个列网格))，但列数之和不能超过平分的总列数，比如12。超过了总列数，最后的整体会换行。如：
    • 1、col是column简写：列；
    • 2、xs是maxsmall简写：超小， sm是small简写：小， md是medium简写：中等， lg是large简写：大；
    • 3、-* 表示占列数，即占每行row分12列栅格系统比；
      • .col-xs-* 超小屏幕如手机 （<768px）时使用；
      • .col-sm-* 小屏幕如平板 （768px ≤ 宽度 ＜992px）时使用；
      • .col-md-* 中等屏幕如普通显示器 （992px ≤ 宽度 ＜ 1200px）时使用；
      • .col-lg-* 大屏幕如大显示器 （≥1200px）时使用。
<div class="container"><!--最外面的容器-->
	<div class="row"><!--容器内的一行-->
		<div class="col-md-4"></div><!--一行中有12个小格，这里占4个小格-->
		<div class="col-md-8"></div><!--一行中有12个小格，这里占8个小格-->
	</div>
</div>
  1. 具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(row)的直接子元素

2. 列偏移

  1. ”col-md-offset-x”：对列进行向右偏移x位
<div class="container">
  <div class="row">
    <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
  </div>
</div>
  1. “col-md-push-x”：将元素往右移x位
  2. “col-md-pull-x”：将元素住左移x位

3. 网格嵌套

<div class="container">
    <div class="row">
        <div class="col-md-8"><!--将这8份再分成12份-->
            <div class="row">
                <div class="col-md-6" style="background-color: #00B83F">col-md-6</div>
                <div class="col-md-6" style="background-color: red">col-md-6</div>
            </div>
        </div>
        <div class="col-md-4" style="background-color: yellow">col-md-4</div>
    </div>
</div>

五、下拉菜单

需要调用bootstrap.css和bootstrap.js

1. 基本用法

  1. 使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为：<div class="dropdown"></div>

  2. 使用了一个<button>按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，此示例为：data-toggle="dropdown"

  3. 下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”，此示例为：<ul class="dropdown-menu">

<div class="dropdown">
	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
   选择你喜欢的水果
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
		<li><a href="#">桃</a></li>
		<li><a href="#">苹果</a></li>
	</ul>
</div>

2. 下拉菜单分组

  1. 假设下拉菜单有两个组，那么组与组之间可以通过添加一个空的<li>，并且给这个<li>添加类名“divider”来实现添加下拉分隔线的功能。
  2. 为了让这个分组更明显，还可以给每个组添加一个头部（标题），通过给
  3. 标签添加类名dropdown-header来添加标题
  4. 下拉菜单默认是左对齐(“dropdown-menu-left”)，如果你想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名

3. 下拉菜单状态

  1. 下拉菜单项的默认的状态（不用设置）有悬浮状态（:hover）和焦点状态（:focus）
  2. 下拉菜单项除了上面两种状态，还有当前状态（.active）和禁用状态（.disabled）
<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu pull-right"><!--设置右对齐-->
        <li class="dropdown-header">第一部分菜单头部</li><!--设置组标题-->
        <li class="disabled"><a href="#">第一部分下拉菜单项</a></li><!--设置禁用状态-->
        <li class="divider"></li><!--设置分隔线-->
        <li class="dropdown-header">第二部分菜单头部</li>
        <li class="active"><a href="#">第二部分下拉菜单项</a></li><!--设置活动状态-->
    </ul>
</div>

4. 下拉菜单向上弹出

默认为向下弹出，设置为向上弹出时，需要在容器的dropdown类名上追加“dropup”类名
按钮上弹出对应的icon（小三角）：<span class="caret"></span>

六、按钮组

需要调用bootstrap.css和bootstrap.js

1. 按钮组

  • 使用一个名为“btn-group”的容器，把多个按钮放到这个容器中，容器里的标签元素需要带有类名“btn”
  • 将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中，实现一个按钮工具栏

2. 按钮组大小

  • 在“.btn-group”类名上追加对应的类名，就可以得到不同大小的按钮组
    • btn-group-lg：大按钮组
    • btn-group-sm：小按钮组
    • btn-group-xs：超小按钮组
<div class="btn-toolbar"><!--按钮工具栏，里面有多个按钮组-->
    <div class="btn-group btn-group-lg"><!--大按钮组-->
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
    </div>
    <div class="btn-group"><!--普通按钮组-->
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-left"></span></button>
    </div>
</div>

3. 按钮组中加下拉菜单及按钮组分布

  • 把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级。为水平按钮组加下拉菜单
  • 把水平分组的“btn-group”类名换成“btn-group-vertical”，变为垂直按钮组。
  • 等分按钮也常被称为是自适应分组按钮，只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名
  • 下拉菜单向上弹出时，只需要在“btn-group”上添加“dropup”类名
<div class="btn-group"><!--水平按钮组，btn-group改为btn-group-vertical变为垂直按钮组-->
    <button class="btn btn-default" type="button">首页</button>
    <div class="btn-group"><!--把dropdown换成btn-group，并与普通按钮放在同一级-->
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们
        	<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="##">公司简介</a></li>
        </ul>
    </div>
</div>

七、导航

Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类

  • 标签形导航（“nav-tabs”）
  • 胶囊形(pills)导航（“nav-pills”）
    <ul class="nav nav-tabs"><!--标签形导航-->
	<li class="active"><a href="##">Home</a></li><!--选中样式-->
	<li><a href="##">CSS3</a></li><!--正常样式-->
	<li class="disabled"><a href="##">Responsive</a></li><!--禁用样式-->
</ul>
  • 垂直堆叠的导航：“nav-pills”的基础上添加一个“nav-stacked”类名
    <ul class="nav nav-pills nav-stacked"><!--垂直堆叠的导航-->
    <li class="active"><a href="##">Home</a></li>
 	<li><a href="##">CSS3</a></li><!--正常样式-->
    <li class="nav-divider"></li><!--分隔线-->
 	<li class="disabled"><a href="##">Responsive</a></li><!--禁用样式-->
</ul>
  • 自适应导航：“nav-justified”。需要和“nav-tabs”或者“nav-pills”配合在一起使用。自适应导航指的是导航占据容器全部宽度，而且菜单项可以像表格的单元格一样自适应宽度。
  • 导航加下拉菜单（二级导航）：只需要将li当作父容器，使用类名“dropdown”，同时在li中嵌套另一个列表ul
    <ul class="nav nav-pills">
	<li class="active"><a href="##">首页</a></li>
		<li class="dropdown">
			<a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
			<ul class="dropdown-menu">
				<li><a href="##">CSS3</a></li>
				<li class=”nav-divider”></li><!--分隔线-->
			</ul>
		</li>
	<li><a href="##">关于我们</a></li>
</ul>
  • 面包屑式导航：作用是告诉用户现在所处页面的位置（当前位置）。使用方式：为ol加入breadcrumb类
    <ol class="breadcrumb">
	<li><a href="#">首页</a></li>
	<li class="active">《图解CSS3》</li>
</ol>

八、导航条

1. 基础导航条

  • 第一步：首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”
  • 第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default/navbar-inverse”
  • 将navbar-deafult类名换成navbar-inverse。黑色的导航条风格
<div class="navbar navbar-default">
	<ul class="nav navbar-nav">
		<li class="active"><a href="##">网站首页</a></li>
		<li><a href="##">系列教程</a></li>
	</ul>
</div>

2. 导航条标题、二级导航条

通过“navbar-header”和“navbar-brand”来实现

<div class="navbar navbar-default">
  　<div class="navbar-header"><!--导航条标题-->
  　    <a href="##" class="navbar-brand">慕课网</a>
  　</div>
	<ul class="nav navbar-nav">
	 	<li class="active"><a href="##">网站首页</a></li><!--当前状态样式-->
        <li class="dropdown"><!--二级导航条-->
        	<a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
        	<ul class="dropdown-menu">
        		<li><a href="##">JavaScript</a></li>
        		<li class="disabled"><a href="##">PHP</a></li><!--禁用样式-->
       		</ul>
       	</li>
	</ul>
	<li><a href="##" class="navbar-text">Navbar Text</a></li><!--导航条中加入文本-->
	<form action="##" class="navbar-form navbar-right" rol="search"><!--加入表单，左对齐-->
        <div class="form-group">
            <input type="text" class="form-control" placeholder="请输入关键词"/>
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
    </form>
</div>

3. 导航条中加入表单

  • 通过“navbar-form”，在navbar容器中放置一个带有navbar-form类名的表单
  • “navbar-left”让表单左浮动，“navbar-right”元素在导航条靠右对齐

4. 导航条中的按钮、文本和链接

需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题。

  • 1、导航条中的按钮navbar-btn
  • 2、导航条中的文本navbar-text
  • 3、导航条中的普通链接navbar-link

5. 固定导航条

在制作导航条最外部容器navbar上追加对应的类名

  • .navbar-fixed-top：导航条固定在浏览器窗口顶部
  • .navbar-fixed-bottom：导航条固定在浏览器窗口底部
    为了避免固定导航条遮盖内容，我们需要在body上做一些处理：
body {
	padding-top: 70px;/*有顶部固定导航条时设置*/
	padding-bottom: 70px;/*有底部固定导航条时设置*/
}

6. 响应式导航条

可以适应屏幕，使用步骤：

  • 1、保证在窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。
  • 2、保证在窄屏时要显示的图标样式（固定写法）：
    <button class="navbar-toggle" type="button" data-toggle="collapse">
	<span class="sr-only">Toggle Navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
</button>
  • 3、并为button添加data-target=".类名/#id名"，类名还是id名由需要折叠的div来决定。
<div class="navbar navbar-default">
    <div class="navbar-header">
        　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
            <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
        <a href="##" class="navbar-brand">CSDN</a>
    </div>
    <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
    <div class="collapse navbar-collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="##">网站首页</a></li>
            <li><a href="##">系列教程</a></li>
        </ul>
    </div>
</div>

7. 分页导航

（1）带页码的分页导航
  • 使用ul>li>a这样的结构，在ul标签上加入pagination方法
  • 在ul上通过“pagination-lg”让分页导航变大；
  • 在ul上通过“pagination-sm”让分页导航变小
<ul class="pagination pagination-lg">
	<li><a href="#">&laquo;第一页</a></li>
	<li><a href="#">12</a></li>
	<li class="active"><a href="#">13</a></li>
	<li class="disabled"><a href="#">最后一页&raquo;</a></li>
</ul>
（2）翻页分页导航
  • 将带页码的分页导航中pagination变为pager
  • previous：让“上一步”按钮居左。next：让“下一步”按钮居右
<ul class="pager">
	<li class="disabled previous"><span>&laquo;上一页</span></li><!--禁用样式，居左，默认居中-->
	<li class="next"><a href="#">下一页&raquo;</a></li><!--居右-->
</ul>

8. 标签（如新加的标签，上面显示一个new）

通过这样的方式定义标签：

<h3>标签是在导航上多加的说明 <span class="label label-default">New</span></h3>

标签的风格：

<span class="label label-default">默认标签</span><!--深灰色-->
<span class="label label-primary">主要标签</span><!--深蓝色-->
<span class="label label-success">成功标签</span><!--绿色-->
<span class="label label-info">信息标签</span><!--浅蓝色-->
<span class="label label-warning">警告标签</span><!--橙色-->
<span class="label label-danger">错误标签</span><!--红色-->

9. 徽章（如有一条消息，在导航上的通知）

徽章效果，使用“badge”样式来实现。
使用方法：

<li><a href="#">Inbox<span class="badge">42</span></a></li>

九、缩略图

  • 通过“thumbnail”样式配合bootstrap的网格系统来实现
  • 在仅有缩略图的基础上，添加了一个div，class为“caption“的容器，在这个容器中放置其他内容，比如说标题，文本描述，按钮等
<div class="container">
    <div class="row">
		<div class="col-xs-6 col-md-3">
			<a href="#" class="thumbnail"><!--设置thumbnail样式-->
				<img>
			</a>
			<div class="caption">
				<h3>Bootstrap框架系列教程</h3><!--文本-->
				<p><a href="##" class="btn btn-primary">开始学习</a><!--按钮--></p>
			</div> 
		</div>
		<div class="col-xs-6 col-md-3">
			<a href="#" class="thumbnail">
				<img>
			</a>
		</div>
	</div>
</div>

十、警示框

1. 普通警示框

Bootstrap框架通过“alert“样式来实现警示框效果。在默认情况之下，提供了四种不同的警示框效果：

  • 1、成功警示框：告诉用用户操作成功，在“alert”样式基础上追加“alert-success”样式，绿色；
  • 2、信息警示框：给用户提供提示信息，在“alert”样式基础上追加“alert-info”样式，浅蓝色；
  • 3、警告警示框：提示用户小心操作（提供警告信息），在“alert”样式基础上追加“alert-warning”样式，浅黄色；
  • 4、错误警示框：提示用户操作错误，在“alert”样式基础上追加“alert-danger”样式，浅红色

使用方法：
在类名为“alert”的div容器里放置提示信息，在“alert”基础上追加对应的类名，实现不同类型警示框

<div class="alert alert-success" role="alert">恭喜您操作成功！</div>

2. 加入关闭按钮

  • 1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。
  • 2、在button标签中加入class="close"类，实现警示框关闭按钮的样式。
  • 3、要确保关闭按钮元素上设置了自定义属性：“data-dismiss="alert"（因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭）。
<div class="alert alert-success alert-dismissable">
    <button class="close" type="button" data-dismiss="alert">&times;</button><!--实现关闭-->
    恭喜您操作成功！<a href="#" class="alert-link">回首页</a><!--加入链接-->
</div>

3. 加入链接

Bootstrap框架是通过给警示框加的链接添加一个名为“alert-link”的类名，通过“alert-link”样式给链接提供高亮显示。

十一、进度条

  • 进度条需要使用两个容器，外容器使用“progress”样式，子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式，而progress-bar用于限制进度条的进度。
  • 进度条样式(在子容器中加入对应的class即可，不加默认深蓝色)：
    • progress-bar-info：表示信息进度条，蓝色
    • progress-bar-success：表示成功进度条，绿色
    • progress-bar-warning：表示警告进度条，黄色
    • progress-bar-danger：表示错误进度条，红色
  • 条纹进度条：在进度条的容器“progress”基础上增加类名“progress-striped”，或者在内部容器中加入类名“progress-bar-striped”
  • 动态条纹进度条：在进度条“progress progress-striped”两个类的基础上再加入“active”类名
  • 层叠进度条：将不同状态的进度条放置在一起，按水平方式排列，实现层叠效果。注意，层叠进度条宽度之和不能大于100%
<div class="progress progress-striped active"><!--设置动态的条纹进度条-->
	<div class="progress-bar progress-bar-success" style="width:40%"></div><!--设置进度条样式-->
	<!--只给这段进度条设置条纹样式，并且显示进度的百分比数字-->
	<div class="progress-bar progress-bar-info progress-bar-striped" style="width:10%">10%</div>
</div>
  • 进度条带Label（xx%）：只需要在内部div中添加对应的数字即可，对0%已经做过处理

十二、媒体对象

1. 简单的媒体对象

媒体对象一般是成组出现，而一组媒体对象常常包括以下几个部分：

  • 媒体对象的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容
  • 媒体对象的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片
  • 媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容
  • 媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选
    在这里插入图片描述
  • 在Bootstrap框架中还常常使用“pull-left”或者“pull-right”来控制媒体对象中的对象浮动方式。
<div class="media"><!--外部容器-->
    <a class="pull-left" href="#">
    	<!--容器对象-->
    	<img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="...">
  	</a>
  	<div class="media-body"><!--对象主体-->
    	<h4 class="media-heading">系列：十天精通CSS3</h4><!--标题-->
    	<div>全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！</div><!--正文-->
    	<div class="media"> ...... </div><!--媒体对象的嵌套-->
  	</div>
</div>

1. 媒体对象列表

在写结构的时候可以使用ul，并且在ul上添加类名“media-list”，而在li上使用“media”

<ul class="media-list">
    <li class="media">
        <a class="pull-left" href="#">
            <img class="media-object" src=" " alt="...">
        </a>
        <div class="media-body">
            <h4 class="media-heading">Media Header</h4>
            <div>…</div>
        </div>
    </li>
    <li class="media">…</li>
    <li class="media">…</li>
</ul>

十三、列表组

  • 基础列表组，看上去就是去掉了列表符号的列表项，并且配上一些特定的样式。在Bootstrap框架中的基础列表组主要包括两个部分：
    • list-group：列表组容器，常用的是ul元素，当然也可以是ol或者div元素
    • list-group-item：列表项，常用的是li元素，当然也可以是div元素
  • 带徽章的列表组：
    • 只需要在“list-group-item”中添加徽章组件“badge”
  • 带链接的列表组
    • 在基础列表组的基础上，给列表项的文本添加链接，链接的点击区域只在文本上有效
    • 在列表项的任何区域都具备可点击：将ul.list-group使用div.list-group来替换，而li.list-group-item直接用a.list-group-item来替换。
  • 自定义列表组：Bootstrap框加在链接列表组的基础上新增了两个样式：
    • list-group-item-heading：用来定义列表项头部样式
    • list-group-item-text：用来定义列表项主要内容
  • 状态效果：在对应的列表项中添加类名：
    • active：表示当前状态（深蓝色）
    • disabled：表示禁用状态（灰色）
  • 列表组风格：
    • 在“list-group-item”基础上增加对应的类名
      • list-group-item-success：成功，背景色绿色
      • list-group-item-info：信息，背景色蓝色
      • list-group-item-warning：警告，背景色为黄色
      • list-group-item-danger：错误，背景色为红色
<ul class="list-group"><!--列表组容器-->
    <li class="list-group-item"><span class="badge">456</span>揭开CSS3的面纱</li><!--带徽章的列表项-->
	<li class="list-group-item"><a href="##">CSS3选择器</a></li><!--带链接的列表项，点击区域只在文本上有效-->
	<li class="list-group-item">CSS3边框</li>
	<li class="list-group-item list-group-item-warning">CSS3背景</li><!--警告风格的列表项-->
	<li class="list-group-item">CSS3文本</li>
</ul>
<div class="list-group">
	<a href="##" class="list-group-item">图解CSS3</a><!--带链接的列表项，在列表项的任何区域都具备可点击-->
	<a href="##" class="list-group-item"><span class="badge">220</span>Sass教程</a><!--带徽章和链接的列表项-->
	<a href="##" class="list-group-item"><!--自定义列表项-->
		<h4 class="list-group-item-heading">图解CSS3</h4><!--定义列表的头部样式-->
		<p class="list-group-item-text">详细讲解了选择器、边框、...</p><!--定义列表项的主要内容-->
	</a>
</div>

十四、面板

一般情况下可以把面板理解为一个区域，在使用面板的时候，都会在panel-body放置需要的内容，可能是图片、表格或者列表等。

  • 外部div容器运用了“panel”样式，产生一个具有边框的文本显示块。由于“panel”不控制主题颜色，所以在“panel”的基础上增加一个控制颜色的主题“panel-default”，另外在里面添加了一个“div.panel-body”来放置面板主体内容
  • 设置面板的头部和尾部：
    • panel-heading：用来设置面板头部样式
    • panel-footer：用来设置面板尾部样式
  • 主题样式除了有“panel-default”之外，还有：
    • panel-primary：重点蓝
    • panel-success：成功绿
    • panel-info:信息蓝
    • panel-warning：警告黄
    • panel-danger：危险红
<div class="panel panel-default">
	<div class="panel-heading">图解CSS3</div>
    <div class="panel-body">我是一个基础面板，带有默认主题样式风格</div>
    <table class="table table-bordered"></table><!--加入表格，也可以放到panel-body中-->
    <ul class="list-group"><!--加入列表组，也可以放到panel-body中-->
        <li class="list-group-item">我是列表项</li>
    </ul>
    <div class="panel-footer">作者：大漠</div>
</div>

十五、模态弹出框

1. 基本结构

Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分：

  • 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮
  • 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容
  • 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮
  • 两种尺寸：
    • 大尺寸样式“modal-lg”，
    • 小尺寸样式“modal-sm”
  • 为模态弹出框增加过度动画效果：
    • 可通过给“.modal”增加类名“fade”为模态弹出框增加一个过渡动画效果。
<!--声明式触发模态弹框-->
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通过data-target触发</button>
<!-- JS触发模态弹出窗元素 -->
<button class="btn btn-primary" id="btn" type="button">点击我</button>
<script type="text/javascript">
	$(function(){
	  $(".btn").click(function(){
	    $("mymodal-data").modal();
	  });
	});
</script>

<div class="modal fade" id="mymodal-data" tabindex="-1" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg"><!--大尺寸弹框-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">模态弹出窗标题</h4>
            </div>
            <div class="modal-body">
                <p>模态弹出窗主体内容</p>
            </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-dialog -->
</div>

2. 触发弹框

(1) 声明式触发方法：

方法一：模态弹出窗声明，只需要自定义两个必要的属性：data-toggle和data-target（bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。比如data-toggle="" 或者 data-dismiss=""，比如上例中的按钮

  • 1、data-toggle必须设置为modal(toggle中文翻译过来就是触发器)；
  • 2、data-target可以设置为CSS的选择符，也可以设置为模态弹出窗的ID值，一般情况设置为模态弹出窗的ID值，因为ID值是唯一的值。
    方法二：触发模态弹出窗也可以是一个链接<a>元素，那么可以使用链接元素自带的href属性替代data-target属性。
(2) JS触发

通过给一个元素一个事件，来触发。比如说给一个按钮一个单击事件，然后触发模态弹出窗。如上例中第二个按钮

  • 使用JavaScript触发模态弹出窗时，Bootstrap框架提供了一些设置，主要包括属性设置、参数设置和事件设置。

    使用方法：
  • 比如你不想让用户按ESC键关闭模态弹出窗，你就可以这样做：
$(function(){
    $(".btn").click(function(){
        $("#mymodal").modal({
            keyboard:false
        });
    });
});

在Bootstrap框架中还为模态弹出窗提供了三种参数设置，具体说明如下：

参数使用方法描述
toggle$(“#mymodal”).modal(“toggle”)发时，反转模态弹出窗的状态。如果模态弹出窗是显示的，则关闭；反之，如果模态弹出窗是关闭的，则显示
show$(“#mymodal”).modal(“show”)触发时，显示模态弹出窗
hide$(“#mymodal”).modal(“hide”)触发时，关闭模态弹出窗

事件设置：

  • 模态弹出窗还支持四种类型的事件，分别是模态弹出窗的弹出前、弹出后，关闭前、关闭后，具体描述如下：
事件类型描述
show.bs.modal在show方法调用时立即触发（尚未显示之前）；如果单击了一个元素，那么该元素将作为事件的relatedTarget属性
shown.bs.modal该事件在模态弹出窗完全显示给用户之后（并且等CSS动画完成之后）触发；如果单击了一个元素，那么该元素将作为事件的relatedTarget事件
hide.bs.modal在hide方法调用时（但还未关闭隐藏）立即触发
hidden.bs.modal该事件在模态弹出窗完全隐藏之后（并且CSS动画漂完成之后）触发
  • 调用方法也非常简单：
$('#myModal').on('hidden.bs.modal', function (e) {
    // 处理代码...
})

3. 自定义data属性

除了通过data-toggle和data-target来控制模态弹出窗之外，Bootstrap框架针对模态弹出框还提供了其他自定义data-属性
在这里插入图片描述

一名小码农
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap使用
m0_57774967的博客
04-24 5143
一、使用bootstrap步骤： 1.创建文件夹结构 2.创建html骨架结构 3.引入相关样式文件 4.书写内容（直接用bootstrap预先定义好的样式使用 修改bootstrap原来样式，注意权重问题） 要想学好bootstrap的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果 布局容器 bootstrap需要为页面内容和栅格系统包裹一个.container容器，bootstrap预先定义好这个类，叫.container，它提供...
bootstrap-4.6.2
06-13
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件、样式和JavaScript插件，用于快速构建响应式和移动优先的网页。标题"bootstrap-4.6.2"表明我们讨论的是Bootstrap框架的第4版中的第6次次要...
bootstrap的css和js文件
08-08
bootstrap的css和js文件、bootstrap的css和js文件、bootstrap的css和js文件
bootstrap4，css与js框架
weixin_43706224的博客
05-24 468
List item 拥有了container的类会变成响应式的；默认是有固定宽度的 col
Bootstrap的基本使用（css、js文件的引入）
很多时候犯错都是在不知情的情况下发生的
05-12 1710
使用Bootstrap需要引入官方的文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <!DOCTYPE html> <html> <head> ...
Flask-Bootstrap配置加载本地css与js文件
小韭菜的博客
07-13 1047
Flask-Bootstrap默认是加载CDN的css与js文件; 在开发环境中非常的糟糕每次刷新页面都要访问到外网的cdn来获取css与js文件; 查看包文件路径位置 ```python >>>fromflask.ext.bootstrapimportBootstrap >>>import inspect >>>printinspect.getsource(Bootstrap) ``` 下面配置Flask-Bootstrap启用加载本地
怎么在页面里引入bootstrap的css和js文件呢？
weixin_34245749的博客
11-28 561
怎么在页面里引入bootstrap的css和js文件呢？ 这是一个nodejs+express工程 在npm install之后或使用npm install bootstrap命令安装bootstrap之后，怎么在views/index.ejs文件中引入bootstrap.css文件呢？ 在app.js里面引入这句 app.use("/lib",express.s...
Bootstrap简介
归兮的博客
08-18 8554
bootstrap是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件，bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。Bootstrap 4 概览_Bootstrap中文网什么是组件组件是一个抽象的概念，是对数据和方法的简单封装。用面向对象思想来说，将一些符合某种规范的类组合在一起就构成了组件，通过组件可以为用户提供某些特定的功能。...
bootstrap的安装
12-05 1747
再vue中用npm安装1)、使用指令 2)、安装成功后，能够在package.json文件夹中看到bootstrap这个模块。这时候需要在main.js中添加如下内容: 至此bootStrap也引入结束，接下来我们的重点来了，因为BootStrap与VUE有一个专门的设计叫做bootstrap-vue.js，所以我们引入它之后就可以直接使用它们提供的专有样式，比原生的bootStrap要好看很多3)、使用指令:4)、在main.js文件中添加:
bootstrap datetimepicker
lishuaigell的博客
05-17 5186
效果预览 我们先来看一下效果 可以看到这款插件的功能很强大，涵盖了十年视图，年视图，月视图，甚至小时视图，分钟视图都有，几乎能够满足大部分人的需要。不仅如此，还有完善的中文文档，方便我们个性化设置噢，我们一起去看看吧！ datetimepicker 官方文档： http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 插件下载地址： https://github.com/smalot/bootstrap-datetimepicker/archiv
bootstrap网页作业
m0_62221227的博客
04-19 5032
bootstrap网页作业
bootstrap-4.3.1
06-30
在2018年1月下旬，Bootstrap团队发布了Bootstrap 4 正式版，4的最主要变化包括以下方面： 从 Less 迁移到 Sass 改进网格系统 缺省弹性框支持 Dropped wells, thumbnails, and panels for cards 合并所有 ...
bootstrap旅游网站
最新发布
02-09
Bootstrap是世界上最流行的前端开发框架之一，尤其在构建响应式、移动优先的网页设计时，它提供了丰富的组件和样式。"Bootstrap旅游网站"项目显然利用了Bootstrap的强大功能来创建一个专门针对旅游业的网站模板。...
bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js
11-12
在"bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js"的标题中，我们可以看到两个关键文件：`bootstrap.min.css`和`bootstrap.bundle.min.js`。`bootstrap.min.css`是Bootstrap的核心CSS文件，经过压缩...
Bootstrap5 图标库 bootstrap-icons
09-30
Bootstrap5图标库bootstrap-icons是前端开发中一个非常实用的资源，它为开发者提供了大量美观、一致的SVG图标，可以方便地集成到Bootstrap5项目中，为网页设计增添丰富的视觉元素。Bootstrap图标库的设计理念是简洁...
bootstrap引入的css和js
weixin_34088598的博客
08-11 813
2019独角兽企业重金招聘Python工程师标准>>> ...
从前台导入/导出数据到Excel实现（HSSF）
一名小码农的博客
11-25 2327
从前台导入/导出数据库数据实现（java） 一、导出 用户在浏览器主页面，通过选中从数据库中取出的记录，点击"导出"，把所有符合条件的数据生成一个excel文件，输出到浏览器；激活文件下载的对话框，用户选择要保存目录，完成导出数据的功能。 使用java生成excel文件：这里处理办公文档的插件使用的是apache-poi 1. 依赖 <!--poi--> <dependenc...
@RequestBody注解使用
一名小码农的博客
11-22 1945
文章目录RequestBody注解使用关键点注意点一个小例子ajax代码后台接收 RequestBody注解使用关键点 注意点 项目中要加入处理json字符串的依赖（jar包），如jackson @RequestBody主要用来接收前端传递给后端的json字符串中的数据的(请求体中的数据的)，所以只能发送POST请求 jQuery中，$.ajax()默认发送的参数类型及编码为：applicati...
bootstrap
06-01
, int size) { this.name = name; this.color = color; this.size = size; } public String getName() { return name; } public void setName(String name) { this.name = name; } public StringBootstrap是一个开源的前端框架，它基于HTML、CSS、JavaScript开发，旨在帮助开发者快速构建现代化的响应式网站和Web应用程序。Bootstrap提供了一系列的CSS样 getColor() { return color; } public void setColor(String color) { this.color = color; } public int式和JavaScript插件，可以用于常见的UI组件、布局和交互效果，从而简化开 getSize() { return size; } public void setSize(int size) { this.size = size; } } ``` 发过程，提高开发效率。Bootstrap最初由Twitter的前端工程师开发，现已成为最流行的前端框架之一。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值