④bootstrap列表使用基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--移动设备优先--> <title>bootstrap</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件(一般不用引入) --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <style> </style> </head> <body> <div class="container"> <ul> <li>中国</li> <li>美国</li> <li>英国</li> </ul> <hr/> <ol> <li>中国</li> <li>美国</li> <li>英国</li> </ol> <hr /> <ol class="list-unstyled"> <li>中国</li> <li>美国</li> <li>英国</li> </ol> <hr/> <ul class="list-inline"> <li><a href="#">中国</a></li> <li><a href="#">美国</a></li> <li><a href="#">英国</a></li> </ul> <hr/> <dl class="dl-horizontal"> <dt>java1</dt> <dd>java1是一门面向对象的编程语言,我用了差不多十年,非常喜欢它</dd> <dt>java2</dt> <dd>java2是一门面向对象的编程语言,我用了差不多十年,非常喜欢它</dd> <dt>java3</dt> <dd>java3是一门面向对象的编程语言,我用了差不多十年,非常喜欢它</dd> </dl> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--移动设备优先--> <title>bootstrap</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件(一般不用引入) --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <style> </style> </head> <body> <div class="container"> java 的入口函数为main<code>publit static void main(String args[])</code>,必须是这样的结构 <hr/> java 让用户输入一个数字<code>Scanner sc=new Scanner(System.in);</code>,让用户输入的是 <kbd>alt+f</kbd>,这样用户输入, <hr/> 我在讲课时按<kbd>ctrl+D</kbd>就出现了画笔 <hr/> <pre> public class Hello { public static void main(String args[]) { int i=10; System.out.println("Hello Java!"); } } <samp>Hello Java!</samp> </pre> 其中<var>i</var>是一个变量 程序结果为: <samp>Hello Java!</samp> </div> </body> </html>
④bootstrap列表使用基础案例的更多相关文章
- 【7】了解Bootstrap栅格系统基础案例(2)
ps.这一次要说的是“Responsive column resets”,但是不知道为什么中文官网没有给出翻译,但是在看到案例的时候,感觉这就像一个bug,我自己姑且叫这个是一个高度bug吧,方便自己 ...
- 【10】了解Bootstrap栅格系统基础案例(5)
这次我们来说下列排序: 通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序. <!DOCTYPE html> <h ...
- 【9】了解Bootstrap栅格系统基础案例(4)
这次我们来说下嵌套列: 为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内.被嵌套的行(row)所包含 ...
- 【8】了解Bootstrap栅格系统基础案例(3)
这次我们来说下列偏移: 列偏移就是使用 .col-md-offset-* 类可以将列向右侧偏移.这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin).例如,.col-md-off ...
- 【6】了解Bootstrap栅格系统基础案例(1)
从上一张我们了解了栅格选项,那么我们就来了实战了解下吧(其实还是中文官网的案例) ps.我这里是电脑上用谷歌浏览器来观察的,毕竟电脑的分辨率高(1440*900px),谷歌浏览器最大化后,值比大屏幕设 ...
- ⒂bootstrap组件 折叠 基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ⒀bootstrap组件 选项卡 基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...
- ⑤bootstrap表格使用基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ③bootstrap文本使用基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Spring常用注解介绍【经典总结】
Spring的一个核心功能是IOC,就是将Bean初始化加载到容器中,Bean是如何加载到容器的,可以使用Spring注解方式或者Spring XML配置方式. Spring注解方式减少了配置文件内容 ...
- 记XDCTF的misc之旅---base64隐写
bWFpbigpe2ludCBpLG5bXT17KCgoMSA8PDEpPDwgKDE8PDEpPDwoMTw8Cm==ICAgICAgIDEpPDwoMTw8KDE+PjEpKSkrKCgxPDwx ...
- Java并发/多线程系列——初识篇
回到过去,电脑有一个CPU,一次只能执行一个程序.后来多任务处理意味着计算机可以同时执行多个程序(AKA任务或进程).这不是真的"同时".单个CPU在程序之间共享.操作系统将在运行 ...
- 在CentOS6上利用PXE+Kickstart+Apache+DHCP实现无人值守安装
在CentOS6上利用PXE+Kickstart+Apache+DHCP实现无人值守安装 1.PXEServer:OS:CentOS6.9IP:172.16.25.69: (1)apache:# mo ...
- java中属性,set get 以及如何学习类的一些用法
1,先来看一个例子 package com.tdq.java; public class Run { public static void main(String[]args){ Student st ...
- python之testcenter操作
一.设置python环境 1. 从以下路径中将StcPython.py文件拷贝出来 Linux: /Installdir/Spirent_TestCenter_4.xx/Spirent_TestCen ...
- this到底指向哪里
this指向调用它的对象 首先要明确,this指向调用方,谁调用,this指向谁. 直接调用 举个栗子: var test = 'window' ; function testThis () { va ...
- webpack 的使用1
进入指定文件夹 npm init 安装 npm install webapck --save-dev 根目录下新建hello.js 将文件打包到指定文件 Asset :打包成的文件名称 Chunk ...
- python 设计模式,“多”例模式
版本1:一个账号不能同时是司机乘客. #-*- coding:utf-8 -*- ''' Created on 2016年8月2日 @author: yangfanholiday ''' class ...
- java通过shield链接Elasticsearch
本文mark了springboot中集成elasticsearch,并且实现连接带有shield权限管理的elasticsearch的方法. tips:首先建议java client版本和elasti ...