首页 » jQuery » bootstrap

bootstrap

原文 http://blog.csdn.net/allWords/article/details/79225151

2018-02-02 02:00:19阅读(324)

学习文件链接:

链接: https://pan.baidu.com/s/1i5VQaqx 密码: ydt2

可以根据标题搜索上面文件链接的html

bootstrap学习大纲:

1.css样式
1)栅格系统
2)排版
3)代码
4)表格
5)表单
6)按钮
7)图片
8)辅助类
9)响应式工具

2.css组件
1)glyphicons图标
2)下拉菜单
3)按钮组
4)输入框组
5)导航
6)导航条
7)路径导航
8)分页
9)标签
10)徽章
11)巨幕
12)页头
13)缩略图
14)警告框
15)进度条
16)媒体对象
17)列表组
18)面板
19)响应式嵌入内容
20)well

3.插件
1)模态框
2)下拉菜单
3)滚动监听
4)标签页
5)工具提示
6)弹出框
7)警告框
8)按钮
9)折叠效果
10)幻灯片效果
11)固定侧边栏


下面的每个标题对应每个html文件名

引入:
<link rel="stylesheet" href="css/bootstrap.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.js"></script>
  <script src="js/holder.min.js"></script>
  <script src="js/docs.min.js"></script>

 html5文档类型
 <!doctype html>

 移动端设备的真实宽度:
 <meta name='viewport' content='width=device-width',init-maximun-scale=1,user-scalable=no'>

 布局容器:
 .container

 栅格系统:
 .row 一行12列
 .col-md-4 占3列的宽

 排版
 1.标题(.page-header)
 2.段落(.lead)
 3.mark标记
 4.del删除线
 5.sall小号字体
 6.文本对齐
 7.文本大小写
 8.无样式列表
 9.内联列表
 10.自定义列表
 
 代码:
 1.code 红背景标记
 2.pre 按原格式输出
 3.kbd 黑色背景颜色
 4.i 斜体

 表格:
 table 表格
 table-striped 隔行背景
 table-bordered 表格形成格子
 table-hover 鼠标移上去动态

 表格颜色:
 active 灰色
 success 绿色
 info 青色
 warning 黄色
 danger 红色

 响应式表格:
 当<th></th>表头里面的内容很多的时候,可以用响应式表格
 再table表格外面加上<div class='table-responsive'>
 <div class='table-responsive'>
      <table class='table'>
      </table>
 </div>

 按钮颜色
 .btn
 .btn-deault (默认颜色) 白色
 .btn-primary (首选项) 蓝色
 .btn-success (成功) 绿色
 .btn-info (一般信息) 青色
 .btn-warning (警告) 黄色
 .btn-danger (危险) 红色
 .btn-link 链接

 按钮大小
 .btn
 .btn-lg 大按钮
 .btn-sm 默认大小按钮
 .btn-xs 小按钮

 按钮块级
 .btn
 .btn-block 把按钮变为块状元素,这个按钮独占一行

 按钮块级应用

 按钮禁止点击
 .btn
 disabled

 按钮元素
 能做按钮的元素有
 <button></button>
 <a></a>
 <input/>

 图片
 1.img-arounded 圆角
 2.img-circle 圆形
 3.img-thumbnail 边框

辅助类-----start

 文本颜色
 .text-muted 灰色
 .text-primary 蓝色
 .text-success 绿色
 .text-info 青色
 .text-warning 黄色
 .text-danger 红色

 文本背景颜色
 .bg-primary 蓝色
 .bg-success 绿色
 .bg-info 青色
 .bg-warning 黄色
 .bg-danger 红色

 .close关闭按钮
 <span class='close'>&times;</span>

 .caret下三角
 和更多形成按钮用比较多

 浮动
 .pull-right
 .pull-left
 .clearfix

 块级元素居中
 .center-block

 隐藏/显示
 .hide/.show

