慕课网bootstrap二
来源:互联网 发布:3d360度全景图制作知乎 编辑:程序博客网 时间:2024/06/06 02:59
网格
最常见的是平均分成12份
<div class="container"> <div class="row">
1. 数据行(.row)必须包含在容器(.container),一边为其赋予合适的对齐方式和内距(padding)。
2. 在行.row
中可以添加.column
,但列数之和不能超过平分的总列数,比如12
3. 具体内容应当放置在列容器(column)之内,而且只有列才能作为行容器的直接子元素
列偏移
列元素上添加类名col-md-offset-*
即可,加起来不要超过12
列排序
就是改变列的方向,改变左右浮动,设置浮动距离
添加类名col-md-push-*
(往右)和col-md-pull-*
(往左)星号代表移动的列组合数
列的嵌套
外部不能大于12,内部也不能大于12
下拉菜单
bootstrap组件交互效果依赖于jQuery库,要加载jQuery库
- 使用一个包含类名为
dropdown
的容器包裹整个下拉菜单元素<div class="dropdown">
- 使用一个
<button>
按钮作为父菜单,并且定义类名dropdown-toggle
和自定义data-toggle
属性,且值必须和最外容器类名一致data-toggle="dropdown"
下拉菜单使用一个ul列表,并且顶一个一个类名为
dropdown-menu
,<ul class="dropdown-menu">
选择你喜欢的水果
下拉菜单(下拉分割线)
下拉菜单里组与组之间添加一个空的<li>
添加类名devider
,
每个组添加一个标题<li> role="presentation" class="dropdown-header">菜单头部</li>
下拉菜单(对齐方式)
默认左对齐
与父容器右对齐 <ul class="dropdown-menu pull-right(dropdown-menu-right)">
下拉菜单(菜单项状态)
<li class="disabled(禁用) active(当前状态)">
按钮组
按钮放在带有类名btn-group
的div
中,里面的<button class="btn btn-default>"
按钮工具栏
<div class="btn-toolbar"> <div class="btn-group"> </div></div>
<div class="btn-group btn-group-lg(btn-group-sm)(btn-group-xs)"
大,小,超小
按钮(嵌套分组)
<div class="btn-group"> <button class="btn btn-default" type="button">首页</button> <div class="btn btn-default dropdown-toggle" date-toggle="dropdown" type="button">关于我们</button> <ul class="dropdown-menu"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> </ul> </div></div>
按钮(垂直分组)
把水平分组的btn-group
换成btn-group-vertical
即可
等分按钮
等分按钮尽量使用<a>
标签制作元素按钮,在按钮组btn-group
后追加一个btn-group-justified
类名
按钮向上向下三角形
<div class="btn-group dropup"><button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>
向上弹起的下拉菜单
<div class="btn-group dropup"><button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>
导航(基础样式)
<ul>
类中加入nav
,nav-tabs
,nav-pills
可横向排列按钮,只加nav
竖行排列,按钮为块状元素
标签形tabs导航
通过nav-tabs
样式来实现,在原导航nav
上追加此类名,active
和disabled
。
胶囊形pills导航
通过nav-tabs
样式来实现,在原导航nav
上追加此类名,active
和disabled
。
垂直堆叠的导航
在nav-pills
的基础上添加一个nav-stacked
类名即可
自适应导航(使用)
自适应导航指导航占据容器全部宽度,而且菜单项可以像表格一样自适应宽度,nav-justified
和nav-tabs
或者nav-pills
配合使用
导航下拉菜单(二级导航)
制作二级导航,只需要将<li>
当做父容器,使用dropdown
,同时在li
中嵌套另一个列表ul
<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><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li> </ul>
使用分割线在导航中添加<li class="nva-divider"></li>
就可以饿了
面包屑式导航
为ol
加入breadcrumb
类:
<ol class="breadcrumb"> <li><a href="#">首页</a></li> <li class="active">书</li></ol>
导航条
导航条也是独立组件
基础导航条
- 首先在制作导航的列表(
<ul class="nav">
)基础上添加类名navbar-nav
- 在列表外部添加一个容器(
div
),并且使用类名navbar-default
- 慕课网bootstrap二
- Bootstrap(二)
- BootStrap入门教程 (二)
- BootStrap入门教程 (二)
- BootStrap入门教程 (二)
- BootStrap入门教程 (二)
- BootStrap入门教程 (二)
- BootStrap入门教程 (二)
- BootStrap入门教程 (二)
- BootStrap入门教程 (二)
- BootStrap入门教程 (二)
- BootStrap入门教程 (二)
- Bootstrap综合笔记二
- Bootstrap系列二
- BootStrap入门教程 (二)
- bootstrap-table(二)
- bootstrap学习笔记二
- Bootstrap表单(二)
- java常用包简介
- ArrayList
- 一个JQuery前端实现的考试页面,带进度条,倒计时和答题卡
- 百钱买百鸡
- 基础运维1
- 慕课网bootstrap二
- list的特点和应用(不断补充) python
- 给开发者的26个忠告
- AWS Java Web项目创建
- webpack 报错Cannot find module 'opn'
- 一张图告诉你246个国家最新的无人机法律
- Java Reflection
- 如何在linux正常启动的系统中(挂载rootfs)某个目录下来加载ubi文件类型的recoveryfs?
- 重载构造方法的应用