web移动端-4-响应式布局-bootstrap应用

项目链接:GitHub:https://github.com/sharryling/WebDevelop-mobile1/tree/master/Web-M-XYS

顶部通栏

中频以下隐藏:
web移动端-4-响应式布局-bootstrap应用_第1张图片

中频及以上显示栅格;
web移动端-4-响应式布局-bootstrap应用_第2张图片

字体图标自定义

/* 字体图标 自定义 */
@font-face{
    font-family: 'wjs';
    src: 
    url('../fonts/MiFie-Web-Font.eot') format('embedded-opentype'),
    url('../fonts/MiFie-Web-Font.svg') format('svg'),
    url('../fonts/MiFie-Web-Font.ttf') format('truetype'),
    url('../fonts/MiFie-Web-Font.woff') format('woff');
}
.wjs_icon{
    font-family: 'wjs';
}
.wjs_icon_phone::before{
    content: "\e908";
}

@font-face 必须包含 font-family 和 src两个属性!! font-family定义名称
用下面定义引用,wjs_icon必须定义,wjs_icon_phone定义了显示手机的样式。

.wjs_icon{
    font-family: 'wjs';
}
.wjs_icon_phone::before{
    content: "\e908";
}

使用:


web移动端-4-响应式布局-bootstrap应用_第3张图片

导航条

页面loaded后,导入bootstrap.js 它会去找代码中所有的data-toggle属性,它有各种功能,

    

两种使用方式:
web移动端-4-响应式布局-bootstrap应用_第4张图片
方式①:
web移动端-4-响应式布局-bootstrap应用_第5张图片
方式②:
web移动端-4-响应式布局-bootstrap应用_第6张图片
web移动端-4-响应式布局-bootstrap应用_第7张图片

web移动端-4-响应式布局-bootstrap应用_第8张图片

bootstrap 样式覆盖方式

web移动端-4-响应式布局-bootstrap应用_第9张图片
web移动端-4-响应式布局-bootstrap应用_第10张图片

你可能感兴趣的:(web移动端)