bootstrap（二）

最新推荐文章于 2022-06-05 23:08:50 发布

月照平沙

最新推荐文章于 2022-06-05 23:08:50 发布

阅读量211

点赞数

本文链接：https://blog.csdn.net/qq_37027215/article/details/80248914

版权

一、创建导航系统

1.简单导航

.nav-pills 小按钮

.nav-tabs 选项卡

.nav-stacked 搭配上面其中一个，创建垂直导航

<nav>
  <ul class="nav nav-tabs">
    <li role="presentation" class="active"></li>
    <li role=""></li>
  </ul>
</nav>

2.下拉菜单

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle"  data-toggle="dropdown">chose
  <span class="carset"></span>
  </button>
  <ul class="dropdown-menu">
   </ul>
</div>

下拉菜单的类

.dropdown-menu-left（菜单左对齐于容器） .dropdown-header（标题菜单项）

.divider（菜单内创建一个分隔符） .disabled禁用菜单项

3.上拉式变种

将.dropup应用到按钮组容器上

4.导航栏

<nav class="navbar navbar-default">
  <div class="container-fluid">
  <!--navbar-header标题-->
    <div class="navbar-header">
	<!--navbar-toggle collapsed表示这是一个仅在导航栏处于折叠状态显示的开关按钮(默认右浮动）-->
	<!--data-toggle="collapse"告诉js元素是折叠的-->
	<!--data-target="#id"id元素将会折叠和展开-->
	  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#id">
	    <span class="sr-only">toggle</span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
	  </button>
	  <!--navbar-brand图标或品牌-->
	  <a class="navbar-brand">
	    <img>
	  </a>
	  <!--文本navbar-text，链接navbar-link，按钮navbar-btn，表单navbar-form-->
	  <p class="navbar-text">dany</p>
	</div>
	
	<div class="collapse navbar-collapse" id="id">
	定义各种展开后显示的组件
	</div>
  </div>

.navbar-inverse反转导航颜色

.navbar-static-top（删除底部内外边距，放在窗口顶部） .navbar-fixed-top（删除底部内外边距，固定在窗口顶部） .navbar-fixed-bottom（删除底部内外边距，固定在窗口底部）

.navbar-right .navbar-left 定位导航栏内元素

5.滚动监听

使导航突出显示客户所读取的准确区域

为<body>添加data-spy="scroll"属性和指向导航栏的容器（不能是ul）的data-target="#myNav"属性；

在样式表中添加body{position:relative;}

应用：$('body').scrollspy({target:"myNav});

6.面包屑导航

</ul>

7.分页

</ul>

上一页按钮

<span class="glyphicon glyphicon-arrow-left"></span>Previous

</a></li>

8.列表组

显示包含自定义内容的简单和复杂列表

</ul>

上下文类

.list-group-item-info .list-group-item-success .list-group-item-danger .list-group-item-warning

其他

.list-group-item-heading（创建标题） .list-group-item-text（创建文本）

二、实用工具

1.助手类

2.图标

.carset（^符号，上拉菜单自动反转） .close（x符号）

3.布局类 pull

4.显示和隐藏元素

sr-only（只对屏幕阅读器可见） sr-only-focusable（得到焦点时再次显示）

hidden-xs visible-xs-block

5.响应式嵌入

根据容器宽度嵌入视频和幻灯片

</>

三、使用bootstrap js插件

1.导入bootstap.js,jquery.js以及想要使用的插件

2.设置插件选项

参数形式

$('').tooltip({
  html:true,
  delay:200,
  trigger:"click"
})

数据属性形式（首选）

<button data-toggle="tooltip"   data-html="true"  data-delay="200"  data-trigger="click"  title="you did it">
click
</button>

在js中可以通过data("xx")得到设置的数据属性

缺点：

每个元素只能使用一个插件

一次只能为一个元素设置选项

不能使用复杂的json选项

jsAPI

$("").tooltip();

参数可以是：

无

选项对象,如{html:true}

针对特定方法的字符串，如"toggle",立即调用toggle();

四、模态窗口

在特定时间内强制用户交互（类似消息窗口）

1.创建

  
  <div class="modal fade（可选，淡入）" id="id">
    <div class="modal-dialog modal-lg（可选，大小）">
	  <div class="modal-content">
	  <!--以下是可选的-->
	  <!--页眉或顶部，应包含一个关闭按钮和标题-->
	    <div class="modal-header">
		  <button class="close" data-dismiss="modal"  aria-label="Close"></button>
		  <h3 class="modal-title"></h3>
		</div>
		
		<div class="modal-body"></div>
		<div class="modal-footer"></div>
		
	  </div>
	</div>
  </div>

2.触发器

$("id").modal();

参数：

backdrop:是否应该有一个背景,默认是true；

keyboard:是否可以用Esc键关闭模态窗口（true/false）

show:是否在初始化时显示（true/false）

数据属性

bootstrap modal 模态框弹出瞬间消失的问题

原问题链接 http://www.oschina.net/question/872916_165747

提供一个小例子说明。

Launch demo modal

</button>

注意红字部分type="button"，在需要触发的按钮处，加入这一段就好了。

五、工具提示和弹出框

工具提示

通常悬停或焦点触发

1.工具提示是在触发元素旁边出现的小文本快

2.定义：data-toggle="tooltip" title=""

3.初始化：$('').tooltip();

弹出框

通常单击触发

1.定义：data-toggle="popover" title="标题" data-content="内容"

2.初始化：$("").popover();

3.在下一次单击时消失或出现:

使用<a>标记
role="button"
tabindex="0"

六、按钮、警告框、进度条

按钮

1.按钮状态

$().button("toggle"）切换按钮状态，显示为激活或失效

$().button("reset"）重置按钮状态，改回原始文本

$().button(string）按钮文本切换成字符串定义的data-属性，如：

$().button('loading')指向data-loading-text="";

2.切换按钮

<button data-toggle="button"> 在切换按钮时将其设置为“已点击”和未点击；

被<label class="btn btn-primary">包围的单选框或复选框

</div>

警告框

1.创建

<div class="alert alert-success(必须上下文) alert-dismissible（可撤销）"> role="alert"></div>

2.关闭按钮

3.警告框内的链接

.alert-link

进度条

1.创建

<div class="progress">
  <div class="progress-bar role="progress"  aria-valuenow="20"  aria-valuemin="0"  aria-valuemax="100" style="width:20%;min-width:2em"(为标签保留空间)></div>
</div>

2.上下文类

.progress-bar-success/info/warning/danger

七、折叠插件

1.创建一个可折叠部分

<a  class="btn btn-default"  data-toggle="collapse" href="#id"></a>
<article id="id"  class="collapse"></article>

如果希望可折叠元素一开始是打开的，可使用class="collapse in"

2.水平折叠元素

如果使用了collapse插件，可添加.width

3.parent取得父元素的选择符

4.折叠面板

多个可折叠部分，某个打开，其他部分自动关闭

<div class="panel-group"  role="tablist"  id="parentId">
  <div class="panel  panel-default">
      <div class="panel-heading" role="tab"  id="more">
          <a data-toggle="collapse"  data-parent="#parentId"  href="content1"></a>
       </div>
       <div id="content1"  class="panel-collapse  collapse"  role="tabpanel>
          <div  class="panel-body">
          </div>
        </div> 
  </div>
下一个面板
</div>

八、轮播

1.创建轮播

定义轮播

轮播指标（下面的小点）

<ol class="carousel-indicators">

  <li  data-target="#id"  data-slide-to="0">

  <li  data-target="#id"  data-slide-to="1">

</ol>

幻灯片

<div class="carousel-inner"  role="listbox">
    <div  class="item  active(当前显示的项)">

幻灯片内容（图片、文字、组件等）

  </div>

控件（上一个、下一个）

<a  class="left  carousel-control"  href="id"  role="button"  data-slide="prev">

  <span class="glyphicon glyphicon-chevron-left"</span>

 </a>

<a></a>

九、提高可访问性

WAI-ARIA（无障碍的网页应用技术）

定义了提高残疾人可访问性的一种手段

常用属性
aria-controls	该元素是控制元素
aria-describedby	描述文本的位置
aria-expanded	该元素是一个可拓展元素
aria-hidden	该元素隐藏
aria-invalid	无效的表单控件
aria-label	指向由其标记的元素ID
aria-press	处于.active状态的按钮被按下或者激活
role	该元素的目的
title	html属性