Bootstrap CSS使用方法

2024-12-16 17:51:43

Bootstrap中CSS的使用方法，供大家参考，具体内容如下

1、GitHub上这样介绍 bootstrap：

☑ 简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。
☑ 基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。
☑ 自定义JQuery插件，完整的类库，基于Less等。

2、bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。

同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码：

3、Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype）

4、Bootstrap 3 的设计目标是移动设备优先，然后才是桌面设备。为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：
（initial-scale=1.0, maximum-scale=1.0, user-scalable=no）

5、响应式图像

通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。

6、全局样式（reset.css）
Bootstrap框架在这一部分做了一定的变更，不再一味追求归零，而是更注重重置可能产生问题的样式（如，body,form的margin等），保留和坚持部分浏览器的基础样式，解决部分潜在的问题，提升一些细节的体验，具体说明如下：

移除body的margin声明
设置body的背景色为白色
为排版设置了基本的字体、字号和行高
设置全局链接颜色，且当链接处于悬浮“:hover”状态时才会显示下划线样式

Bootstrap 3 使用 body {margin: 0;} 来移除 body 的边距。
请看下面有关 body 的设置：

body {
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}

7、避免跨浏览器的不一致

Bootstrap 使用 Normalize 来建立跨浏览器的一致性。
Normalize.css 是一个很小的 CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Bootstrap中CSS的使用方法

Bootstrap 使用了一些 HTML5 元素和 CSS 属性,所以需要使用 HTML5 文档类型. <!DOCTYPE html> <html lang="zh-CN"> ... </html> 为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示: <meta name="viewport" content=&quo
Bootstrap学习笔记之css样式设计(2)

首先,很感谢各位朋友对我的支持,关于bootstrap的学习总结,我会持续更新,如果有写的不对的地方,麻烦各位给我指正出来哈.关于上篇文章,固定布局和流式布局很关键,如果还不太清楚的可以再看看我写的:Bootstrap学习笔记之css样式设计(1) 这次我们来看看bootstrap中关于样式的一些具体关键的类以及如何使用这些类,类与类之间的区别,另外涉及到的一些相关类,举列子的时候解释. 一.表单 1.form-control类:含有此类的<input><select><te
bootstrap和jQuery.Gantt的css冲突如何解决

bootstrap是广泛使用的一个前端框架,而jQuery.Gantt在目前也是一个很好用的用于绘制甘特图的插件. 这次在同时使用它们时,发现甘特图显示异常,如图不加载bootstrap.css,甘特图就不会出问题,很容易就定位出现bootstrap的css冲突问题. 但是要实际定位到具体是哪个样式所导致的却花了一些功夫. 1.先看了甘特图里与bootstrap的重复样式,有一个.row,于是我把gantt插件的row全部修改成了ganttrow,发现没效果. 2.再是看了bootstrap中
Bootstrap学习笔记之css样式设计(1)

由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一.bootstrap是什么? bs是什么? 即前端页面搭建的标准化框架工具,已经写好了css.js样式,只需要拿来用即可. 怎么用bs呢?主要是通过使用不同的类增加效果,每一种类,对应的功能不同. bs好处:增加了开发效率,页面设计更加美观,支持响应式开发.下载地址:https://github.com/foreverjiangting/bootstrap
Bootstrap CSS组件之按钮下拉菜单

按钮下拉菜单结合使用.btn-group(btn-group-lg/btn-group-sm/btn-group-xs) .dropup .btn .dropdown-menu 按钮下拉菜单是在普通的下拉菜单的基础上封装了.btn样式得效果,就类似于单击一个button按钮,然后显示隐藏的下拉菜单. 组合式下拉菜单分离式下拉菜单向上弹起的下拉菜单 //源码,css实现方式主要是设置.dropdown-menu样式容器的bottom为100% .dropup .dropdown-menu,
Bootstrap CSS组件之按钮组(btn-group)

.btn-toolbar(有助于几组btn-group结合到一个btn-toolbar中)/.btn-group(btn-group-lg/btn-group-sm/btn-group-xs)/.btn-group-vertical 容器内的按钮,可以使用button元素,也可以使用a元素,产生的效果是一样的. 容器的多个分组以table风格进行显示,每组之间保持5px的left margin //源码 .btn-toolbar:before, .btn-toolbar:after{ displ
Bootstrap CSS组件之导航(nav)

本文实例为大家分享了Bootstrap导航的具体代码,供大家参考,具体内容如下 //源码 .nav { padding-left: 0; margin-bottom: 0; list-style: none; } .nav > li { position: relative; display: block; } .nav > li > a { position: relative; display: block; padding: 10px 15px; } .nav > li &g
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法

最近的一个项目前台使用了 bootstrap.css + angularjs, 后台只处理数据(用的php,处理结果直接 json_encode($arr),非常爽).一直在Chrome的仿真机测试非常完美, 没有进行真机测试.完成后,到手机测试时傻了,左右滑动页面时,竟然出现了一个空白的竖条(如下图所示).判断是margin-right 设置的长度所致,检查css,并没有相关代码.看来问题出现在了 bootstrap .虽然不影响程序的使用,但是感觉非常别扭,一定要修复它. 检查页面,发
Bootstrap轮播加上css3动画，炫酷到底！

很多时候,如果你的项目需要的是一个轻量级的轮播,不需要很多的功能.同时你的项目是采用Bootstrap,(一个最流行的开源前端框架)的话.你可以参考一下bootstrap官方组件. 介绍Animate.css 为了让我自己写的动画效果值得称赞,我用一个非常有名的开源的CSS3动画库,被形象的称为animate.css. Dan Eden写的. 这是让我能专注于手头的任务,而不是解释CSS3动画的代码. 用Animate.css 需要2个步骤: 在html文档中引入animate.min.css.
Bootstrap学习笔记之css组件(3)

今天我们来看看css组件效果以及其中比较重要的类,这些类都不难,关键要熟练掌握,搭配使用,灵活运用.关于前两篇中,css样式和布局的文章,大家可以在之前的文章中阅读. 一.导航组件自己做了个导航,目前只有一级菜单,下一篇文章中,将给出二级菜单,涉及到js的插件,所以这里不在描述. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> &l

Bootstrap CSS使用方法

相关推荐

随机推荐