Web前端之移动端课程开发之06.bootstrap

简介: Web前端之移动端课程开发之06.bootstrap

Bootstarp

介绍
bootstarp是Twitter公司开发基于html,css,js的前端框架
为实现web应用程序快速实现开发提供了一套前端工具包 UI(userInterface用户界面)框架
Bootstrap的特性
响应式设计  (css媒体查询 一套样式 实现各个终端尺寸适配) pc  平板  手机端   
栅格布局
完整的类库
jQuery插件
不同的使用场景  移动设备优先 

Bootstrap3

IE9以及以上

某些功能性的组件依赖于jQuery

Bootstarp下载地址
// 官方地址
getbootstrap.com
// 中文地址
www.bootcss.com
前端开发过程中遇到的问题
重复 复杂 无意义的命令
结构冗余  胡乱嵌套
页面错乱
Bootstrap全局样式的特点
代码整洁
风格统一
美观易用

通过class设置样式

排版
标题
h1~h6 / .h1 ~ .h6
副标题 (small)
文本

段落 对齐方式 文本标记

// 对齐
.text-left
.text-center
.text-right
.text-lowercase
.text-uppercase
.text-captitalize
表格
.table-bordered 带边框
.table-striped  条纹状
.table-hover 悬停变色
.table-condensed 紧凑风格

.info .success .warning .danger 在表格中起作用

.bg-info .bg-warning …

表单
.form-control 表单控件
.form-group 表单组件
.form-inline 表单水平排列
按钮
// btn
//样式: btn-default btn-primary btn-success 
// btn-info btn-warning btn-danger btn-link
//更改大小 btn-lg  btn-sm md  xs
// 激活 active  块级化 btn-block
可以给其他标签套用这些类 比如a标签
Bootstrap的图片 --形状
圆角 .img-rounded
圆形 .img-circle
带有边框的圆角图形  .img-thumbnail
文本颜色
.text-primary  .text-success .text-info
.text-warning  .text-danger
背景颜色
.bg-primary  .bg-success .bg-info
.bg-warning  .bg-danger
状态设置
  .close 关闭按钮
三角符号
  .caret 三角符号
viewport 与bootstrap的响应式开发
@media screen and (min-width:*px) and (max-width:*px) {
}
bootstrap内部实现了 css媒体查询(Media Query) 来实现响应式布局(随着屏幕的尺寸变化而变化 rem 响应式布局的方式)
一套 栅格布局( 12份划分 )
bootstrap的字体图标
基本使用
下拉菜单

         
控件组
.input-group 表示控件组
.input-group-addon 添加控件组的图标
分页
.pagination
,pagination-lg/sm
.active
.pager .previous/.next
弹出框
.alert  .alert-success
.alert-info  .alert-warning
.alert-danger
.alert-dismissible 可以关闭
.alert-link 弹出框中的链接
面板
.panel  .panel-default  
.panel-heading .panel-title 
.panel-body
.panel-footer
// .panel自带的success/warning/info/danger
列表
.list-group  .list-group-item
导航
// .nav 
// .nav-tabs 选项卡式
// .nav-pills 按钮式
// .nav-stacked 垂直方向按钮式
// .nav-justified 两端对齐


目录
相关文章
|
1天前
|
前端开发 JavaScript
前端在移动端使用 100vh 导致页面出现滚动条的解决方案
前端在移动端使用 100vh 导致页面出现滚动条的解决方案
7 1
|
8天前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
|
11天前
|
人工智能 前端开发 测试技术
探索前端与 AI 的结合:如何用 GPT-4 助力开发效率
本文介绍了 GPT-4 如何成为前端开发者的“神队友”,让开发变得更加高效愉快。无论是需求到代码的自动生成、快速调试和性能优化,还是自动化测试和技术选型,GPT-4 都能提供极大的帮助。通过智能生成代码、捕捉 BUG、优化性能、自动化测试生成以及技术支持,GPT-4 成为开发者不可或缺的工具,帮助他们从繁重的手动任务中解脱出来,专注于创新和创意。GPT-4 正在彻底改变开发流程,让开发者从“辛苦码农”转变为“效率王者”。
24 0
探索前端与 AI 的结合:如何用 GPT-4 助力开发效率
|
11天前
|
存储 前端开发 JavaScript
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
【10月更文挑战第4天】本文探讨了从 Web 2.0 到 Web 3.0 的前端开发演变过程。Web 2.0 时代,前端开发者从静态网页设计走向复杂交互,技术框架如 jQuery、React 和 Vue 带来了巨大的变革。而 Web 3.0 以区块链技术为核心,带来了去中心化的互联网体验,前端开发者面临与区块链交互、去中心化身份验证、分布式存储等新挑战。文章总结了 Web 2.0 和 Web 3.0 的核心区别,并为开发者提供了如何应对新技术的建议,帮助他们在新时代中掌握技能、设计更安全的用户体验。
41 0
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
|
11天前
|
移动开发 前端开发 JavaScript
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
69 0
|
11天前
|
存储 安全 前端开发
在前端开发中需要考虑的常见web安全问题和攻击原理以及防范措施
在前端开发中需要考虑的常见web安全问题和攻击原理以及防范措施
54 0
|
11天前
|
JavaScript 前端开发 应用服务中间件
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
19 0
|
11天前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
54 0
N..
|
6月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
64 0
|
前端开发 容器