从零开始学java记录(Bootstrap)——2019年6月1日
今天又是一个学习JAVA的好日子!
Bootstrap 特点
1、简洁、直观、强悍的前端开发框架,html、css、javascript 工具集,让
web 开发更迅速、简单。
2、基于 html5、css3 的 bootstrap,具有大量的诱人特性:友好的学习曲线,
卓越的兼容性,响应式设计,12 列格网,样式向导文档。
3、自定义 JQuery 插件,完整的类库,bootstrap3 基于 Less,bootstrap4
基于 Sass 的 CSS 预处理技术
4、Bootstrap 响应式布局设计,让一个网站可以兼容不同分辨率的设备。
Bootstrap 响应式布局设计,给用户提供更好的视觉使用体验。
5、丰富的组件
布局容器
1、.container 类用于固定宽度并支持响应式布局的容器。
< div class=“container”>
…
</ div>
2、.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容
器。
< div class=“container-fluid”>
…
</ div>
栅格网格系统(Grid System)
1、列组合
列组合简单理解就是更改数字来合并列(原则:列总和数不能超 12,大于
12,则自动换到下一行。),有点类似于表格的 colspan 属性。
< div class=“container”>
< div class=“row”>
< div class=“col-md-4”>4 列</ div>
< div class=“col-md-8”>8 列</ div>
</ div>
< div class=“row”>
< div class=“col-md-2”>2 列</ div>
< div class=“col-md-10”>10 列</ div>
< /div>
</ div>
2、列偏移、列排序
(1)列偏移
如果我们不希望相邻的两个列紧靠在一起,但又不想使用 margin 或者其他
的技术手段来。这个时候就可以使用列偏移(offset)功能来实现。使用列偏
移也非常简单,只需要在列元素上添加类名“col-md-offset-”(其中星号代表
要偏移的列组合数),那么具有这个类名的列就会向右偏移。例如,你在列元素
上添加“col-md-offset-8”,表示该列向右移动 8 个列的宽度(要保证列与偏移
列的总数不超过 12,不然会致列断行|换行显示)。
(2)列排序
列排序其实就是改变列的方向,就是改变左右浮动,并且设置浮动的距离。
在 Bootstrap 框架的网格系统中是通过添加类名 ”col-md-push-” 和
“col-md-pull-*” (其中星号代表移动的列组合数)。往前 pull,往后 push。
(3)案例
< div class=“container”>
< div class=“row”>
< div class=“col-md-1”>1 列</ div>
< div class=“col-md-1”>2 列</ div>
< div class=“col-md-1 col-md-offset-8”>11 列</ div>
< div class=“col-md-1”>12 列</ div>
</ div>
< div class=“row”>
< div class=“col-md-1 col-md-push-10”>1 列< /div>
< div class=“col-md-1 col-md-pull-1”>2 列</ div>
</ div>
</ div>
3、列嵌套
Bootstrap 框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或
者多个行(row)容器,然后在这个行容器中插入列.
< div class=“container”>
< div class=“row”>
< div class=“col-md-2”>
我的里面嵌套了一个网格
< div class=“row”>
< div class=“col-md-9”>9</ div>
< div class=“col-md-3”>3</ div>
</ div>
</ div>
< div class=“col-md-10”>我的里面嵌套了一个网格
< div class=“row”>
< div class=“col-md-10”>10</ div>
< div class=“col-md-2”>2</ div>
</ div></ div>
</ div>
</ div>
表格
(1)样式:
Bootstrap 为表格提供了 1 种基础样式和 4 种附加样式以及 1 个支持响应式
的表格。在使用 Bootstrap 的表格过程中,只需要添加对应的类名就可以得到
不同的表格风格:
基础样式
1).table:基础表格
附加样式
- .table-striped:斑马线表格
- .table-bordered:带边框的表格
- .table-hover:鼠标悬停高亮的表格
4). table-condensed:紧凑型表格,单元格没内距或者内距较其他表格
的内距更小
- 从零开始学Java记录(BootStrap + Jquery + AJax实例)——2019年6月3日
- 简单实现bootstrap选项卡效果
- bootstrap-datepicker 插件英文修改为默认中文
- Bootstrap中的各种下拉菜单
- 利用ASP.NET MVC+Bootstrap搭建个人博客之praise.js点赞特效插件(二)
- 基于bootstrap的后台管理系统
- BootStrap前端框架
- bootstrap模版兼容IE浏览器代码嵌入
- Bootstrap之Carousel不能自动播放的解决办法
- bootstrap-datetimepicker 汉化
- bootstrap3 侧边导航栏
- BootStrap 常用控件总结
- bootstrap轮播加触摸滑动效果,手机上效果很好
- bootstrap-海棠
- bootstrap设计横线上加字
- SpringMVC+Mybatis+Html5 bootStrap,SOA架构,全新UI商业运营框架
- Bootstrap实现遮罩层
- 为什么使用Bootstrap?
- bootstrap-table遇到的问题
- ASP.NET MVC使用Bootstrap系列(5)——创建ASP.NET MVC Bootstrap Helpers