bootstrap就是个前端快速开发的工具,该工具是个简单、直观、强悍的前端开发框架,让web开发更加迅速简单,同时也是个响应式布局,兼容各个终端的页面显示
不同的应用场景安装方式不同,请大家参考bootstrap官网进行安装,这里我们直接下载源码复制到pycharm上就可以直接使用了
1、全局css样式:对html的基本元素(格式)进行css样式的定义,并利用class类来增强其展示效果·。
2、功能组件:无数可复用的组件,包括字体图标,下拉菜单,导航,警告框,弹出框等扩展功能。
3、js插件:丰富组件内容,主要是为了修饰组件功能,像alert()弹出框等动态效果(jquery)
4、自定制:略
2、bootstrap官网文档例子使用说明
1、只要能在官网上找到自己所想要的例子就可以了
3、默认情况下无论写个什么标签只要没有设置样式都是按照浏览器默认样式显示的,但是bootstrap把大部分的标签样式都进行了重构,并且还增加了很多新的类功能。
三、bootstrap官网文档使用说明
1、页面主体:lead属性,创建包含段落突出的文本,就是文本突出
3、内联文本元素:
6、可通过list-unstyled移除列表的默认样式,也可通过list-inline把列表设置成内联(一行显示),还可dl-horizontal设置成水平显示
1、简单写法:
1、基本格式:在table元素中通过table就可以设置成基本格式
2、条纹状表格:通过table-responsive设置表格隔行
3、带表框表格:通过table-bordered设置带边框表格
4、悬停鼠标背景颜色:通过table-hover设置悬停鼠标时会有背景颜色
5、在tr元素中通过alert-success设置单独行背景颜色
6、在tr中通过sr-only来隐藏某一行内容,也可应用于别的标签中。
1、a标签button标签input标签都是可以作为按钮使用的
2、按钮样式属性:
eg:默认btn就是按钮样式
3、按钮尺寸属性
注释:默认是btn大小
4、将按钮转换为块级按钮,可通过btn-block属性实现
5、激活按钮,可通过active属性来实现,意思就是按一下就会显示别的样式
6、禁用按钮,可通过disabled属性来实现,意思就是不管怎么按都是没反应的
7、补充:可以在body中设置margin来设置body在浏览框中距上下左右的距离
8、补充:可在body中设置table-responsive设置响应式布局,意思就是说窗口缩小,内容也缩小 。
1、表单成行:可通过form-control来设置表单成行,通过form-group来设置每个行表单之间上下间距(必须设置在div内)
2、内联标签:通过form-inline将行标签设置为内联标签,就是让所有表单元素居于一行,连接之间有间隙
3、表单合并:通过input-group可将多个行级标签合并为一个行级标签,连接之间没间隙
4、水平排列:通过设置form-horizontal让表单内元素保持水平排列
1、复选框:通过在div内设checkbox来设置复选框,也可通过disabled设置禁用复选框
2、内联复选框:通过设置checkbox-inline让多个复选框设置成一行显示(复选框和单选框一样设置)
3、下拉列表:通过form-control来设置下拉列表
1、布局容器(栅格系统必须在这个布局容器下做)
布局容器1:固定宽度,距离左右两边有个间隔
布局容器2:100%宽度
2、容器内创建行:通过row的方式创建,一行宽度分为12等列
3、行内创建列:一行有12等列,通过col-md-x来显示x列,x指代的是显示多少等列的内容,如果x相加的和超过12就超出下一行
4、针对不同的屏幕分类
5、列偏移:通过col-md-offset-x来设置向右偏移多少列
6、列嵌套:列中可以继续嵌套12小列
7、列交换位置:push向右,pull向左
1、辅助类之文字颜色设置
2、辅助类之背景颜色设置
3、快速浮动:
4、清除浮动:清除前面的浮动元素
5、区块居中:必须在块级标签内
6、隐藏和显示:做了个加强效果
2、下拉菜单:首先外部要有容器包裹按钮和菜单(dropup是上拉菜单)
3、按钮组件
Bootstrap是一款强大的UI库,是目前最受欢迎的前端框架。Bootstrap基于Html、css、javascript的,简洁灵活,使得Web开发更加快捷。
本教程将分三部分讲解Bootstrap框架:
第二部分(实战篇):在本阶段主要通过实战完成一个从UI设计图(PSD图)到切片再到使用bootstrap框架完成一个微商城网站项目,把前面学到的知识融会贯通。
第三部分(高级篇):这部分侧重于Boot
多年的教育经验和WEB前端开发经验,现任邢帅WEB前端讲师,授课条理清晰,案例明细详解,带你走进开发的最高境界,不断突破自我!
90后萌妹子,喜欢欧巴,喜欢健身。毕业于传播学专业,从事H5交互动画制作4年,曾为360、大众点评、华为等企业做过H5广告。始终相信,没能打败你的,终将让你强大。
小恩爱联合创始人。担任 CTO,负责小恩爱整体技术架构,技术团队搭建,对算法、高并发、客户端方向都有丰富的经验,在公司团队管理方面有自己独到的见解。
辣妈帮技术VP前期一人集开发、运维系统等职能于一身,目前管理60多人的技术团队。个人站长出身,06年接触PHP,11年到深圳,混迹于各种中小创业公司,涉及过小说,门户等大大小小的项目。
邢帅教育广州邢帅教育科技有限公司,简称邢帅教育(原名邢帅网络学院)是由邢帅、郭洪仓创办,始建于2008年底,凭借对市场敏锐的洞察力和9年的不懈努力,邢帅教育已成为目前中国在线教育行业的领航者之一。"知识改变命运,技能改善生活"是邢帅教育的品牌理念。邢帅教育一直专注于发展在线教育,课程内容涵盖了设计创作、IT互联网、职场技能、升学自考、兴趣生活等诸多领域,所含科目26个,课程多达1000多门。每年,10万余计的各界底层人士,通过参加邢帅教育高质量的技能培训,从而改变了自己的人生。
1.技能系统、专业、方向明确!
从零基础到实战项目开发,整合开放思路,逐个知识点击破;针对不同行业推荐不同的学习内容
2.技术、实践案例项目不断更新!
Web前端技术日新月异不断更新,响应式布局等是当前开发的热点,学习本套Web前端系统课程,你会获得长期的学习时间,并随时更新补充你所欠缺的技术只是与应用
3.讲师优、教学质量好!
我们不断吸纳专业人士,高薪聘请从业多年的技术人才;不断优化课堂,不断探索学员接受更快的方式教学,并且配备辅导老师课下随时进行学员问题的解答和学员学习方法的引导等问题
版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。