bootstrap样式:.clearfix

我们知道,在静态页面的编写中,清除浮动是一件很繁琐的事情。

所以一般的CSS框架都会有用来清楚浮动的样式。

在bootstrap中,这个样式叫 clearfix.

只要在需要清除浮动的元素的父元素加上clearfix就可以了。

就像这样:

                <ul class="col-md-12 clearfix">
                    <li class="nav_back">
                        <a href="/index.html" class="menu_a">
                            <span>首页</span>|
                        </a>
                    </li>
                    <li class="nav_back">
                        <a href="/productCenter.jsp" class="menu_a">
                            <span>产品中心</span>|
                        </a>
                    </li>
                    <li class="nav_back">
                        <a href="/solution.jsp" class="menu_a">
                            <span>解决方案</span>|
                        </a>
                    </li>
                    <li class="nav_back">
                        <a href="/newsCenter.jsp" class="menu_a">
                            <span>新闻中心</span>|
                        </a>
                    </li>
                    <li class="nav_back">
                        <a href="/companyHonor.jsp" class="menu_a">
                            <span>荣誉资质</span>|
                        </a>
                    </li>
                    <li class="nav_back">
                        <a href="/aboutUs.jsp" class="menu_a">
                            <span>关于我们</span>
                        </a>
                    </li>
                </ul>        
时间: 2024-10-02 05:22:39

bootstrap样式:.clearfix的相关文章

Yii2框架bootstrap样式理解

Yii2框架默认采用了bootstrap作为CSS风格,各种视图类组件都如此.之前一直采用默认风格,并在必要的时候添加或者修改一下class来达到目的.但在改版Yii1.1的orange项目时,发现之前也是套的模板,其实没有好好去理解一下bootstrap的那套规则,所以顺便大致梳理一下吧.以basic模板为例,对照http://v3.bootcss.com/css/ 上的内容进行. 看layouts/main.php,Yii2默认以HTML5文档类型进行的了,但语言默认是en-US,所以要改,

js 重写 bootstrap 样式 alert/confirm 消息窗口

相信很多人都受够了 alert.confirm 的样子,最近正在用 bootstrap 做项目,顺便封装了一个 bootstrap 样式的消息框. 实现起来很简单,bootstrap 本身就自带了 modal 模态框,样子还不错 :)就把它封装一下用吧. 无码无真相,少说多做,上代码. 项目是Asp.net Mvc架构的,方便全局调用,我直接在全局 Layout 页面加上以下HTML: <!-- system modal start --> <div id="ycf-alert

jqgrid+bootstrap样式实践

jqgrid+bootstrap样式实践,报错数据加载,选中,删除等功能 需要引入的样式 bootstrap.min.css ui.jqgrid.css 需要引入的JS jquery.min.js bootstrap.min.js jquery.jqGrid.min.js html代码: [html] view plain copy <div class="jqGrid_wrapper"> <table id="jqGridList"><

Angular中使用bootstrap样式

Angular中使用bootstrap样式 Angular中引入bootstrap的方法 ? 方法1:在Angular.json中的styles数组中添加bootstrap路径 如下所示: "styles": [ "src/styles.css", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ] 这里需要注意路径问题,不同Angular版本下,Angular.json的位置可能有所不

表格布局----基于bootstrap样式 布局

在实际开发中,我们通过菜鸟教程复制的表格往往不能满足我们的开发需求,样式很难看,而且不能自适应,尤其是需要到处Excel的样式,感觉非常糟糕,这次我就写了一个表单,不足之处,希望大神们多多指教: 代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>查询详情</title> 5 <meta name="keywords" content=""/>

前端开发必知的Bootstrap样式整理

Bootstrap是前端开发中非常重要.经常使用的一个开发框架,对于这个框架,它有哪些样式呢?今天为大家分享的就是Bootstrap的一些常用样式,希望可以帮助大家更好的学习bootstrap. .sr-only { clip: rect(0, 0, 0, 0); } : .sr-only 这个类主要为了增强网站的无障碍性(可访问性).假设在一个导航栏的 DOM 结构的主要内容之前,有很多超链接,可以使用 .sr-only 类在视觉上隐藏掉这些超链接.也就是说,为了保证视力障碍用户对网站的正常使

Bootstrap的clearfix

1.div的内容太多会导致后面的div错位 <!DOCTYPE html> <html> <head> <title>自定义占满wgnu</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 新 Bo

datatables 配套bootstrap样式使用小结(2) ajax篇

距离上一篇有点时间了,周末做了伴郎参加了一个土豪同学的婚礼. 上一篇是介绍一下基本的用法,基本的原理是取出所有的数据,然后调用$.datatables(option)方法格式化,这种方法显然不太科学,所以ajax方式是必须的. 首先上个效果图. js和css引用方面依旧没有变化,详见上篇. Html页面: @{ ViewBag.Title = "DataTableServer"; } @{ //两种身份 List<SelectListItem> discriminatorT

Bootstrap 样式定制-lessc编译源码

1.github上下载源码:解压:如目录bootstrap 2.新建同级目录custom-bootstrap ,在该目录下新建 如下三个文件:其实就是bootstrap下面的bootstrap.less 和variables.less文件拷贝过来 改个名字(新增一个custom-other.less  为了新增些不在variables.less的属性) 3.custom-bootstrap.less 中  导入 bootstrap目录的bootstrap.less.custom-variable