bootstrap框架以及css一些常见问题

这周学习了Bootstrap框架、flatUl框架还有快切框架,框架很好的简化了我们程序员的代码量,同时也可以让我们更丰富利用已经写好的各种css和js样式,能简单、快速、解决兼容性问题让我们有更多精力放在web前端开发上;

bootstrap首先提供了一个布局框架,叫
960栅格式布局,其布局格式如下:
    1. 12列划分
        1. 每个栅格栏左右间隙10px;
        2. 每个栅格60px;
        2. 列与列之间间隔20px;
        3. 可用部分940px;
    2. 16列划分
        1. 每个栅格间隙10;
        2. 每个栅格40px;
    3. 24列划分
        1. 左右各占5px;
        2. 每个栅格30px;
        3. 可用部分950px;
    4. 我们应用的响应式布局用的是xs

bootstrap还给我们提供了一系列的组件,排版、代码、按钮、图片、表格、表单、标题、导航条、分页、标签等等,让我们可以不用写大量代码,优化我们时间分配。
flatul框架是基于bootstrap一个框架,提供了更加丰富的图标以及相应组件
快切框架是国内顶尖web前端工程师开发一款框架,该框架在某些方面更加贴近于我们国内开发者的习惯和需求,潜力很大。

css优先级

1. 内嵌>内联=外联(内联和外联依靠顺序来判断)
3. 选择器关系:id>元素>类选择器>
4. 属性选择器>类选择器

依据CSS权重值(4种)来判断优先级
    
    1. 名称选择器   a  b  c  d
    2. 内嵌   1  0  0  0
    3. id选择器  0  1  0  0
    4. 类选择器  0  0  1  0
    5. 属性、伪类   0  0  1  0
    6. 伪元素 、元素 0  0  0  1
    7. 没有提到的所有值全部为0
    8. 注意:让所有权重值失效的命令:!important

时间: 2024-12-30 00:54:46

bootstrap框架以及css一些常见问题的相关文章

Bootstrap框架的学习(一)

一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属于UI框架,与Jquery不一样,准确的描述Bootstrap框架属于CSS框架,而非JavaScript框架,但是它本身使用JavaScript来完善Bootstrap框架来完善视觉效果. 三.优点 完美的支持H5和CSS3,以及支持移动端浏览器 四.内容 可以参考一下官方文档http://v3.

Web前端学习笔记:Bootstrap框架

Bootstrap框架属于UI框架,这个和jQuery不太一样,其实准确的描述Bootstrap框架属于css框架而非javascript框架,但是它本身也使用javascript来完善Bootstrap框架的视觉效果.此外,Bootstrap框架十分超前,在支持html5和css3的浏览器上表现特别好,而且对移动终端的浏览器支持也是相当优秀. 一个完整的Bootstrap框架包含如下四个部分: 脚手架(不知道官网为啥这么翻译):用于重置背景.链接样式.栅格系统等,并包含两个简单的布局结构.Bo

bootstrap框架

bootstrap框架: bootstrap是一套现成的CSS样式集合.能够简洁.直观.强悍.移动设备优先的前端开发框架,让web开发更迅速.简单. 包含了哪些文件: bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min

Bootstrap 框架、插件

Bootstrap,前端工程师比较常用的框架.插件,根据它的定义,我们不妨这样理解,Bootstrap就是用于前端开发的一个模板,就是别人做好了我们直接可以搬过来直接使用或者根据自己需要略加修改设计自己的页面效果的成品.所以更加准确说,我们更多的时候是去学习如何去使用Bootstrap,那么我们该如何学会更好的使用Bootstrap?下面是我个人在Bootstrap学习使用过程中得一些心得,在这儿跟大家分享,不足之处欢迎前辈们多多指教! 第一:在学习一个新的知识,我们首先的明白它是什么以及我们为

Bootstrap 框架 栅格布局系统设计原理

如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下载了源代码进行分析了一番,看完之后果然有了收获,不过我只看了栅格布局的那块代码,其实也很简单,不必担心不懂,你只需要要基础的CSS知识即可. 前提条件(Bootstrap 自带) 首先使用这个布局之前要定义一下代码: 这行代码如果不懂,可以搜索一下,总之大致意思就是,被定义的元素的内边距和边框不再会

整合django和bootstrap框架

由于bootstrap就是一堆css和js以及字体文件,并且属于静态资源,所以我们只需要配置好django的访问路径,能够让template里面的代码访问到bootstrap相关的文件即可. 第一步: 下载bootstrap文件,http://v3.bootcss.com/getting-started/ 然后将本件解压以后,放到django框架的目录中. 我的放置位置如下. 如果我们的django项目叫做python_web,项目里面有个应用叫做blog. 那么我们需要在python_web下

Bootstrap框架。

什么是 Bootstrap Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootstrap特点 预处理脚本虽然可以直接使用 Bootstrap 提供的 CSS 样式表,不要忘记 Bootstrap 的源码是基于最流行的 CSS 预处理脚本 - Less 和 Sass 开发的.你可以采用预编译的 CSS 文件快速开发,也可以从源码定制自己需要的样式. 一个框架.

BootStrap框架---1.页面排版

•前言: •  Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架. 今天我们来看Bootstrap的页面排版!!!! 首先:其默认设置了一些样式 全局font-size为14px,line-height为20px,p段落设置10px,颜色#333; 1.页面主体  .lead 1 //.lead 突出效果 2 <p>Boo

关于bootstrap的datepicker在meteor应用中的使用(不包含bootstrap框架)

1.安装bootstrap3-datepicker包 meteor add rajit:bootstrap3-datepicker 2.使用方法 Example In your handlebars template: <input type="text" class="form-control" id="my-datepicker"> In client-side JS code: Template.mytemplate.rende