【笔记】Bootstrap入门视频-吴华-CSDN

其他 2020-05-18 11:41:33 阅读次数: 0

文章目录

Bootstrap入门-吴华的在线视频教程-CSDN学院

第一章：bootstrap基本标签样式

  • 新建文件，另存为命名为文件名.html，输入英文状态下的!，点击tab，自动生成html简单模板：
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
  • 输入ul>li{$}*5 + tab生成ul嵌套5个li的列表，每个li的内容为从1递增的数字
  • table>(thead>tr>th3)+(tbody>tr3>td*3)
  • div.table-responsive
  • css:
    • bg：background: #000;
    • bg+：background: #fff url() 0 0 no-repeat;
    • bd+：border: 1px solid #000;

标题

  • h1,h2,h3,h4,h5,h6
  • .h1,.h2,.h3,.h4,.h5,.h6

段落

文字
  • em,strong,i
文字颜色
  • text-muted
  • text-success
  • text-info
  • text-danger
  • text-warning
  • text-primary
文字对齐
  • text-left【左对齐】
  • text-right【右对齐】
  • text-center【居中对齐】
  • text-justify【两端对齐】
  • .lead【加粗段落文本】

列表

  • 去点列表：.list-unstyled【给ul,ol加】
  • 内联列表：.list-inline【给ul,ol加】
  • 水平定义列表：.dl-horizontal【给dl加】

代码

  • pre风格
    • .pre-scollable
  • code
  • kbd：粘贴用CTRL+V
  • samp

< lt: less than

> gt: greater than

表格

  • .table【基础表格】
  • .table-bordered【带边框】
  • .table-striped【带斑马线】
  • .table-condensed【紧凑型】
  • .table-hover【鼠标悬浮高亮】
  • .table-responsive【响应式】
<div class="table-responsive">
	<table class="table .table-bordered">
	    ...
	</table>
</div>
  • .active 【鼠标悬停在行或单元格上时所设置的颜色】
  • .success 【标识成功或积极的动作】
  • .info 【标识普通的提示信息或动作】
  • .warning 【标识警告或需要用户注意】
  • .danger 【标识危险或潜在的带来负面影响的动作】

栅格系统

样式
[class *= col-]{
	background: #ccc;
	border: 1px solid #eee;
}[class *= col-][class *= col-]{
	background: #09c;
	border: 1px dashed #eee;
	color：#fff；
}
  • div.container>div.row>div.col-md-1{col-md-1}*12
  • div.container>div.row>div.col-md-3{col-md-3}*4
列偏移
  • col-md-offset-3【向左偏移3列】
  • div.container>div.row>div.col-md-6.col-md-offset-3{.col-md-6.col-md-offset-3}
  • margin实现
列排序
  • col-md-push-8【向左偏移8列】
  • col-md-pull-4【向右偏移4列】
  • 相对定位实现
列嵌套
  • div.container>div.row>div.col-md-8.col-md-offset-2>div.col-md-6{.col-md-8.col-md-offset-2>.col-md-6}*2

按钮

  • btn
  • btn-primary
  • btn-default
  • btn-success
  • btn-warning
  • btn-danger
  • btn-inverse
  • btn-link
  • btn-lg
  • btn-sm
  • btn-xs
  • btn-block
  • .disabled
  • input-lg
  • input-sm
btn.btn{按钮}
btn.btn.btn-default{default}
btn.btn.btn-success{success}
btn.btn.btn-warning{warning}
btn.btn.btn-danger{danger}
btn.btn.btn-primary{primary}
btn.btn.btn-info{info}
btn.btn.btn-inverse{inverse}
btn.btn.btn-lg{lg}
btn.btn.btn-sm{sm}
btn.btn.btn-xs{xs}
btn.btn.btn-block{block}
a.btn.btn-link{link}
input:text.input-lg
input:text.input-sm

图片

  • img-rounded【圆角】
  • img-circle【圆形】
  • img-thumbnail【缩略图】
  • img-responsive【响应式】

图标

  • span.glyphicon.glyphicon-search

警示框

  • div.alert.alert-success{alert-success}
  • div.alert.alert-info{alert-info}
  • div.alert.alert-danger{alert-danger}
  • div.alert.alert-warning{alert-warning}
