bootstrap
19年,重新开始写
求学之路,泛结良师,广交益友
展开
-
Bootstrap实现响应式导航栏效果
效果图 实现代码<html> <head> <title>响应式导航栏</title> <meta http-equiv="content-Type" content="text/html;charset=utf-8" /> <!--Bootstrap CSS--> <link rel="stylesheet" href="b原创 2017-04-30 16:51:07 · 3553 阅读 · 2 评论 -
bootstrap的手风琴
<div class="container"> <div class="panel-group" id="mypanel"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-tit原创 2017-05-04 00:58:04 · 435 阅读 · 0 评论 -
bootstrap的按钮
设置按钮的点击事件1.当我们点击按钮时,可以使按钮处于loading状态:$(this).button("loading");并且显示该button里面的data-loading-text的值2.实际上我们可以设置任意的状态的值:data-*-text、以及$(this).button(*);不过loading的话,会让当前的按钮处于disabled状态下,不能被点击按钮异步加载实例 <div原创 2017-05-04 00:49:31 · 518 阅读 · 0 评论 -
bootstrap的tooltip提示
tooltip提示相关声明式属性的作用介绍data-toggle: tooltip固定值 data-original-title:目前来看貌似没啥大用 title:提示的内容 data-placement:指定提示显示的方向 <div class="container"> <button type="button" class="btn btn-default" data原创 2017-05-04 00:37:13 · 2674 阅读 · 0 评论 -
bootstrap的tab选项卡
<div class="container"> <ul class="nav nav-tabs"> <li class="active"><a href="#A" data-toggle="tab">公告</a></li> <li><a href="#B" data-toggle="tab">规则</a></li>原创 2017-05-04 00:15:43 · 1727 阅读 · 0 评论 -
bootstrap监听滚动
监听滚动应用场景像百度百科中的介绍目录就运用了监听滚动的功能 简述监听滚动基于链接的瞄点实现的,设置a链接的href为对应的div的id,点击该链接即可到达对应的位置bootstrap实现方式 bootstrap中,我们可以先创建一个导航栏,里面的每个li元素下的a链接的href都指向一个瞄点,然后定义一个div,包含所有的瞄点对应的div,外层div指定两个data-*声明式属性:data-ta原创 2017-05-03 23:38:52 · 590 阅读 · 0 评论 -
bootstrap对话框
bootstrap对话框特点1.固定浮动在浏览器中2.宽度自适应,而且水平居中3.当浏览器宽度小于768px时,对话框宽度为600px4.底部会有一个灰色的蒙层效果,用于禁止单击底层元素5.使用fade类样式可以让对话框显示过程有一个过渡效果基本结构1.class="modal": 指定对话框最外层样式2.class="modal-dialog":指定对话框第二层样式3.class="m原创 2017-05-03 23:00:51 · 3478 阅读 · 0 评论 -
bootstrap按钮组
按钮组基本类样式1.使用btn-group包含当前按钮分组中的所有按钮,组成一个按钮组 <div class="container"> <div class="btn-group"> <button class="btn btn-default">首页</button> <button class="btn btn-defaul原创 2017-05-03 19:56:48 · 343 阅读 · 0 评论 -
Bootstrap下拉菜单
下拉菜单概述下拉菜单使用了bootstrap里的data-*属性声明式触发,将所有的数据使用最外层容器dropdown包含,按钮指定dropdown-toggle样式,并声明data-toggle属性为dropdown,下拉菜单使用dropdown-menu来包含,即可实现下拉菜单<div class="container"> <div class="dropdown"> <原创 2017-05-03 19:20:26 · 547 阅读 · 0 评论 -
bootstrap表单样式
基本表单类样式列表1.基础表单: <div class="form-group"> <label for="username">username: </label> <input type="text" class="form-control" name=username" /></div>2.内联表单:<div class="form-inline"> ...</d原创 2017-05-03 14:44:55 · 2201 阅读 · 0 评论 -
为响应式布局而生的viewport
viewport简介viewport的主要作用是运行开发者创建一个虚拟的窗口,并且自定义窗口的大小、缩放功能等基础属性基本定义viewport虚拟窗口是在meta元素中定义的,主要作用是设置web页面自适应移动设备的屏幕大小<meta http-equiv="viewport" content="width=device-width,initial-scalable=1" />viewport虚拟窗原创 2017-05-03 12:50:33 · 455 阅读 · 0 评论 -
bootstrap画板类样式
画板组成类样式1.外层画板: panel 2.画板标题: panel-heading3.画板内容: panel-body4.画板脚注: panel-footer画板样式:(同panel外层画板一个div)panel-default 重点蓝panel-success 成功绿panel-info 信息蓝panel-warning 警告黄panel-danger原创 2017-05-03 12:33:26 · 818 阅读 · 0 评论 -
Bootstrap常用导航条
<body> <!-- 设计页面导航条 --> <div class="container"> <!-- 基本导航条 --> <div calss="navbar navbar-default"> <div class="navbar-header"> <a class="navbar-brand原创 2017-05-03 12:04:38 · 320 阅读 · 0 评论 -
Bootstrap常用的导航栏
<body> <!-- 设计页面导航 --> <div class="container"> <!-- 普通tabs选项卡导航栏 --> <ul class="nav nav-tabs"> <li><a href="javascript:void(0);">网页</a></li> <li><a href=原创 2017-05-02 23:56:32 · 494 阅读 · 0 评论 -
Bootstrap打造特色进度条
Bootstrap基本进度条实现1.外层容器使用class=progress类样式2.真正显示进度条样式的容器使用class=progress-bar类样式示例:<div class="progress"> <div class="progress-bar"></div> <!--可以添加width来设置进度条当前加载的百分比--> <div class="progres原创 2017-05-01 23:40:37 · 1268 阅读 · 0 评论 -
Bootstrap实现基于carousel.js框架的轮播图效果(无过渡动画)
声明式触发需要使用到的几个data-*属性1.data-ride:作用在最外层容器上,固定值:carousel2.data-target:作用在class=carousel-indicators的每个子元素li上面,标注对那个元素进行点击轮播3.data-slide:作用在前翻页和后翻页的两个a链接上,prev表示前翻页,next表示后翻页4.data-slide-to:作用在class=ca原创 2017-05-01 22:30:08 · 3439 阅读 · 1 评论 -
bootstrap实现bootstrap中文网巨幕效果
效果图:实现代码:<div class="jumbotron"> <div class="container"> <h1>Bootstrap案例开发</h1> <h2>简洁、直观、强悍的前端开发框架,让web开发更迅速、简单</h2> <p> <a href="javascript:void(0)" class="btn原创 2017-05-01 20:21:39 · 4376 阅读 · 0 评论 -
实现页面的回到顶部功能
页面的几个属性介绍$(window).scrollTop():当前滚动的窗口顶端到整个页面窗口顶端的距离$(window).scrollLeft():当前滚动的窗口左端到整个页面的窗口左端的距离 $(window).height():当前可视化页面窗口的宽度$(document).height():整个页面的高度相关判断1.让页面回到顶部,就是让window.scrollTop =原创 2017-05-04 18:39:21 · 1545 阅读 · 0 评论