bootstrap课程5 bootstrap中的组件使用的注意事项是什么
bootstrap课程5 bootstrap中的组件使用的注意事项是什么
一、总结
一句话总结:
1、img-responsive的作用是什么(其实还是要多看手册)?
看起来像width=100%的效果,
其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性,从而让图片在其父元素中更好的缩放。
如果需要让使用了 .img-responsive 类的图片水平居中,请使用 .center-block 类,不要用 .text-center
2、如何使用字符图标?
span标签放到字之前
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
3、字符图标的性质是什么?
矢量图,可以任意放大,也可以任意该颜色
4、字体图标的两大好处是什么?
a、可以任意改大小
b、可以任意改颜色
5、bootstrap中组件的js触发用什么形式?
data-的形式
data-toggle="dropdown"
下面调用的是
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
dropdown-menu这个ul
6、bootstrap下拉菜单中的disabled禁用,有真正禁用到什么么?
只是禁用了样式,a标签还是可以点,bootstrap都是只是做了前端的样式,
<li class="disabled"><a href="#">Disabled link</a></li>
二、bootstrap中的组件使用的注意事项是什么
1、相关知识
--------------------------------------------------
glyphicons图标:
.glyphicon
.glyphicon-triangle-right
下拉菜单:
.dropdown
.dropup
.dropdown-menu
[data-toggle='dropdown']
.dropdown-menu-right
.dropdown-menu-left
.dropdown-header
.divider
.disabled
按钮组:
.btn-group
按钮组尺寸:
.btn-group-lg
.btn-group-sm
.btn-group-xs
按钮组嵌套:
.dropdown-toggle
垂直按钮组:
.dropdown-verticle
两端对齐排列的按钮组:
.btn-group-justified
表单:
.form-group
.form-control
.checkbox
.radio
.form-inline
.input-group
.input-group-addon
.form-horizontal
.control-label
.form-control-static
[readonly]
[disabled]
fieldset
legend
输入框组:
.input-group
.input-group-addon
.input-group-lg
.input-group-sm
.input-group-btn
导航:
.nav
.nav-tabs
.nav-pills
.nav-stacked
2、代码
按钮组带上拉菜单
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 *{ 8 font-family: 微软雅黑; 9 } 10 11 </style> 12 <link rel="stylesheet" href="bs/css/bootstrap.css"> 13 <script src="bs/js/jquery.min.js"></script> 14 <script src="bs/js/bootstrap.js"></script> 15 </head> 16 <body> 17 <div class="container"> 18 <h1 class='page-header'>Bootstrap前端框架</h1> 19 20 <div class="btn-group dropup"> 21 <button class='btn btn-default'>Default</button> 22 <button class='btn btn-danger dropdown-toggle' data-toggle='dropdown'><span class="caret"></span></button> 23 <ul class='dropdown-menu'> 24 <li><a href="">linux</a></li> 25 <li><a href="">linux</a></li> 26 <li><a href="">linux</a></li> 27 <li><a href="">linux</a></li> 28 </ul> 29 </div> 30 31 </div> 32 </body> 33 </html>
bootstrap课程5 bootstrap中的组件使用的注意事项是什么相关推荐
- bootstrap课程1 bootstrap为什么这么火
bootstrap课程1 bootstrap为什么这么火 一.总结 一句话总结:响应式,样式多,功能多. 1.bootstrap通过什么药实现响应式? 响应式web布局是让用户通过不同尺寸的浏览器都可 ...
- bootstrap课程4 bootstrap的css样式有哪些内容需要注意
bootstrap课程4 bootstrap的css样式有哪些内容需要注意 一.总结 一句话总结: 1.如何选择产品(框架)的版本? 大版本下的最后一个版本,但是同时又要选择稳定的版本,也就是如果做产 ...
- vue全局安装jquery,vue使用bootstrap框架,vue中封装websocket通讯,vue引入element-ui 组件库,引入highcharts图表插件
vue安装jquery: 1.使用vue-cli创建好vue项目后,在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 2.修改项目文件 build ...
- Bootstrap入门(二十一)组件15:警告框
Bootstrap入门(二十一)组件15:警告框 通过这些简单.灵活的进度条,为当前工作流程或动作提供实时反馈. 进度条组件使用了 CSS3 的 transition 和 animation 属性来完 ...
- bootstrap表格 行编辑状态_JS组件系列——BootstrapTable 行内编辑解决方案:x-editable...
前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...
- 黑马——Bootstrap课程笔记
## Bootstrap: 1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JavaScri ...
- Bootstrap前端框架学习(一):Bootstrap在Vue项目中的安装及可视化布局
Bootstrap前端框架学习(一):Bootstrap在Vue项目中的安装及可视化布局 node.js的安装 bootstrap的安装 bootstrap快速布局 node.js的安装 我们需要安装 ...
- 统计学中的Bootstrap方法(Bootstrap抽样)用来训练bagging算法,如果随机森林Random Forests
统计学中的Bootstrap方法(Bootstrap抽样)用来训练bagging算法,如果随机森林Random Forests 提示:系列被面试官问的问题,我自己当时不会,所以下来自己复盘一下,认真学 ...
- Yii2中关于组件的注册以及创建的方法详解
2019独角兽企业重金招聘Python工程师标准>>> 了解yii组件注册与创建的过程,并发现原来yii组件注册之后并不是马上就去创建的,而是待到实际需要使用某个组件的时候再去创建对 ...
最新文章
- 数据库连接字在Web.config里的用法
- 使用 SQL Server 的 uniqueidentifier 字段类型
- H3C Boot升级 Serial模式
- sql 两个 in_SQL基础知识——IN运算符
- linux udp数据包发送间隔,如何每1 ms发送一次UDP数据包?
- 游戏是怎么赚钱的 - 科普篇
- ios 通过代码调整焦距
- iOS比较常用的第三方及实例(不断更新中)
- fzu2190---非提的救赎 (单调栈)
- [ERROR:0] global /build/opencv/modules/videoio/src/cap_ffmpeg_impl.hpp (2791) open VIDEOIO/FFMPEG: F
- py: pip3老,导致安装 flask avatar 依赖的 pillow 安装不上
- 语音/视频转文字的工具选择它-不仅仅是好用还免费
- 计算/感知/认知智能的研究现状
- 品优购网页制作(HTML和css内容)
- python大数据之异常值处理
- 新手小白学影视剪辑50天日入500,她的方法秘籍全在这里了!【覃小龙课堂】
- 内温的整体优先效应实验_第四章 知觉10.ppt
- 【c#】键盘事件(keypress keydown keyup)
- 练习4-6 猜数字游戏 (15分) 代码比较长,新手上路请多关照
- 塔勒布四部曲之《黑天鹅》
热门文章
- jfinal-layui中如果sql是多表时条件查询写法
- 加密芯片在游戏行业内的应用
- VB禁止使用 Alt-Tab 或 Ctrl-Alt-Del
- 通达信众赢全部破解指标(完美无错源码副图)
- 谷歌造了个虚拟足球场,让AI像打FIFA一样做强化学习训练丨开源有API
- 华为海思总裁凌晨邮件燃爆全国:多年备胎一夜转“正”,今后要科技自立
- 你说“神马”?非正式汉语数据集资源上线,帮你训练网络语言处理
- 谷歌开源集成学习工具AdaNet:2017年提出的算法终于实现了
- 美国喜提刷脸登机,官方开心发通告,竟马上引发公民不适
- 波士顿动力又有新视频:机器狗要开门,人类真是拽不回来