bootstrap基础知识(一)

Bootstrap

Bootstrap栅格系统

<div class="container-fluid">

aaaaaaaaa

</div> // 自适应宽度  流体

<div class="container">

aaaaaaaaa

</div> //固定宽度,根据不同分辨率展示不同固定值

两者不要嵌套用

栅格系统

Row 行

Col 列

使用如下

<!--<div class="row">

<div class="col-lg-1">col-lg-1</div>

<div class="col-lg-11">col-lg-11</div>  //总共加起来12份

</div>

<div class="row">

<div class="col-lg-3">col-lg-3</div>

<div class="col-lg-4">col-lg-4</div>  //不到12份显示残缺的

</div>-->

col-lg-1 超大屏幕  >1200

col-md-1  1200>992

col-sm-1  992>768

col-xs-1  768>

可以组合使用

col-lg-offset-4 //向右偏移4份

<div class="row">

<div class="col-lg-2 col-lg-push-10">col-lg-2</div> //列排序,往后偏移10个

<div class="col-lg-10 col-lg-pull-2">col-lg-10</div> //往前偏移两个

</div>

注意offset 和push/pull的不同点

响应式工具

<div class="col-lg-4 visible-md-block">col-lg-4</div> //当在md分辨率下才显示,否则隐藏

其余类似

预定义风格

<input type="button" value="默认样式">

<input type="button" value="首选项" class="btn btn-primary">

<input type="button" value="成功" class="btn btn-success">

<input type="button" value="一般信息" class="btn btn-info">

<input type="button" value="警告" class="btn btn-warning">

<input type="button" value="危险" class="btn btn-danger">

除了按钮可以这样加,文字,p段落,链接等都可以用

按钮

<input type="button" value="按钮" class="btn">

<input type="button" value="按钮" class="btn btn-default">

<input type="button" value="按钮" class="btn btn-link">

<br><br>

<input type="button" value="首选项" class="btn btn-primary">

<input type="button" value="首选项" class="btn btn-primary btn-lg">

<input type="button" value="首选项" class="btn btn-primary btn-sm">

<input type="button" value="首选项" class="btn btn-primary btn-xs">

<br><br>

<input type="text" class="form-control">

<input type="text" class="form-control input-lg">

<input type="text" class="form-control input-sm">

<br><br>

<input type="button" value="首选项" class="btn btn-primary">

<input type="button" value="首选项" class="btn btn-primary active">

<input type="button" value="首选项" class="btn btn-primary disabled">

下拉菜单

<div class="dropdown">

<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">

Dropdown

<span class="caret"></span>

</button>

<ul class="dropdown-menu">

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li><a href="#">Separated link</a></li>

</ul>

</div>

字体图标

要先引入相关文件

具体API自己查,调大小和颜色通过设置行内样式来调整

时间: 2024-10-12 17:52:01

bootstrap基础知识(一)的相关文章

Bootstrap基础知识学习

Bootstrap框架简介 http://www.cnblogs.com/sharpxiajun/p/3151510.html

Bootstrap基础知识

bootstrap框架中的data-xxx 的属性 如, data-toggle="table", 不加这个属性,就不能实现框架自带的js效果. 答: 1. 这个是自定义属性.自己写的,通过JS代码执行对应的操作. 参考 bootstrap框架中的data-[ ]自定义属性理解 2.bootstrap中的data-api语法, 可以通俗的理解为data-api就是一个普通的以data开头的属性,在js当中我们可以通过这个data-api找到某个元素.

转载 前端基础知识体系 一个新手的学习之路

原帖地址:  转载的原因是我学习前端和php已经4个多月了.看看自己还有那些不足.自己得努力学习,牛人太多.红色是我会的,或者学过的.希望今天把大部分飘红. 一.HTML 标签的分类 标签表示一个元素 按性质划分: Block-Level和Inline-Level 按语义划分: Headings: h1, h2, h3, h4, h5, h6 Paragraphs: p Text Formatting: em, strong, sub, del, ins, small Lists: ul, li

socket网络编程的一些基础知识

源地址:http://blog.csdn.net/roger_77/article/details/1453049 目录: 1) 什么是套接字? 2) Internet 套接字的两种类型 3) 网络理论 4) 结构体 5) 本机转换 6) IP 地址和如何处理它们 7) socket()函数 8) bind()函数 9) connect()函数 10) listen()函数 11) accept()函数 12) send()和recv()函数 13) sendto()和recvfrom()函数 

计算机基础知识的学习与巩固

计算机基础经典书籍 想在技术的道路上走得远,必须有扎实的计算机基础.下面按照学习的先后顺序给出一些推荐的好书: 编程语言<C程序设计语言> 离散数学<离散数学及其应用> 数据结构<数据结构与算法分析 C语言实现> 组成原理<深入理解计算机系统>(CSAPP) 操作系统<现代操作系统> 编译原理<编译原理>(龙书) 软件工程<计算机程序的构造和解释>(SICP) 看经书的同时要多练习和思考,课后题适当选作.如果某些知识 第一

Java的入门基础知识

https://course.tianmaying.com/java-basic%2Bjava-environment#0 作者:David链接:https://www.zhihu.com/question/25255189/answer/86898400来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 这个教程将Java的入门基础知识贯穿在一个实例中,逐步深入,可以帮助你快速进入Java编程的世界.万事开头难,逐步跟着这个教程走一遍,对Java应该就会有一种入门的

计算机科学基础知识(三)静态库和静态链接

三.将relocatable object file静态链接成可执行文件 将relocatable object file链接成可执行文件分成两步,第一步是符号分析(symbol resolution),第二步是符号重新定位(Relocation).本章主要描述这两个过程,为了完整性,静态库的概念也会在本章提及. 1.为什么会提出静态库的概念? 程序逻辑有共同的需求,例如数学库.字符串库等,如果每个程序员在撰写这些代码逻辑的时候都需要自己重新写那么该是多么麻烦的事情,而且容易出错,如果有现成的,

【RL-TCPnet网络教程】第2章 嵌入式网络协议栈基础知识

第2章        嵌入式网络协议栈基础知识 本章教程为大家介绍嵌入式网络协议栈基础知识,本章先让大家有一个全面的认识,后面章节中会为大家逐一讲解用到的协议. 基础知识整理自百度百科,wiki百科等. 2.1   初学者重要提示 2.2   TCP/IP协议栈简介 2.3   TCP/IP参考模型 2.4   OSI参考模型 2.5   RL-TCPnet和参考模型的对应关系 2.6   网络协议收录文件RFC 2.7   以太网和IEEE 802.3 2.8   网线相关知识 2.9   总

MySQL数据库基础知识

day02 MySQL数据库基础知识 一.基础知识概述: 基础决定你这门课程的学习成败!只有学习好这些基础知识以后,你才能真正的运用自如.才能够对数据库有更深入的了解,道路才会越走越远. 二.基础知识: 1.数据库(database):数据库就好比是一个物理的文档柜,一个容器,把我们整理好的数据表等等归纳起来. 创建数据库命令:        create database 数据库名; 2.查看数据库         show databases; 3.打开指定的数据库         use