辅助类-----end

 响应式工具
 .table-responsive
 .img-responsive

 表单
 .form-group
 .form-control
 .checkbox
 .radio

 表单的水平排列的表单
 .form-horizontal
 .form-group
 .control-label
 .form-control

 表单的内联表单
 .form-inline
 .form-group
 .form-control

 表单的输入空组
 .input-group
 .input-group-addon

 

 css组件--------------------------------------------start--------------------------------------------

 字符图标
 随意改大小不会失真
 如.glyphicon glyphicon-education作用于span上面

 上拉菜单/下拉菜单
 <div class='dropdown pull-right'>
   <button class='btn btn-primary' data-toggle='dropdown'>更多课程 <span class='caret'></span></button>
     <ul class='dropdown-menu dropdown-menu-right'>
       <li><a href=''>百度</a></li>    
     </ul>
 </div>

 上拉下拉菜单内容的标题和分割线
 <li class='dropdown-header'>周一事项</li>
 <li class='divider'></li>

 上拉下拉菜单的禁用
 .disabled

 按钮组
 .btn-group
 .btn btn-primary
 .btn btn-warning

 按钮工具箱
 .btn-toolbar
 .btn-group
 .btn btn-primary

 按钮组尺寸
 .btn-group-lg
 .btn-group-sm
 .btn-group-xs

 按钮组与下拉菜单组合
 .dropdown-toggle
 data-toggle='dorpdown'
 .dropdown-menu

 按钮组与下拉菜单组合垂直
 .btn-group-vertical

 按钮组两端对齐
 .btn-group-justified

 按钮组和下拉菜单组合

 导航
 .nav
 .nav-tabs
 .nav-pills
 .nav-stacked

 导航条
 .navbar
 .navbar-default
 .navbar-inverse
 .navbar-inverse
 .navbar-fixed-top
 .navbar-fixed-bottom
 .navbar-header
 .navbar-brand
 .navbar-nav
 .navbar-form
 .navbar-btn
 .navbar-text
 .navbar-link
 .navbar-left
 .navbar-right
 
 路径导航
 .breadcrumb

 分页的左右
 .pagination
 &laquo;
 &raquo;
 
 分页的激活和禁用状态
 .disabled
 .active

 分页的上一页下一页
 .pager

 分页的两端对齐
 .previous
 .next

 标签
 .label
 .label-default
 .label-primary
 .label-success
 .label-info
 .label-warning
 .label-danger

 徽章
 badge
 
 徽章的样式与列表组:
 .list-group
 .list-group-item
 .badge

 巨幕
 .jumbotron

 页头
 .page-header
    
 缩略图
 .thumbnail

 缩略图与自定义内容
 .thumbnail
 .caption

 警告框
 .alert
 .alert-success
 .alert-info
 .alert-warning
 .alert-danger

 警告框实例
 .alert
 .close data-dismiss='alert' &times 警告框的关闭

 警告框中的链接
 .alert-link

 进度条的颜色和条纹
 .progress
 .progress-bar
 .progress-success
 .progress-info
 .progress-warning
 .progress-dager
 .progress-bar-striped 条纹

 进度条激活
 .active

 进度条动态

 媒体对象
 .media
 .media-left 左边的
 .media-right 右边的
 .media-middle 图标中间对齐
 .media-top 图标上面对齐
 .media-bottom 图标下面对齐
 .media-object 两边的图标
 .media-body 中间的内容
 .media-heading

 列表组
 .list-group
 .list-group-item
 .active激活
 .disabled禁用
 .list-group-item-success
 .list-group-item-info
 .list-group-item-warning
 .list-group-item-danger  

 面板
 .panel
 .panel-heading 头部
 .panel-title 标题
 .panel-body 中间
 .panel-footer 底部

 面板与列表组组合1
 把列表组放到面板的.panel-body里面
 如果要去掉间隔,则把panel-body去掉

 面板与列表组组合2
 与栅格系统一起用
 把列表组放到面板的.panel-body里面
 如果要去掉间隔,则把panel-body去掉
 
 面板与表格组合
 与栅格系统一起用
 把列表组放到面板的.panel-body里面
 如果要去掉间隔,则把panel-body去掉

 自适应的内嵌框架
 .embed-responsive
 .embed-responsive-16by9
 .embed-responsive-4by3
 iframe .embed-responsive-item
 里面可以放视频

 well
 .well-lg
 .well-sm
 .well可以与.pre比较
 
 css组件--------------------------------------------end--------------------------------------------
 jeqeury下的插件

 3.插件
 1)模态框
 2)下拉菜单
 3)滚动监听
 4)标签页
 5)工具提示
 6)弹出框
 7)警告框
 8)按钮
 9)折叠效果
 10)幻灯片效果
 11)固定侧边栏

 模态框(js弹框)
 .modal
 .modal-dialog
 .modal-lg
 .modal-sm
 .modal-content
 .modal-header
 .modal-body
 .modal-footer

 滚动监听
 body设置相对定位
 data-spy='scroll'
 data-target='#myNav'
 data-offset='150'
 id='myNav'

 折叠效果
 使用面板来回隐藏

 幻灯片
 幻灯片图片
 指示灯
 左右控制

 回到顶部







































最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