bootstrap常用功能快速入门以及常见问题解决方案

1、图片轮播:

官网上的代码已经给的很清楚了,但是经常会出现问题。要做的很简单,首先引入jquery和bootstrap文件,再将官网上的html代码加上,最后加上一行js代码$(‘.carousel‘).carsousel();用于启动图片轮播,就可以了。

要注意的问题:

(1)js文件引入顺序:一定要先引入jquery.js文件再引入bootstrap.js文件,因为后者依赖前者,引用反了会出错。类似的情况很常见,比如ext.js的一些版本引入js的顺序会影响代码的执行,要注意js代码的依赖关系。

(2)注意alt的对应关系:图片的alt属性是和data-slide-to属性相对应的(就是轮播下面的小选项按钮)。

(3)bootstrap的轮播两侧的按钮默认有背景颜色且是一个有长有高的div,要修改它的高度就去修改class为carousel-control的a标签的height即可。

2、表格table

<table class="table"></table>就可以设置表格为bootstrap的样式了。并且boorstrap为table、tr、td设置了默认的特殊样式,用class调用即可。

3、表单form

在<form></form>内添加,每一个输入框都放入一个<div class="form-group"><?div>内,这里面的input标签要添加class为form-control才能引入boorstrap的样式。默认情况下input的宽度是相对于父元素100%的,要想设置其宽度通过form-control设置。

4、栅格系统

栅格系统是bootstrap里面最强大的功能,在<div class="row"></div>内可以设定不同宽度的div,只要添加属性class="col-md-*"即可设定宽度,一共分成12份,后面的数字是几就代表宽度占几份。

时间: 2024-08-01 22:47:28

bootstrap常用功能快速入门以及常见问题解决方案的相关文章

VIM常用命令——快速入门,行走江湖

VIM详细命令有很多,我们选用一些常用的入门命令,足以对付日常的代码编辑工作了,如果日后有需要使用其他命令,再来查询也不迟. vim一般有3种编辑模式,分别是插入模式,正常模式(normal mode),末行模式. 以下主要是在正常模式下的操作,其他模式操作会注明相关模式 1.1  移动光标 h------>每次按下向左移动 j------>每次按下向下移动 k------>每次按下向上移动 l------>每次按下向右移动 1.2  vim的进入和退出 按<Esc>键

bootstrap常用功能

<!-- 首页轮换图片 --><div id="image-trun" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#image-trun" data-slide-to=

pandas常用功能快速查询

#-*- coding: utf-8 -*- ''' 作者:时亚东 功能:pandas应用 版本: 时间:2019-10-01 ''' #模块导入 import pandas as pd import numpy as np import matplotlib.pyplot as plt '''Serise数据类型——一维数据''' a = pd.Series([1, 0.3, np.nan]) b = pd.Series(np.array([1, 2, 3])) print('a\n',a)

Docker快速入门——Docker常用命令

Docker快速入门--Docker常用命令 一.Docker命令简介 1.Docker命令简介 Docker的命令清单可以通过运行sudo docker或者sudo docker help命令查看.Docker容器技术在不断演化过程中,Docker的子命令已经达到41个,其中核心子命令(例如:run)还会有复杂的参数配置.Docker命令根据功能和使用场景可以分为4个部分. 2.Docker用户组 Docker守护进程绑定的是一个unix ?socket,而不是TCP端口,默认的属主是root

bootstrap 快速入门

bootstrap 快速入门   简介 是一个的 HTML.CSS 和 JS 框架 配置页面 远程访问 <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件(一般不用引入) --> <link rel=

AngularJS快速入门指南16:Bootstrap

thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table.reference>thead>tr>td, table.reference>tbody>tr>td, table.reference>tfoot>tr>td { padding: 8px; line-height: 1.42857143; vertic

vue 快速入门、常用指令(1)

1. vue.js的快速入门使用 1.1 vue.js库的下载 vue.js是目前前端web开发最流行的工具库之一,由尤雨溪在2014年2月发布的. 官方网站 中文:https://cn.vuejs.org/ 英文:https://vuejs.org/ 官方文档:https://cn.vuejs.org/v2/guide/ 1.2 vue.js库的基本使用 在github下载:https://github.com/vuejs/vue/releases 在官网下载地址: https://cn.vu

Git快速入门和常用命令

一.快速入门 本地初始化一个项目 首先,你需要执行下面两条命令,作为 git 的基础配置,作用是告诉 git 你是谁,你输入的信息将出现在你创建的提交中. git config --global user.name "你的名字或昵称" git config --global user.email "你的邮箱" 然后在你的需要初始化版本库的文件夹中执行: git init git remote add origin <你的项目地址> //注:项目地址形式为

Astyle 快速入门,常用指令

--style=java -n -p -c !E astyle是一个命令行工具,命令语法很简单:          astyle [options] < original > Beautified          astyle [options] Foo.cpp Bar.cpp  [...] 例如: astyle --style=ansi foo.cpp 上面的命令将美化foo.cpp文件,更改其风格为ANSI,并将原始文件备份到foo.cpp.orgin.所以,你可以安全的使用该软件而不必