发表于: 2019-08-15 21:48:24

1 1117


今天完成的事情:

1、bootstrap的中的栅格布局的使用,对bootstrap其他的功能也稍微了解了,因为不能更改样式比较麻烦,一般在用bootstrap的时候提前看适合用再用。

2、文字超出容器宽度时候隐藏并且用点表示

明天计划的事情:对bootstrap的使用有了初步认识,对任务中有些可以用到的地方试着用bootstrap,开始进行任务七
遇到的问题:在试着用bootstrap对任务六重新布局的时候发现单用bootstrap有些困难,需要配合css使用,但是出现了无法等比例缩小的问题。
收获:

一、要使文字超出容器宽度时候隐藏并且用点表示,需要使用text-overflow:ellipsis,该属性只能用于块状元素或行内块元素中,对行内元素是不起作用的。行内元素要显示省略号,需要先转化成块状元素或行内块元素。和white-space:noworp;(强制文字不换行),overflow:hidden;(文字溢出隐藏),一起使用。

二、可以在bootstrap的类名后加空格再加类名 对其中的内容进行编辑

常用类

1、container居中的内容展示

2、row  行内容显示

3、container-fluid充满屏幕

4、btn普通按钮btn-group按钮组·

5、navbar-fixed-top navbar-fixed-bottom 固定在顶部 底部

6、col 列内容显示, 列必须在row 中,xs 宽度小于768 ,sm宽度小于990 大于768 ,md 宽度大于990,小于1200, lg宽度大于1200

col-xs-4 代表 小屏下显示为4列,col-xs-4 col-md-2  代表小屏下占4列,大屏下占2列,col-*-*: 列 (第一个*可以为xs[超小]/sm[小型]/md[中型]/lg[大型]第二个*必须为12以内的[列数]),col-*-offset-* :列偏移(第一个*和上面一样,第二个*范围是1到11,表示把该列的左外边距(margin)增加*列),col-*-*-*:列排序(第一个*和上面一样,第二个*可以为push[向右]/pull[向左],第三个*范围是1到11[列数])

7、dropdown:下拉菜单,dropdown-menu: 下拉菜单,dropdown-header:下拉菜单区域标题

8、 导航  nav,navbar-fixed-top navbar-fixed-bottom 固定在顶部 底部

9、text-*:文本样式(*号可以为 ----left[左对齐]/center[居中对齐]/right[右对齐]/muted[减弱文本] /primary/success/info/warning/danger 

/justify[自动换行]/nowrap[不换行] /lowercase[小写]/uppercase[大写]/capitalize[首字母大写])

10、btn-group:里面放置一系列btn,btn-toolbar:里面放置几组btn-group,btn-group-*:调整按钮组的样式(*可以为xs/sm/lg/vertical)

.btn-group 容器添加 .dropup实现按钮上拉菜单

11、pull-left/right 元素浮动到左边/右边 ,center-block 设置元素为 display:block 并居中显示 ,clearfix 清除浮动 ,show/hidden 强制显示/隐藏

,close 显示关闭按钮 ,caret 显示下拉式功能 ,divider 分隔线



返回列表 返回列表
评论

    分享到