可以移除的警示框
  • div.alert.alert-warning.alert-dismissable{alert-warning}>btn.close{×}
<div class="alert alert-warning alert-dismissable">
	alert-warning
	<button class="close" data-dismiss="alert">&times;</button>
</div>

缩略图

  • div.container>div.row>div.col-md-4.col-xs-6*12>img.img-thumbnail[src=“https://img-bss.csdn.net/20191112175512957.jpg”]+div.caption>h3{bootstrap框架学习}+p{bootstrap是一个很NB的框架，快来学习吧}+p>btn.btn.btn-primary{开始学习}+btn.btn.btn-info{查看详情}

表单

复选框
  • checkbox
  • checkbox-inline
  • div.container>div.row>div.col-md-4.col-md-offset-4>form>(div.form-group{邮箱：}>input:text.form-control)+(div.form-group{密码：}>input:password.form-control)+textarea.form-control[cols=“30” rows=“10”]
  • div.container>div.row>div.col-md-4.col-md-offset-1>select.form-control>option{$}*3
  • div.container>div.row>div.col-md-4.col-md-offset-1>select[multiple=“true”].form-control>option{$}*3
  • div.container>div.row>div.col-md-4.col-md-offset-4>form>(div.checkbox>lable>input:checkbox[name=“hobby”]{足球})+(div.checkbox>lable>input:checkbox[name=“hobby”]{篮球})+(div.radio>lable>input:radio[name=“sex”]{男})+(div.radio>lable>input:radio[name=“sex”]{女})
  • div.container>div.row>div.col-md-4.col-md-offset-4>form>(div.checkbox>(lable.checkbox-inline>input:checkbox[name=“hobby”]{足球})+(lable.checkbox-inline>input:checkbox[name=“hobby”]{篮球}))+(div.radio>(lable.radio-inline>input:radio[name=“sex”]{男})+(lable.radio-inline>input:radio[name=“sex”]{女}))
<div class="container">
	<div class="row">
		<div class="col-md-4 col-md-offset-4">
			<form action="">
				<div class="form-group">邮箱：<input type="text" class="form-control"></div>
				<div class="form-group">密码：<input type="password" class="form-control"></div>
				<textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>
			</form>
		</div>
	</div>
</div>

<div class="container">
	<div class="row">
		<div class="col-md-4 col-md-offset-1"><select name="" id="" class="form-control">
				<option value="">1</option>
				<option value="">2</option>
				<option value="">3</option>
			</select></div>
		<div class="col-md-4 col-md-offset-1"><select name="" id="" class="form-control" multiple="true">
				<option value="">1</option>
				<option value="">2</option>
				<option value="">3</option>
			</select></div>
	</div>
</div>

<div class="container">
	<div class="row">
		<div class="col-md-4 col-md-offset-4">
			<form action="">
				<div class="checkbox">
					<lable><input type="checkbox" name="hobby" id="">足球</lable>
				</div>
				<div class="checkbox">
					<lable><input type="checkbox" name="hobby" id="">篮球</lable>
				</div>
				<div class="radio">
					<lable><input type="radio" name="sex" id="">男</lable>
				</div>
				<div class="radio">
					<lable><input type="radio" name="sex" id="">女</lable>
				</div>
			</form>
		</div>
	</div>
</div>

<div class="container">
	<div class="row">
		<div class="col-md-4 col-md-offset-4">
			<form action="">
				<div class="checkbox">
					<lable class="checkbox-inline"><input type="checkbox" name="hobby" id="">足球</lable>
					<lable class="checkbox-inline"><input type="checkbox" name="hobby" id="">篮球</lable>
				</div>
				<div class="radio">

					<lable class="radio-inline"><input type="radio" name="sex" id="">男</lable>
					<lable class="radio-inline"><input type="radio" name="sex" id="">女</lable>
				</div>
			</form>
		</div>
	</div>
</div>
表单验证状态
  • div.container>div.row>div.col-md-6.col-md-offset-3>form>(div.form-group.has-success.has-feedback>label.control-label{成功状态}+input:text.form-control[placeholder=“成功状态”]+span.help-block{您输入的信息正确}+span.glyphicon.glyphicon-ok.form-control-feedback)+(div.form-group.has-error.has-feedback>label.control-label{错误状态}+input:text.form-control[placeholder=“错误状态”]+span.help-block{您输入的信息错误}+span.glyphicon.glyphicon-remove.form-control-feedback)+(div.form-group.has-warning.has-feedback>label.control-label{警告状态}+input:text.form-control[placeholder=“警告状态”]+span.help-block{您输入的信息有误}+span.glyphicon.glyphicon-warning-sign.form-control-feedback)
<div class="container">
		<div class="row">
			<div class="col-md-6 col-md-offset-3">
				<form action="">
					<div class="form-group has-success has-feedback">
						<label for="" class="control-label">成功状态</label>
						<input type="text" name="" id="" class="form-control" placeholder="成功状态">
						<span class="help-block">您输入的信息正确</span>
						<span class="glyphicon glyphicon-ok form-control-feedback"></span>
					</div>
					<div class="form-group has-error has-feedback">
						<label for="" class="control-label">错误状态</label>
						<input type="text" name="" id="" class="form-control" placeholder="错误状态">
						<span class="help-block">您输入的信息错误</span>
						<span class="glyphicon glyphicon-remove form-control-feedback"></span>
					</div>
					<div class="form-group has-warning has-feedback">
						<label for="" class="control-label">警告状态</label>
						<input type="text" name="" id="" class="form-control" placeholder="警告状态">
						<span class="help-block">您输入的信息有误</span>
						<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
					</div>
				</form>
			</div>
		</div>
	</div>

下拉菜单

  • div.dropdown>(button.btn.btndefault.dropdown-toggle[data-toggle=“dropdown”]{下拉菜单}>span.caret)+ul.dropdown-menu>(li>a[href="#"]{下拉菜单项})*6

    • 【右对齐】
    • 【右对齐】（可能需要搭配`float:left;`）
    • 【左对齐】（默认）

  • div.dropdown>(button.btn.btndefault.dropdown-toggle[data-toggle=“dropdown”]{下拉菜单}>span.caret)+ul.dropdown-menu>li.dropdown-header{菜单头部一}+(li>a[href="#"]{下拉菜单1项})*3+li.dropdown-header{菜单头部二}+(li>a[href="#"]{下拉菜单2项})*3+li.divider+(li>a[href="#"]{下拉菜单项})

  • div.container>div.row>div.btn-group>btn.btn.btn-default{首页}+btn.btn.btn-default{HTML}+btn.btn.btn-default{JS}+btn.btn.btn-default{CSS3}+(div.btn-group>(btn.btn.btn-default.dropdown-toggle[data-toggle=“dropdown”]{程序设计语言}>span.caret)+(ul.dropdown-menu>(li>a[href="#"]{HTML})+(li>a[href="#"]{CSS})+(li>a[href="#"]{JS})))

基本样式
<div class="dropdown">
	<button class="btn btndefault dropdown-toggle" data-toggle="dropdown">下拉菜单<span class="caret"></span></button>
	<ul class="dropdown-menu">
		<li><a href="#">下拉菜单项</a></li>
		<li><a href="#">下拉菜单项</a></li>
		<li><a href="#">下拉菜单项</a></li>
		<li><a href="#">下拉菜单项</a></li>
		<li><a href="#">下拉菜单项</a></li>
		<li><a href="#">下拉菜单项</a></li>
	</ul>
</div>
带小标题的下拉菜单
<div class="dropdown">
	<button class="btn btndefault dropdown-toggle" data-toggle="dropdown">下拉菜单<span class="caret"></span></button>
	<ul class="dropdown-menu">
		<li class="dropdown-header">菜单头部一</li>
		<li><a href="#">下拉菜单1项</a></li>
		<li><a href="#">下拉菜单1项</a></li>
		<li><a href="#">下拉菜单1项</a></li>
		<li class="dropdown-header">菜单头部二</li>
		<li><a href="#">下拉菜单2项</a></li>
		<li><a href="#">下拉菜单2项</a></li>
		<li><a href="#">下拉菜单2项</a></li>
		<li class="divider"></li>
		<li><a href="#">下拉菜单项</a></li>
	</ul>
</div>
带下拉菜单的按钮组
<div class="container">
	<div class="row">
		<div class="btn-group">
			<button class="btn btn-default">首页</button>
			<button class="btn btn-default">HTML</button>
			<button class="btn btn-default">JS</button>
			<button class="btn btn-default">CSS3</button>
			<div class="btn-group">
				<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">程序设计语言<span class="caret"></span></button>
				<ul class="dropdown-menu">
					<li><a href="#">HTML</a></li>
					<li><a href="#">CSS</a></li>
					<li><a href="#">JS</a></li>
				</ul>
			</div>
		</div>
	</div>
</div>
  • btn-group-vertical【垂直按钮组】
  • btn-group-justified【等分按钮组】（子元素必须是a标签）

div.container>div.row>div.btn-group.btn-group-justified>a.btn.btn-default{首页}+a.btn.btn-default{HTML}+a.btn.btn-default{JS}+a.btn.btn-default{CSS3}

<div class="container">
	<div class="row">
		<div class="btn-group btn-group-justified">
			<a href="" class="btn btn-default">首页</a>
			<a href="" class="btn btn-default">HTML</a>
			<a href="" class="btn btn-default">JS</a>
			<a href="" class="btn btn-default">CSS3</a>
		</div>
	</div>
</div>
  • 【上拉菜单】

导航栏

  • .nav-tabs【标签导航栏】
  • ul.nav.nav-tabs>(li>a[href="#"]{html课程})+(li.disabled>a[href="#"]{css课程})+(li>a[href="#"]{js课程})+(li.active>a[href="#"]{bootstrap课程})+(li>a[href="#"]{jquery课程})
<ul class="nav nav-tabs">
	<li><a href="#">html课程</a></li>
	<li class="disabled"><a href="#">css课程</a></li>
	<li><a href="#">js课程</a></li>
	<li class="active"><a href="#">bootstrap课程</a></li>
	<li><a href="#">jquery课程</a></li>
</ul>
  • .nav-pills【胶囊导航栏】
  • ul.nav.nav-pills>(li>a[href="#"]{html课程})+(li.disabled>a[href="#"]{css课程})+(li>a[href="#"]{js课程})+(li.active>a[href="#"]{bootstrap课程})+(li>a[href="#"]{jquery课程})
<ul class="nav nav-pills">
		<li><a href="#">html课程</a></li>
		<li class="disabled"><a href="#">css课程</a></li>
		<li><a href="#">js课程</a></li>
		<li class="active"><a href="#">bootstrap课程</a></li>
		<li><a href="#">jquery课程</a></li>
	</ul>
  • .nav-stacked【垂直导航栏】
  • ul.nav.nav-pills.nav-stacked>(li>a[href="#"]{html课程})+(li.disabled>a[href="#"]{css课程})+(li>a[href="#"]{js课程})+(li.active>a[href="#"]{bootstrap课程})+(li>a[href="#"]{jquery课程})
<ul class="nav nav-pills nav-stacked">
		<li><a href="#">html课程</a></li>
		<li class="disabled"><a href="#">css课程</a></li>
		<li><a href="#">js课程</a></li>
		<li class="active"><a href="#">bootstrap课程</a></li>
		<li><a href="#">jquery课程</a></li>
	</ul>
  • .nav-justified【等分导航栏】
  • ul.nav.nav-pills.nav-justified>(li>a[href="#"]{html课程})+(li.disabled>a[href="#"]{css课程})+(li>a[href="#"]{js课程})+(li.active>a[href="#"]{bootstrap课程})+(li>a[href="#"]{jquery课程})
<ul class="nav nav-pills nav-justified">
		<li><a href="#">html课程</a></li>
		<li class="disabled"><a href="#">css课程</a></li>
		<li><a href="#">js课程</a></li>
		<li class="active"><a href="#">bootstrap课程</a></li>
		<li><a href="#">jquery课程</a></li>
	</ul>
  • ul.breadcrumb【面包屑导航】
  • ul.breadcrumb>(li>a[href="#"]{html课程})+(li>a[href="#"]{css课程})+(li>a[href="#"]{js课程})+(li>a[href="#"]{bootstrap课程})+(li>a[href="#"]{jquery课程})
<ul class="breadcrumb">
		<li><a href="#">html课程</a></li>
		<li><a href="#">css课程</a></li>
		<li><a href="#">js课程</a></li>
		<li><a href="#">bootstrap课程</a></li>
		<li><a href="#">jquery课程</a></li>
	</ul>

导航条

带搜索框
  • div.navbar.navbar-default>(div.navbar-header>a.navbar-brand[href="#"]{Bootstrap教程})+(ul.nav.navbar-nav>(li>a[href="#"]{html课程})+(li.disabled>a[href="#"]{css课程})+(li>a[href="#"]{js课程})+(li.active>a[href="#"]{bootstrap课程})+(li.dropdown>(a.dropdown[href="#" data-toggle=“dropdown”]{jquery课程}>span.caret)+ul.dropdown-menu>(li>a[href="#"]{html})*3))+(form.navbar-form.navbar-left>(div.form-group>input:text.form-control[placeholder=“请输入关键字”])+input:submit.btn.btn-primary[value=“搜索”])
<div class="navbar navbar-default">
	<div class="navbar-header"><a href="#" class="navbar-brand">Bootstrap教程</a></div>
	<ul class="nav navbar-nav">
		<li><a href="#">html课程</a></li>
		<li class="disabled"><a href="#">css课程</a></li>
		<li><a href="#">js课程</a></li>
		<li class="active"><a href="#">bootstrap课程</a></li>
		<li class="dropdown">
			<a href="#" class="dropdown" data-toggle="dropdown">jquery课程<span class="caret"></span></a>
			<ul class="dropdown-menu">
				<li><a href="#">html</a></li>
				<li><a href="#">html</a></li>
				<li><a href="#">html</a></li>
			</ul>
		</li>
	</ul>
	<form action="" class="navbar-form navbar-left">
		<div class="form-group"><input type="text" name="" id="" class="form-control" placeholder="请输入关键字"></div>
		<input type="submit" value="搜索" class="btn btn-primary">
	</form>
</div>
  • .navbar-inverse【反色导航条】
  • a.navbar-text【导航条上的文本】
  • div.navbar.navbar-inverse>(div.navbar-header>a.navbar-brand[href="#"]{Bootstrap教程})+(ul.nav.navbar-nav>(li>a[href="#"]{html课程$})*3+(form.navbar-form.navbar-left>(div.form-group>input:text.form-control[placeholder=“请输入关键字”])+input:submit.btn.btn-primary[value=“搜索”])+a.navbar-text[href="#"]{导航条上的文本}*3)
<div class="navbar navbar-inverse">
	<div class="navbar-header"><a href="#" class="navbar-brand">Bootstrap教程</a></div>
	<ul class="nav navbar-nav">
		<li><a href="#">html课程1</a></li>
		<li><a href="#">html课程2</a></li>
		<li><a href="#">html课程3</a></li>
		<form action="" class="navbar-form navbar-left">
			<div class="form-group"><input type="text" name="" id="" class="form-control" placeholder="请输入关键字"></div>
			<input type="submit" value="搜索" class="btn btn-primary">
		</form>
		<a href="#" class="navbar-text">导航条上的文本</a>
		<a href="#" class="navbar-text">导航条上的文本</a>
		<a href="#" class="navbar-text">导航条上的文本</a>
	</ul>
</div>

分页

  • ul.pager>(li.previous>a[href="#"]{上一页})+(li.next>a[href="#"]{下一页})
<ul class="pager">
	<li class="previous"><a href="#">上一页</a></li>
	<li class="next"><a href="#">下一页</a></li>
</ul>
  • ul.pagination.pagination-lg>(li>a[href="#"]{«第一页})+(li>a[href="#"]{$}*2)+(li.active>a[href="#"]{3})+(li>a[href="#"]{4})+(li.disabled>a[href="#"]{最后一页»})
<ul class="pagination">
	<li><a href="#">&laquo;上一页</a></li>
	<li><a href="#">1</a><a href="#">2</a></li>
	<li class="active"><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li class="disabled"><a href="#">下一页&raquo;</a></li>
</ul>

标签

  • span.label.label-default{默认标签}
  • span.label.label-primary{主要标签}
  • span.label.label-info{信息标签}
  • span.label.label-warning{警告标签}
  • span.label.label-danger{危险标签}
  • span.label.label-success{成功标签}
<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>
<span class="label label-success">成功标签</span>

徽章

  • badge
  • btn.btn.btn-primary{收件箱}>span.badge{20}
  • a[href="#"]{收件箱}>span.badge{20}
<button class="btn btn-primary">收件箱<span class="badge">20</span></button>
<a href="#">收件箱<span class="badge">20</span></a>

列表组

  • ul.list-group>li.list-group-item{列表组项}*5
<ul class="list-group">
	<li class="list-group-item">列表组项</li>
	<li class="list-group-item">列表组项</li>
	<li class="list-group-item">列表组项</li>
	<li class="list-group-item">列表组项</li>
	<li class="list-group-item">列表组项</li>
</ul>
  • 情境组
    • list-group-item-success
    • list-group-item-info
    • list-group-item-warning
    • list-group-item-danger
  • 定制内容
    • list-group-item-heading
    • list-group-item-text

面板

组件 · Bootstrap v3 中文文档

<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>
<div class="panel panel-success">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>
<div class="panel panel-info">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>
<div class="panel panel-warning">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>
<div class="panel panel-danger">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

模态框

JavaScript 插件 · Bootstrap v3 中文文档

  • btn.btn.btn-primary#btn[data-toggle=“modal” data-target="#pop-window" data-backdrop=“static”]{弹出模态框}+(div.modal.fade#pop-window>div.modal-dialog>div.modal-content>(div.modal-header>btn.close[data-dismiss=“modal”]{×}+div.modal-title{模态提示框})+div.modal-body{成功提示}+(div.modal-footer>btn.btn.btn-default[data-dismiss=“modal”]{关闭}+btn.btn.btn-primary{确定})
<button class="btn btn-primary" id="btn" data-toggle="modal" data-target="#pop-window" data-backdrop="static">弹出模态框</button>
  <div class="modal fade" id="pop-window">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" data-dismiss="modal">&times;</button>
          <div class="modal-title">模态提示框</div>
        </div>
        <div class="modal-body">成功提示</div>
        <div class="modal-footer"><button class="btn btn-default" data-dismiss="modal">关闭</button><button class="btn btn-primary">确定</button></div>
      </div>
    </div>
  </div>
  • js触发
$(function(){
    $("#btn").on("click",function(){
        $("#pop-window").modal("show");
    });
    // 自动加载
    $("#pop-window").modal();
});

滚动监听

JavaScript 插件 · Bootstrap v3 中文文档

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

工具提示框

JavaScript 插件 · Bootstrap v3 中文文档

按钮实现

JavaScript 插件 · Bootstrap v3 中文文档

选项卡

JavaScript 插件 · Bootstrap v3 中文文档

折叠

JavaScript 插件 · Bootstrap v3 中文文档

手风琴
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#part1">
          第一部分
        </a>
      </h4>
    </div>
    <div id="part1" class="panel-collapse collapse in">
      <div class="panel-body">
        第一部分内容
      </div>
    </div>
  </div>
 
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#part2">
          第二部分
        </a>
      </h4>
    </div>
    <div id="part2" class="panel-collapse collapse in">
      <div class="panel-body">
        第二部分内容
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#part3">
          第三部分
        </a>
      </h4>
    </div>
    <div id="part3" class="panel-collapse collapse in">
      <div class="panel-body">
        第三部分内容
      </div>
    </div>
  </div>
</div>

进度条

JavaScript 插件 · Bootstrap v3 中文文档

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

媒体对象

JavaScript 插件 · Bootstrap v3 中文文档

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

轮播图

JavaScript 插件 · Bootstrap v3 中文文档

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

附加导航

JavaScript 插件 · Bootstrap v3 中文文档

Bootstrap 附加导航（Affix）插件

HTML->Emmet语法篇_网络_weixin_40948696的博客-CSDN博客

【Emmet】HTML速写之Emmet语法规则_开发工具-CSDN博客

onc-virn
原创文章 60 获赞 216 访问量 3万+
关注 私信

猜你喜欢

转载自blog.csdn.net/qq_32682301/article/details/105524596
今日推荐
周排行
Leetcode简单题61~80
解决zookeeper磁盘IO高的问题
多线程相关方法详解
Maven-setting.xml文件详解
Maven 项目的 classpath 理解
渊亭科技大数据笔试题
配置JVM内存分配
计算机网络个人学习笔记 （三）网络层 ：第三部分 连载
js中两个等号(==)和三个等号(===)的区别
用C程序自动打开电脑上的程序
每日归档
更多
2024-09-18(0)
2024-09-17(0)
2024-09-16(0)
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)
2024-09-09(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022